Il sistema a griglia

Utilizziamo il sistema a griglia di Bootstrap per creare una semplice intestazione con una barra di navigazione.

Nell'esempio che segue, viene utilizzato un tag header HTML a cui viene associata una classe predefinita di Bootstrap: container.

<header class="container">
  ...
</header>

All'interno dell'header viene creata una riga utilizzando un tag div con la classe Bootstrap row:

<header class="container">
  <div class="row">
  </div> 
</header>

Da ultimo, la riga viene divisa in due parti:

<header class="container">
  <div class="row">
   <h1 class="col-sm-4">Heading</h1>
   <nav class="col-sm-8 text-right">
    <p>nav item 1</p>
    <p>nav item 2</p>
    <p>nav item 3</p>
   </nav> 
 </div>
</header>

La prima parte comprende il tag h1 con la classe bootstrap col-sm-4. Questa parte occuperà le prime quattro colonne delle griglia.

La seconda parte comprende il tag nav con la classe col-sm-8. Questa occuperà la parte rimanente della pagina, cioè otto colonne. L'attributo text-right indica che il testo deve essere allineato a destra nel tag nav.

Istruzioni 1

Nel file HTML, nella linea seguente il tag body aperto, create un tag header con la classe container:

<header class="container">
  ...
</header>

Istruzioni 2

Ora, all'interno del tag <header class="container">, create un tag div con la classe row:

<header class="container">
  <div class="row">
  </div>
</header>

Istruzioni 3

Ora dividiamo la riga in due parti.

Per la prima parte, all'interno del tag <div class="row"> create un tag h1 con la classe col-sm-4. Il contenuto del tag h1 sarà il nome dell'azienda. Potete usare Skillfair o qualsiasi altro testo:

<header class="container">
  <div class="row">
    <h1 class="col-sm-4">Skillfair</h1>
  </div>
</header>

Istruzioni 4

Ora per la seconda parte della riga, appena sotto il tag h1 , creiamo un tag nav con la classe col-sm-8 text-right:

<header class="container">
  <div class="row">
    <h1 class="col-sm-4">Master</h1>
    <nav class="col-sm-8 text-right">
    </nav>
 </div>
</header>

Istruzioni 5

Da ultimo, all'interno del tag <nav class="col-sm-8">, create tre tag p. Il loro contenuto sarà il testo per i link di navigazione. Potete usare: "novità", "catalogo e "contatti":

<header class="container">
  <div class="row">
    <h1 class="col-sm-4">Master</h1>
    <nav class="col-sm-8 text-right">
      <p>Novità</p>
      <p>Catalogo</p>
      <p>Cntatti</p>
    </nav>
 </div>
</header>

Il risultato dovrebbe apparirvi come questa pagina di cui trovate il codice qui.