Bootstrap-tema "Simply Me"
Skep 'n tema: "Simply Me"
Hierdie bladsy sal jou wys hoe om 'n Bootstrap-tema van nuuts af te bou.
Ons sal begin met 'n eenvoudige HTML-bladsy, en dan meer en meer komponente byvoeg totdat ons 'n ten volle funksionele, persoonlike en responsiewe webwerf het.
Die resultaat sal so lyk, en jy is vry om dit te wysig, stoor, deel, gebruik of doen wat jy wil daarmee:
HTML-beginbladsy
Ons begin met die volgende HTML-bladsy:
<!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>
Voeg Bootstrap CDN by en plaas elemente in houer
Voeg Bootstrap CDN en 'n skakel na jQuery by en plaas HTML-elemente in 'n houer:
Voorbeeld
<!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>
Resultaat:
Wie is ek?
Ek is 'n avonturier
Voeg agtergrondkleur en middelteks by
1. Voeg 'n pasgemaakte klas (.bg-1) by die houer om 'n agtergrondkleur by te voeg.
2. Voeg die .text-centerklas by om die teks binne die houer te sentreer:
Voorbeeld
<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>
Resultaat:
Wie is ek?
Ek is 'n avonturier
Sirkelbeeld
Vorm die prent in 'n sirkel met die .img-circleklas:
Voorbeeld
<img src="bird.jpg" class="img-circle" alt="Bird">
Resultaat:
Wie is ek?
Ek is 'n avonturier
Meer inhoud
Voeg meer inhoud by en plaas dit in nuwe houers:
Voorbeeld
<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>
Resultaat:
Wie is ek?
Ek is 'n avonturier
Wat is ek?
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn. Sodat, vir die grootste deel, enige een van ons tot die uitoefening van enige soort werk sal kom, behalwe om voordeel te trek uit die doelwitte daaruit.
Waar om my te vind?
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn. Sodat, vir die grootste deel, enige een van ons tot die uitoefening van enige soort werk sal kom, behalwe om voordeel te trek uit die doelwitte daaruit.
Voeg opvulling by
Kom ons laat die houers goed lyk deur 'n bietjie vulling by te voeg:
Voorbeeld
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
Resultaat:
Wie is ek?
Ek is 'n avonturier
Wat is ek?
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn. Sodat, vir die grootste deel, enige een van ons tot die uitoefening van enige soort werk sal kom, behalwe om voordeel te trek uit die doelwitte daaruit.
Waar om my te vind?
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn. Sodat, vir die grootste deel, enige een van ons tot die uitoefening van enige soort werk sal kom, behalwe om voordeel te trek uit die doelwitte daaruit.
Voeg 'n knoppie by
Voeg 'n knoppie by die middelste houer:
Voorbeeld
<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>
Resultaat:
Wat is ek?
Die pyn self is die liefde vir die pyn, die belangrikste ekologiese probleme, maar ek gee hierdie soort tyd om te val, sodat 'n paar groot pyn en pyn. Sodat, vir die grootste deel, enige een van ons tot die uitoefening van enige soort werk sal kom, behalwe om voordeel te trek uit die doelwitte daaruit.
SoekVoeg 'n ikoon by
Voeg 'n Soek-ikoon by die "Soek"-knoppie:
Voorbeeld
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
Resultaat:
Wysig die derde houer (Voeg rooster by)
Voeg drie kolomme van gelyke breedte by die derde houer ( .col-sm-4):
Voorbeeld
<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>
Resultaat:
Waar om my te vind?
Die pyn self is belangrik, maar die pyn word versterk deur die adipiscerende proses, maar ek gee dit tyd om dit af te sny sodat ek goeie werk en pyn kan doen.
Die pyn self is belangrik, maar die pyn word versterk deur die adipiscerende proses, maar ek gee dit tyd om dit af te sny sodat ek goeie werk en pyn kan doen.
Die pyn self is belangrik, maar die pyn word versterk deur die adipiscerende proses, maar ek gee dit tyd om dit af te sny sodat ek goeie werk en pyn kan doen.
Maak die beelde responsief
Voeg die .img-responsiveklas by alle beelde.
Voeg display:inlineby die eerste prent om dit te dwing om gesentreer te word (die .img-responsiveklas voeg display:block
by die prent, wat dit na links van die skerm laat spring).
As jy wil hê dat die prent oor die hele breedte van die skerm moet strek wanneer dit begin stapel, voeg width:100%dit by die prent.
Wanneer jy die voorbeeld oopmaak, onthou om die grootte van die skerm te verander om die responsiewe effek te sien:
Voorbeeld
<!-- 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">
Voeg 'n Navbar by
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;}