Per creare l’header delle pagine (intesa come area di intestazione visibile all’utente), Bootstrap dispone di una apposita classe, page-header, che appunto crea una area in cui inserire il titolo H1 ed eventuale testo supplementare. Vediamo il codice HTML:
<div class="page-header">
<h1>Intestazione pagina <small>testo aggiuntivo</small></h1>
</div>
Naturalmente, nell’intestazione della pagina potete aggiungere altri elementi come, ad esempio, un pulsante di navigazione..
Jumbotron
Se però si desidera una intestazione di pagina più “evidente” allora potrebbe essere utile ricorrere al componente Jumbotron, che crea una area rettangolare coi bordi arrotondati estesa per tutta l’area orizzontale disponibile.
L’area ha uno sfondo scuro che la fa risaltare nettamente rispetto al resto della pagina.
Il componente Jumbotron si crea con un elemento div a cui viene applicata la classe jumbotron, in questo modo:
<div class="jumbotron">
<h1>Intestazione pagina <small>testo aggiuntivo</small></h1>
<p>Lorem ipsum dolor sit amet, ...</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
Per l’esempio della figura sopra, abbiamo aggiunto anche un po’ di padding per l’elemento body in modo da distanziare dal bordo della pagina il componente jumbotron.
