Creare un tema: "Simply Me"
Questa pagina vi mostrerà come costruire un Bootstrap tema da zero.
Inizieremo con una semplice pagina HTML, e quindi aggiungere sempre più componenti, fino a quando abbiamo un sito web completamente funzionale, personale e reattivo.
Il risultato sarà simile a questo, e si è liberi di modificare, salvare, condividere, utilizzare o fare quello che vuoi con esso:
HTML Pagina di avvio
Inizieremo con la seguente pagina 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>Aggiungere Bootstrap CDN e inserito gli elementi in un contenitore
Aggiungere Bootstrap CDN e un link per jQuery e mettere elementi HTML all'interno di un contenitore:
Esempio
<!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>Risultato:
Chi sono?
Sono un avventuriero
Aggiungere colore di sfondo e testo al centro
1. Aggiungere una classe personalizzata (.bg-1) al contenitore per aggiungere un colore di sfondo.
2. Aggiungere il .text-center di classe per centrare il testo all'interno del contenitore:
Esempio
<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>Risultato:
Chi sono?
Sono un avventuriero
Circle Immagine
Forma l'immagine di un cerchio con il .img-circle classe:
Esempio
<img src="bird.jpg"
class="img-circle" alt="Bird">
Risultato:
Chi sono?
Sono un avventuriero
più contenuti
Aggiungere più contenuti e metterlo dentro nuovi contenitori:
Esempio
<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>Risultato:
Chi sono?
Sono un avventuriero
Cosa sono?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud esercitazioni ullamco laboris nisi ut aliquip ex EA Commodo consequat.
Dove trovarmi?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud esercitazioni ullamco laboris nisi ut aliquip ex EA Commodo consequat.
Aggiungere Imbottitura
Consente di rendere i contenitori guardare bene con l'aggiunta di un po 'di imbottitura:
Esempio
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>Risultato:
Chi sono?
Sono un avventuriero
Cosa sono?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud esercitazioni ullamco laboris nisi ut aliquip ex EA Commodo consequat.
Dove trovarmi?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud esercitazioni ullamco laboris nisi ut aliquip ex EA Commodo consequat.
Aggiungere un pulsante
Aggiungere un pulsante al contenitore a metà:
Esempio
<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>
Risultato:
Cosa sono?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud esercitazioni ullamco laboris nisi ut aliquip ex EA Commodo consequat.
RicercaAggiungere un'icona
Aggiungere l'icona di ricerca sul pulsante "Cerca":
Esempio
<a href="#" class="btn btn-default btn-lg">
<span
class="glyphicon glyphicon-search"></span> Search
</a>
Risultato:
Prova tu stesso "Modificare il terzo contenitore (Aggiungi Grid)
Aggiungere tre colonne di uguale larghezza all'interno del terzo contenitore ( .col-sm-4 ):
Esempio
<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>Risultato:
Dove trovarmi?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Tempor ut labore et dolore incididunt magna aliqua.
Rendere le immagini Responsive
Aggiungere il .img-responsive classe a tutte le immagini.
Aggiungere display:inline alla prima immagine per forzarlo a essere centrato (la .img-responsive classe aggiunge display:block per l'immagine, che lo rende saltare alla sinistra dello schermo).
Se si desidera che l'immagine per coprire l'intera larghezza dello schermo quando inizia a impilare, aggiungere width:100% all'immagine.
Quando si apre l'esempio, ricordarsi di ridimensionare lo schermo per vedere l'effetto reattivo:
Esempio
<!-- 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"> Prova tu stesso " Aggiungere un Navbar
Aggiungere una barra di navigazione di serie nella parte superiore della pagina con e renderlo pieghevole su schermi più piccoli:
Esempio
<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>Risultato:
Prova tu stesso "Stile La Navbar
Utilizzare i CSS per personalizzare la barra di navigazione:
Esempio
.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;
}Risultato:
Prova tu stesso "Aggiungere un piè di pagina
Aggiungere un piè di pagina e di usare i CSS per lo stile che:
Esempio
<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>Risultato:
Prova tu stesso "tocco finale
Personalizza il tuo tema con l'aggiunta di un carattere che ti piace. Abbiamo usato "Montserrat" dalla libreria font di Google.
Link alla fonte nella <head> sezione:
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Quindi è possibile utilizzare nella pagina:
Esempio
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;} Abbiamo anche creato una classe di margine di "aiuto" per aggiungere ulteriore spazio in cui pensiamo che sia necessario; Di solito, dopo ogni <h3> e <img> elemento.