Creazione di un Jumbotron
Un jumbotron indica una grande scatola per richiamare l'attenzione in più per alcuni contenuti o informazioni speciali.
Un jumbotron viene visualizzato come una casella grigia con gli angoli arrotondati. Si allarga anche le dimensioni dei caratteri del testo al suo interno.
Suggerimento: All'interno di un jumbotron si può mettere praticamente qualsiasi HTML valido, compresi gli altri Bootstrap elementi / classi.
Utilizzare un <div> elemento con classe .jumbotron per creare un Jumbotron:
Bootstrap Tutorial
Bootstrap è il più popolare HTML, CSS e JS quadro per lo sviluppo di reattivi, mobili primi progetti sul web.
Jumbotron all'interno del contenitore
Posizionare il Jumbotron all'interno del <div class="container"> se si desidera che il jumbotron di si estende fino al bordo dello schermo:
Esempio
<div class="container">
<div class="jumbotron">
<h1>Bootstrap
Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS
framework for developing
responsive, mobile-first projects on the
web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Prova tu stesso " Jumbotron Fuori Container
Posizionare il Jumbotron al di fuori del <div class="container"> se si desidera che il jumbotron di estendere ai bordi dello schermo:
Esempio
<div class="jumbotron">
<h1>Bootstrap
Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS
framework for developing responsive,
mobile-first projects on the
web.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Prova tu stesso " Creazione di un'intestazione di pagina
Una intestazione della pagina è come un divisore di sezione.
Il .page-header classe aggiunge una linea orizzontale sotto l'intestazione (+ aggiunge qualche spazio in più attorno all'elemento):
Esempio Intestazione della pagina
Utilizzare un <div> elemento con classe .page-header per creare un'intestazione di pagina: