Crea o temă: "Simply Me" și "Simply Me"
Această pagină vă va arăta cum să construiască o Bootstrap temă de la zero.
Vom începe cu o pagină HTML simplu și apoi adăugați mai multe și mai multe componente, până când vom avea un site web complet funcțional, personal și receptiv.
Rezultatul va arata ca acest lucru, și sunteți liberi să modificați, salvați, să distribuiți, utilizați sau să faci ce vrei cu ea:
HTML Pagina de pornire
Vom începe cu următoarea pagină HTML:
<!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>Adăugați Bootstrap CDN Pune Elemente în containere
Adăugați Bootstrap CDN și un link de jQuery și de a pune elemente HTML în interiorul unui container:
Exemplu
<!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>Rezultat:
Cine sunt?
Sunt un aventurier
Adăugați culoare de fundal și Centrul de text
1. Adăugați o clasă personalizată (.bg-1) la container pentru a adăuga o culoare de fundal.
2. Adăugați .text-center de clasa pentru a centra textul din interiorul containerului:
Exemplu
<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>Rezultat:
Cine sunt?
Sunt un aventurier
Cercul de imagine
Forma imaginea într - un cerc cu .img-circle clasa:
Exemplu
<img src="bird.jpg"
class="img-circle" alt="Bird">
Rezultat:
Cine sunt?
Sunt un aventurier
Mai mult conținut
Adăugați mai mult conținut și pune-l în recipiente pentru noi:
Exemplu
<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>Rezultat:
Cine sunt?
Sunt un aventurier
Ce sunt eu?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do TEMPOR eiusmod ut incididunt Labore et dolore magna aliqua. Ut enim anunț veniam minim, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Unde să mă găsească?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do TEMPOR eiusmod ut incididunt Labore et dolore magna aliqua. Ut enim anunț veniam minim, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Adăugați Umplere
Permite face containerele să arate bine prin adăugarea unor padding:
Exemplu
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>Rezultat:
Cine sunt?
Sunt un aventurier
Ce sunt eu?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do TEMPOR eiusmod ut incididunt Labore et dolore magna aliqua. Ut enim anunț veniam minim, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Unde să mă găsească?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do TEMPOR eiusmod ut incididunt Labore et dolore magna aliqua. Ut enim anunț veniam minim, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Adăugați un buton
Adăugați un buton la container la mijloc:
Exemplu
<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>
Rezultat:
Ce sunt eu?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do TEMPOR eiusmod ut incididunt Labore et dolore magna aliqua. Ut enim anunț veniam minim, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
CăutareAdăugați o pictogramă
Adăugați o pictogramă Căutare pe "Search" buton:
Exemplu
<a href="#" class="btn btn-default btn-lg">
<span
class="glyphicon glyphicon-search"></span> Search
</a>
Rezultat:
Încearcă - l singur »Modificare de al treilea vas (Add Grid)
Se adaugă trei coloane lățime egală în interiorul treilea container ( .col-sm-4 ) :
Exemplu
<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>Rezultat:
Unde să mă găsească?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do TEMPOR eiusmod ut incididunt Labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do TEMPOR eiusmod ut incididunt Labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do TEMPOR eiusmod ut incididunt Labore et dolore magna aliqua.
Asigurați Imaginile receptivă
Adăugați .img-responsive clasa tuturor imaginilor.
Adăugați display:inline la prima imagine pentru a forța să fie centrată (The .img-responsive clasa adaugă display:block imaginii, ceea ce face sări la stânga ecranului).
Dacă doriți ca imaginea să întinde pe întreaga lățime a ecranului atunci când începe să stiva, adăugați width:100% la imagine.
La deschiderea exemplu, amintiți-vă pentru a redimensiona ecranul pentru a vedea efectul receptiv:
Exemplu
<!-- 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"> Încearcă - l singur » Adăugați un Navbar
Adăugați o bară standard de navigare în partea de sus a paginii cu și să-l montabile-demontabile pe ecrane mai mici:
Exemplu
<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>Rezultat:
Încearcă - l singur »Stilul navbar
Utilizați CSS pentru a personaliza bara de navigare:
Exemplu
.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;
}Rezultat:
Încearcă - l singur »Adăugați un subsol
Adăugați un subsol și de a folosi CSS pentru a-l stil:
Exemplu
<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>Rezultat:
Încearcă - l singur »Touch finală
Personalizați Tema adăugând un font care vă place. Am folosit "Montserrat" din Biblioteca Font Google.
Legătura cu fontul în <head> secțiunea:
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Apoi, puteți utiliza în pagina:
Exemplu
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;} Am creat , de asemenea , un "helper" de clasă marjă pentru a adăuga spațiu suplimentar în cazul în care credem că este nevoie; De obicei , după fiecare <h3> și <img> Element.