Bootstrap-Theme „Simply Me“
Erstellen Sie ein Thema: „Simply Me“
Diese Seite zeigt Ihnen, wie Sie ein Bootstrap-Design von Grund auf neu erstellen.
Wir beginnen mit einer einfachen HTML-Seite und fügen dann immer mehr Komponenten hinzu, bis wir eine voll funktionsfähige, persönliche und responsive Website haben.
Das Ergebnis sieht so aus, und Sie können es ändern, speichern, teilen, verwenden oder tun, was Sie wollen:
HTML-Startseite
Wir beginnen mit der folgenden HTML-Seite:
<!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>
Fügen Sie Bootstrap CDN hinzu und legen Sie Elemente im Container ab
Fügen Sie Bootstrap CDN und einen Link zu jQuery hinzu und platzieren Sie 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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
Hintergrundfarbe hinzufügen und Text zentrieren
1. Fügen Sie dem Container eine benutzerdefinierte Klasse (.bg-1) hinzu, um eine Hintergrundfarbe hinzuzufügen.
2. Fügen Sie die .text-centerKlasse hinzu, um den Text im Container zu zentrieren:
Beispiel
<head>
<style>
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
</style>
</head>
<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
Kreisbild
Formen Sie das Bild mit der .img-circleKlasse zu einem Kreis:
Beispiel
<img src="bird.jpg" class="img-circle" alt="Bird">
Ergebnis:
Wer bin ich?
Ich bin ein Abenteurer
Mehr Inhalt
Fügen Sie weitere Inhalte hinzu und legen Sie sie in neue Container:
Beispiel
<head>
<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>
</head>
<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?
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen. Um auf ein Minimum zu kommen, wer von uns sollte eine Beschäftigung ausüben, außer um die Konsequenzen daraus zu ziehen.
Wo man mich findet?
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen. Um auf ein Minimum zu kommen, wer von uns sollte eine Beschäftigung ausüben, außer um die Konsequenzen daraus zu ziehen.
Polsterung hinzufügen
Lassen Sie die Container gut aussehen, indem Sie etwas Polsterung hinzufügen:
Beispiel
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
Ergebnis:
Wer bin ich?
Ich bin ein Abenteurer
Was bin ich?
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen. Um auf ein Minimum zu kommen, wer von uns sollte eine Beschäftigung ausüben, außer um die Konsequenzen daraus zu ziehen.
Wo man mich findet?
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen. Um auf ein Minimum zu kommen, wer von uns sollte eine Beschäftigung ausüben, außer um die Konsequenzen daraus zu ziehen.
Fügen Sie eine Schaltfläche hinzu
Fügen Sie dem mittleren Container eine Schaltfläche hinzu:
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?
Der Schmerz selbst ist die Liebe des Schmerzes, das wichtigste ökologische Problem, aber ich gebe dieser Art Zeit, um herunterzufallen, damit einige große Schmerzen und Schmerzen entstehen. Um auf ein Minimum zu kommen, wer von uns sollte eine Beschäftigung ausüben, außer um die Konsequenzen daraus zu ziehen.
SucheFügen Sie ein Symbol hinzu
Fügen Sie ein Suchsymbol auf der Schaltfläche "Suchen" hinzu:
Beispiel
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
Ergebnis:
Ändern Sie den dritten Container (Raster hinzufügen)
Fügen Sie drei Spalten gleicher Breite innerhalb des dritten Containers hinzu ( .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 man mich findet?
Der Schmerz selbst ist wichtig, aber der Schmerz wird durch den Adipiskationsprozess verstärkt, aber ich gebe ihm Zeit, ihn zu reduzieren, damit ich großartige Arbeit und Schmerzen leisten kann.
Der Schmerz selbst ist wichtig, aber der Schmerz wird durch den Adipiskationsprozess verstärkt, aber ich gebe ihm Zeit, ihn zu reduzieren, damit ich großartige Arbeit und Schmerzen leisten kann.
Der Schmerz selbst ist wichtig, aber der Schmerz wird durch den Adipiskationsprozess verstärkt, aber ich gebe ihm Zeit, ihn zu reduzieren, damit ich großartige Arbeit und Schmerzen leisten kann.
Machen Sie die Bilder reaktionsschnell
Fügen Sie die .img-responsiveKlasse allen Bildern hinzu.
Fügen Sie display:inlinedem ersten Bild hinzu, um es zu zentrieren (die .img-responsiveKlasse fügt display:block
dem Bild hinzu, wodurch es auf die linke Seite des Bildschirms springt).
Wenn Sie möchten, dass das Bild die gesamte Breite des Bildschirms einnimmt, wenn es zu stapeln beginnt, fügen Sie width:100%dem Bild hinzu.
Denken Sie beim Öffnen des Beispiels daran, die Größe des Bildschirms zu ändern, um den Responsive-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">
Fügen Sie eine Navigationsleiste hinzu
Add a standard navigation bar at the top of the page with and make it collapsible on smaller screens:
Example
<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>
Result:
Style The Navbar
Use CSS to customize the navigation bar:
Example
.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;
}
Result:
Add a Footer
Add a footer and use CSS to style it:
Example
<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer class="container-fluid bg-4 text-center">
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com">www.w3schools.com</a></p>
</footer>
Result:
Final Touch
Personalize your Theme by adding a font that you like. We have used "Montserrat" from Google's Font Library.
Link to the font in the
<head> section:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Then you can use it in the page:
Example
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}
We have also created a "helper" margin class to add extra space
where we think it's needed; usually after each <h3> and <img> element.
Example
.margin {margin-bottom: 45px;}