Tema Bootstrap "Simply Me"
Crea un tema: "Semplicemente io"
Questa pagina ti mostrerà come creare un tema Bootstrap da zero.
Inizieremo con una semplice pagina HTML, per poi aggiungere sempre più componenti, fino ad avere un sito web completamente funzionale, personale e reattivo.
Il risultato sarà simile a questo e sei libero di modificare, salvare, condividere, utilizzare o fare quello che vuoi con esso:
Pagina iniziale HTML
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>
Aggiungi Bootstrap CDN e inserisci elementi nel contenitore
Aggiungi Bootstrap CDN e un collegamento a jQuery e inserisci 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="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>
Risultato:
Chi sono?
Sono un avventuriero
Aggiungi colore di sfondo e centra il testo
1. Aggiungi una classe personalizzata (.bg-1) al contenitore per aggiungere un colore di sfondo.
2. Aggiungi la .text-centerclasse per centrare il testo all'interno del contenitore:
Esempio
<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>
Risultato:
Chi sono?
Sono un avventuriero
Immagine del cerchio
Modella l'immagine in un cerchio con la .img-circleclasse:
Esempio
<img src="bird.jpg" class="img-circle" alt="Bird">
Risultato:
Chi sono?
Sono un avventuriero
Più contenuto
Aggiungi più contenuti e inseriscili in nuovi contenitori:
Esempio
<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>
Risultato:
Chi sono?
Sono un avventuriero
Cosa sono?
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore. Al fine di venire al minimo, chi dei nostri dovrebbe esercitare qualsiasi impiego se non per trarne vantaggio dalle conseguenze.
Dove trovarmi?
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore. Al fine di venire al minimo, chi dei nostri dovrebbe esercitare qualsiasi impiego se non per trarne vantaggio dalle conseguenze.
Aggiungi imbottitura
Facciamo in modo che i contenitori abbiano un bell'aspetto aggiungendo un po' di imbottitura:
Esempio
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
Risultato:
Chi sono?
Sono un avventuriero
Cosa sono?
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore. Al fine di venire al minimo, chi dei nostri dovrebbe esercitare qualsiasi impiego se non per trarne vantaggio dalle conseguenze.
Dove trovarmi?
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore. Al fine di venire al minimo, chi dei nostri dovrebbe esercitare qualsiasi impiego se non per trarne vantaggio dalle conseguenze.
Aggiungi un pulsante
Aggiungi un pulsante al contenitore centrale:
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?
Il dolore stesso è l'amore per il dolore, i principali problemi ecologici, ma io do questo tipo di tempo per cadere, in modo che un grande dolore e dolore. Al fine di venire al minimo, chi dei nostri dovrebbe esercitare qualsiasi impiego se non per trarne vantaggio dalle conseguenze.
RicercaAggiungi un'icona
Aggiungi un'icona Cerca sul pulsante "Cerca":
Esempio
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
Risultato:
Modifica il terzo contenitore (aggiungi griglia)
Aggiungi 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?
Il dolore stesso è importante, ma il dolore è accresciuto dal processo adipico, ma gli do il tempo di ridurlo in modo da fare un ottimo lavoro e dolore.
Il dolore stesso è importante, ma il dolore è accresciuto dal processo adipico, ma gli do il tempo di ridurlo in modo da fare un ottimo lavoro e dolore.
Il dolore stesso è importante, ma il dolore è accresciuto dal processo adipico, ma gli do il tempo di ridurlo in modo da fare un ottimo lavoro e dolore.
Rendi le immagini reattive
Aggiungi la .img-responsiveclasse a tutte le immagini.
Aggiungi display:inlinealla prima immagine per forzarne il centraggio (la .img-responsiveclasse aggiunge display:block
all'immagine, il che la fa saltare a sinistra dello schermo).
Se vuoi che l'immagine si estenda per l'intera larghezza dello schermo quando inizia a impilarsi, aggiungi width:100%all'immagine.
Quando apri l'esempio, ricorda 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">
Aggiungi una barra di navigazione
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;}