Jumbotron
In aggiunta all'header e i link di navigazione, molti siti web hanno una grossa area centrale che visualizza i contenuti più importanti. Bootstrap la chiama jumbotron.
Di seguito un esempio di come può essere implementato.
Per prima cosa, si crea un tag section a cui si assegna la classe jumbotron.
<section class="jumbotron">
</section>
Poi si aggiunge al suo interno un div con la classe container:
<section class="jumbotron">
<div class="container">
...
</div>
</section>
Un altro div con la classe row text-center provvede a centrare gli elementi successivi che contengono del testo:
<section class="jumbotron">
<div class="container">
<div class="row text-center">
...
</div>
</div>
</section>
Il testo ... è un segnaposto per gli elementi con il testo come h2 e p o a.
Creiamone uno. Trovate il codice da cui partire anche online.
Istruzioni 1
Nel file HTML, nella linea al di sotto del tag header chiuso, create un tag section di classe jumbotron.
<section class="jumbotron">
</section>
Ora vedrete una larga immagine che copre la parte centrale della pagina.
Istruzioni 2
Appena all'inizio del tag <section class="jumbotron">, create un tag div con la classe container.
<section class="jumbotron">
<div class="container">
</div>
</section>
Non dimenticate il tag di chiusura </div>.
Istruzioni 3
Per centrare il testo nel jumbotron, creare un altro tag div all'interno del div container. Assegnate al nuovo div la classe row text-center.
<section class="jumbotron">
<div class="container">
<div class="row text-center">
...
</div>
</div>
</section>
Istruzioni 4
Da ultimo, aggiungete una intestazione ed un link alla riga.
Il link, tag a avrà classe btn btn-primary che lo trasformerà in un bottone.
<section class="jumbotron">
<div class="container">
<div class="row text-center">
<h2>Homemade Goods</h2>
<h3>This Year's Best</h3>
<a class="btn btn-primary" href="#" role="button">See all</a>
</div>
</div>
</section>
Se volete modificate il testo nei tag h2, h3. Potete anche sostituire il link fittizio # con un link a piacere.