HTML.it - Reference Bootstrap

Guida Boostrap 3 - Reference

Indice dei contenuti

Navigazione

Bootstrap mette a disposizione un componente generico per la creazione di menu di navigazione a partire da liste non ordinate ul. Questo componente generico è contraddistinto dalla classe .nav. All'interno di ciascun li si definisce un link. La classe .active designa l'elemento della navigazione attivo.

Markup HTML di base

<ul class="nav">
 <li class="active"><a href="#">Item 1</a></li>
 <li><a href="#">Item 2</a></li>
 <li><a href="#">Item 3</a></li>
</ul>

Regole CSS per il testo nei menu di navigazione

Il testo e i link nei menu di navigazione ereditano le impostazioni globali. Si può però intervenire sul padding e sulla spaziatura interna dei link agendo su questa regola:

.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

Per modificare lo stile sull'hover questa è la regola:

.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}

Navigazione a tab

A partire da questa struttura di base possiamo creare i menu veri e propri aggiungendo alla classe .nav altre classi. Se vogliamo creare una navigazione a tab aggiungiamo la classe -nav-tabs.

<ul class="nav nav-tabs">
 <li class="active"><a href="#">Item 1</a></li>
 <li><a href="#">Item 2</a></li>
 <li><a href="#">Item 3</a></li>
</ul>

Regole CSS per il componente .nav-tabs

Si può intervenire su aspetti stilistici come il bordo, l'arrotondamento degli angoli e l'aspetto delle tab sull'hover agendo su queste regole:

.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.428571429;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

.nav-tabs > li > a:hover {
  border-color: #eeeeee #eeeeee #dddddd;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555555;
  cursor: default;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-bottom-color: transparent;
}

Navigazione orizzontale

Per strutturare una navigazione orizzontale si usa la classe .nav-pills.

<ul class="nav nav-pills">
 <li class="active"><a href="#">Item 1</a></li>
 <li><a href="#">Item 2</a></li>
 <li><a href="#">Item 3</a></li>
</ul>

Regole CSS per il componente -nav-pills

Per modificare la forma e i colori dell'indicatore di item attivo si può agire su queste regole:

.nav-pills > li > a {
  border-radius: 5px;
}

.nav-pills > li + li {
  margin-left: 2px;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #ffffff;
  background-color: #428bca;
}

Navigazione verticale

Per creare una navigazione verticale si aggiunge alla classe .nav-pills la classe .nav-stacked. Un esempio è la barra a sinistra di questa reference.

<ul class="nav nav-pills nav-stacked">
 <li class="active"><a href="#">Item 1</a></li>
 <li><a href="#">Item 2</a></li>
 <li><a href="#">Item 3</a></li>
</ul>