Erstellen Sie ein Thema: "Simply Me"
Diese Seite zeigt Ihnen , wie ein zu bauen Bootstrap Thema von Grund auf neu.
Wir werden mit einem einfachen HTML-Seite zu starten, und dann mehr und mehr Komponenten hinzufügen, bis wir eine voll funktionsfähige, persönliche und ansprechende Website.
Das Ergebnis sieht wie folgt aus, und Sie sind frei, zu verändern, zu speichern, zu teilen, verwenden oder tun, was man will:
HTML-Startseite
Wir werden mit der folgenden HTML-Seite zu starten:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap
Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</body>
</html>In Bootstrap CDN und Put - Elemente in Container
In Bootstrap CDN und einen Link zu jQuery und setzen HTML - Elemente in einem Container:
Beispiel
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap
Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
</body>
</html>Ergebnis:
Wer bin ich?
Ich bin ein Abenteurer
Fügen Sie Hintergrundfarbe und Text zentrieren
1. Fügen Sie eine benutzerdefinierte Klasse (.bg-1) mit dem Behälter eine Hintergrundfarbe zu addieren.
2. Fügen Sie den .text-center - Klasse den Text innerhalb des Containers zum Zentrum:
Beispiel
<style>
.bg-1 {
background-color: #1abc9c;
/* Green */
color: #ffffff;
}
</style>
<body>
<div class="container-fluid
bg-1
text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
</body>Ergebnis:
Wer bin ich?
Ich bin ein Abenteurer
Kreis Bild
Prägen das Bild auf einem Kreis mit dem .img-circle
Beispiel
<img src="bird.jpg"
class="img-circle" alt="Bird">
Ergebnis:
Wer bin ich?
Ich bin ein Abenteurer
Mehr Inhalt
Fügen Sie mehr Inhalt und legte es in neue Behälter:
Beispiel
<style>
.bg-1 {
background-color: #1abc9c;
/* Green */
color: #ffffff;
}
.bg-2 {
background-color:
#474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff;
/* White */
color: #555555;
}
</style>
<body>
<div class="container-fluid
bg-1
text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" class="img-circle" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
<div class="container-fluid bg-2 text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
</div>
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<p>Lorem ipsum..</p>
</div>
</body>Ergebnis:
Wer bin ich?
Ich bin ein Abenteurer
Was bin ich?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do TEMPOR eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Wo ich zu finden?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do TEMPOR eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
In Padding
Hier können die Behälter, indem Sie einige Polsterung gut aussehen:
Beispiel
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>Ergebnis:
Wer bin ich?
Ich bin ein Abenteurer
Was bin ich?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do TEMPOR eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Wo ich zu finden?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do TEMPOR eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Fügen Sie ein Button
Fügen Sie eine Schaltfläche zum mittleren Behälter:
Beispiel
<div class="container-fluid bg-2
text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
<a href="#" class="btn btn-default btn-lg">Search</a>
</div>
Ergebnis:
Was bin ich?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do TEMPOR eiusmod incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
SucheFügen Sie ein Icon
Fügen Sie ein Suchsymbol auf der Schaltfläche "Suchen":
Beispiel
<a href="#" class="btn btn-default btn-lg">
<span
class="glyphicon glyphicon-search"></span> Search
</a>
Ergebnis:
Versuch es selber "Ändern Sie den dritten Behälter (Add Grid)
In drei Spalten mit gleicher Breite innerhalb des dritten Behälters ( .col-sm-4 ):
Beispiel
<div class="container-fluid bg-3 text-center">
<h3>Where
To Find Me?</h3>
<div class="row">
<div class="col-sm-4">
<p>Lorem
ipsum..</p>
<img src="birds1.jpg" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem
ipsum..</p>
<img src="birds2.jpg" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem
ipsum..</p>
<img src="birds3.jpg" alt="Image">
</div>
</div>
</div>Ergebnis:
Wo ich zu finden?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do TEMPOR eiusmod incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do TEMPOR eiusmod incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do TEMPOR eiusmod incididunt ut labore et dolore magna aliqua.
Machen Sie die Bilder Responsive
Fügen Sie die .img-responsive Klasse auf alle Bilder.
In display:inline auf das erste Bild zu zwingen , sie (die zentriert werden .img-responsive - Klasse fügt display:block zu dem Bild, das er auf der linken Seite des Bildschirms macht springen).
Wenn Sie das Bild wollen die gesamte Breite des Bildschirms zu überbrücken , wenn es zu stapeln beginnt, fügen width:100% auf das Bild.
Wenn das Beispiel Öffnen, erinnere mich an den Bildschirm, um die Größe der ansprechenden Effekt zu sehen:
Beispiel
<!-- The circular bird -->
<img src="bird.jpg" class="img-responsive
img-circle" style="display:inline" alt="Bird">
<!-- The birds in our grid: -->
<img src="birds1.jpg" class="img-responsive" style="width:100%" alt="Image">
<img
src="birds2.jpg" class="img-responsive" style="width:100%"
alt="Image">
<img
src="birds3.jpg" class="img-responsive" style="width:100%"
alt="Image"> Versuch es selber " Fügen Sie einen Navbar
Fügen Sie eine Standard-Navigationsleiste am oberen Rand der Seite mit und machen es auf kleineren Bildschirmen zusammenklappbar:
Beispiel
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#myNavbar">
<span
class="icon-bar"></span>
<span class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Me</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul
class="nav navbar-nav navbar-right">
<li><a href="#">WHO</a></li>
<li><a href="#">WHAT</a></li>
<li><a href="#">WHERE</a></li>
</ul>
</div>
</div>
</nav>Ergebnis:
Versuch es selber "Style Die Navbar
Verwenden Sie CSS, um die Navigationsleiste anpassen:
Beispiel
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}Ergebnis:
Versuch es selber "Fügen Sie einen Footer
Fügen Sie eine Fußzeile und verwenden CSS es um Stil:
Beispiel
<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer class="container-fluid bg-4
text-center">
<p> Bootstrap Theme Made By <a href="http://www.w3ii.com">www.w3ii.com</a></p>
</footer>Ergebnis:
Versuch es selber "Letzter Schliff
Personalisieren Sie Ihre Themen eine Schriftart durch Zugabe, die Sie mögen. Wir haben "Montserrat" aus dem Google-Font Library verwendet.
Link zur Schriftart im <head> Sektion:
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Dann können Sie es in der Webseite:
Beispiel
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;} Wir haben auch eine "Helfer" Margin-Klasse zusätzlichen Raum hinzufügen, wo wir es gebraucht denken; in der Regel nach jedem <h3> und <img> Element.