Glifi disponibili

Ben 200 glifi sottoforma di font provenienti da Glyphicon. Solitamente un set di icone di Glyphicons non è disponibile gratuitamente, fortunatamente il loro creatore le ha rese disponibili appositamente per Bootstrap senza alcun costo da pagare. Come ringraziamento, vi chiediamo di inserire un link verso Glyphicons quando possibile.

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-envelope
glyphicon glyphicon-pencil
glyphicon glyphicon-glass
glyphicon glyphicon-music
glyphicon glyphicon-search
glyphicon glyphicon-heart
glyphicon glyphicon-star
glyphicon glyphicon-star-empty
glyphicon glyphicon-user
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeat
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flag
glyphicon glyphicon-headphones
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-picture
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-step-backward
glyphicon glyphicon-fast-backward
glyphicon glyphicon-backward
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-question-sign
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-gift
glyphicon glyphicon-leaf
glyphicon glyphicon-fire
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
glyphicon glyphicon-warning-sign
glyphicon glyphicon-plane
glyphicon glyphicon-calendar
glyphicon glyphicon-random
glyphicon glyphicon-comment
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-certificate
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hand-right
glyphicon glyphicon-hand-left
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-tasks
glyphicon glyphicon-filter
glyphicon glyphicon-briefcase
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-heart-empty
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-unchecked
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon-saved
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-transfer
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-deciduous

Come usarle

Per ragioni di performance, tutte le icone richiedono una classe base e una classe individuale per quell'icona. Per usarle, utilizza il codice seguente dove preferisci. Assicurati di lasciare uno spazio tra l'icona e il testo per un padding appropriato.

Non mescolarle con altri componenti

Le classi di icona non possono essere combinate direttamente con altri componenti. Non dovrebbero essere usate assieme con altre classi sullo stesso elemento. Piuttosto, aggiungi uno <span> annidato e applica le classi dell'icona allo <span>.

<span class="glyphicon glyphicon-search"></span>

Esempi

Usale in bottoni, gruppi di bottoni, barre di navigazione, o anteposte agli input dei form.

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

Apribile e richiudibile. Menu contestuale per visualizzare liste di link. Reso interattivo con il plugin dropdown JavaScript.

Esempio

Racchiudi il trigger del dropdown e il menu del dropdown all'interno della classe .dropdown, oppure un altro elemento che abbia dichiarato position: relative;. Dopo aggiungi il codice HTML del menu.

<div class="dropdown">
  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Allineamento

Di default, un menu dropdown è posizionato automaticamente al 100% dal top e lungo il lato sinistro dell'elemento genitore. Aggiungi .dropdown-menu-right ad un .dropdown-menu per allineare il menu a destra.

Potrebbe richiedere posizionamenti aggiuntivi

I Dropdowns sono automaticamente posizionati tramite CSS all'interno del documento. Questo significa che i dropdowns potrebbero essere tagliati o apparire fuori dai bordi della finestra per via di elementi genitori con proprietà overflow specifiche.

Allineamento `.pull-right` deprecato

A partire dalla versione v3.1.0, abbiamo deprecato l'uso di .pull-right sui menu a discesa (dropdown). Per allineare a destra un menu, usa .dropdown-menu-right. I componenti di navigazione nella navbar usano una versione del mixin di questa classe per allineare automaticamente il menu. Per sovrascriverla, usa .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

Intestazioni

Aggiungi un'intestazione per etichettare delle sezioni o delle azioni in un qualsiasi menu a discesa.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  ...
  <li role="presentation" class="divider"></li>
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  ...
</ul>

Elementi disabilitati nel menu

Aggiungi .disabled al tag <li> nel menu per disabilitare il link.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>

Raggruppa assieme una serie di pulsanti su una singola linea attraverso il button group. Aggiungi un comportamento in stile radio/checkbox con il nostro plugin sui bottoni.

Tooltips & popovers nei gruppi di pulsanti richiedono una configurazione speciale

Quando usi tooltips o popovers su elementi all'interno di un .btn-group, devi specificare l'opzione container: 'body' per evitare effetti collaterali (come ad esempio l'aumento delle dimensioni di un elemento o la perdita degli angoli arrotondati quando il tooltip viene richiamato).

Esempio di base

Racchiudi una serie di pulsanti dotati di classe .btn in .btn-group.

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Combina una serie di <div class="btn-group"> in un <div class="btn-toolbar"> per i componenti più complessi.

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>

Dimensionamento

Invece di applicare classi di dimensionamento ad ogni singolo bottone di un gruppo, aggiungi il dimensionamento al gruppo, ovvero .btn-group-* al .btn-group.

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

Annidare

Piazza un .btn-group all'interno di un altro .btn-group quando vuoi menu a discesa, assieme a un'altra serie di bottoni.

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Variante in verticale

Crea un insieme di bottoni visualizzati in verticale piuttosto che in orizzontale. I pulsanti di suddivisione dei dropdown non sono supportati qui.

<div class="btn-group-vertical">
  ...
</div>

Gruppi di pulsanti giustificati

Fa si che un gruppo di pulsanti si allunghi per coprire le stesse dimensioni dell'elemento genitore. Funziona anche con i pulsanti dropdowns contenuti all'interno di un button group.

Gestire i bordi

A causa delle specifiche HTML e CSS usate per giustificare i bottoni (cioè display: table-cell), i bordi sono raddoppiati. Nei gruppi di pulsanti, margin-left: -1px è usato per ammassare i bordi invece di rimuoverli. Tuttavia, margin non funziona con display: table-cell. Come risultato, potresti voler rimuovere o ricolorare i bordi a seconda della tua personalizzazione di Bootstrap.

Con gli elementi `<a>`

Racchiudi una serie di .btn in .btn-group.btn-group-justified.

Left Middle Right

Left Middle

<div class="btn-group btn-group-justified">
  ...
</div>

Con gli elementi `<button>`

Per realizzare gruppi di bottoni giustificati sugli elementi <button>, devi racchiudere ogni bottone in un gruppo di bottoni (button group). Molti browsers non applicano correttamente il nostro CSS per la giustifica agli elementi <button>, ma dal momento che supportiamo i button dropdowns, possiamo aggirare questo problema.

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

Usa un qualunque pulsante per innescare un menu a discesa, piazzando il pulsante all'interno di un .btn-group e scrivendo il codice del menu.

Dipendenze Plugin

I Button dropdowns richiedono che il dropdown plugin sia incluso nella tua versione di Bootstrap.

Singolo pulsante a discesa

Trasforma un pulsante in un interruttore con alcune semplici modifiche.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Pulsante con menu suddiviso

In modo analogo, creiamo un bottone a discesa con menu suddiviso, aggiungendo un elemento di separazione nel menu.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Dimensionamento

I menu a discesa funzionano con pulsanti di ogni dimensione.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Variante Dropup (in salita)

Innesca menu dropdown verso l'alto aggiungendo .dropup all'elemento genitore.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Estendi i controlli del form aggiungendo testo o pulsanti, prima o dopo di qualsiasi input testuale. Usa .input-group con un .input-group-addon per anteporre o posporre un elemento ad un singolo .form-control.

Compatibilità cross-browser

Evita di usare nei gruppi di input elementi <select> in quanto non pienamente stilizzati nei WebKit dei browsers.

Tooltips & popovers negli input groups richiedono configurazioni particolari

Quando usi tooltips o popovers su elementi contenuti in un .input-group, devi specificare l'opzione container: 'body' per evitare effetti collaterali (come ad esempio l'aumento delle dimensioni di un elemento o la perdita degli angoli arrotondati quando il tooltip viene richiamato).

Non mescolarli con altri componenti

Non mescolare gruppi di form o classi di griglia direttamente con i gruppi di input. Piuttosto, annida il gruppo di input all'interno del gruppo di form o all'interno dell'elemento che definisce la griglia.

Esempio di base

Piazza componenti o bottoni ad uno o entrambi i lati di un input.

Non è supportato l'inserimento di più componenti su un singolo lato.

Non è supportato l'uso di controlli per form in un gruppo di input.

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

Dimensionamento

Aggiungi le apposite classi per il ridimensionamento all'.input-group e automaticamente ogni elemento contenuto verrà ridimensionato — non c'è bisogno di ripetere la classe di ridimensionamento su ogni singolo elemento.

<div class="input-group input-group-lg">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Checkboxes e radio button (dentro un input)

Piazza checkbox o radio button all'interno di un input group al posto del testo.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Pulsanti (dentro un input)

I bottoni all'interno di un input differiscono leggermente da checkboxes e radio button. Richiedono un altro livello d'annidamento. Invece di usare .input-group-addon, dovrai usare .input-group-btn per racchiudere i bottoni. E' necessario a causa degli stili di default dei browser che non possono essere sovrascritti.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Bottoni con menu a discesa (all'interno di input)

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu pull-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Bottoni segmentati

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

I navs disponibili in Bootstrap condividono la sintassi, partendo dalla classe base .nav, così come gli stati condivisi. Scambia le classi del modificatore per passare ad altri stili.

Schede

Nota che la classe .nav-tabs richiede l'uso della classe di base .nav.

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Richiede del plugin JavaScript tabs

E' necessario l'uso del plugin JavaScript tabs per generare l'intera area che contiene le etichette delle schede.

Pillole

Usa lo stesso codice HTML, ma con la classe .nav-pills:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Le etichette con visualizzazione a "pillole" possono esser visualizzate anche in verticale. Basta aggiungere .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Giustificato

Rendi le schede o le pillole della stessa larghezza dell'elemento genitore che le contiene (su schermi con larghezza maggiore di 768px) con .nav-justified. Su schermi piccoli, i link vengono impilati uno sull'altro.

Safari e i navigatori responsivi

Per quanto riguarda la versione v7.0.1 di Safari, c'è un bug che provoca errori nel rendering del nav al ridimensionamento orizzontale della finestra. Questo bug è visibile anche nell'esempio di nav giustificato.

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Links disabilitati

Per ogni componente di navigazione (schede o pillole), aggiungi la classe .disabled per disabilitare l'effetto hover e colorare i link di grigio.

Non intacca la funzionalità dei Link

Questa classe cambia solo l'aspetto degli elementi <a>, non la loro funzionalità. Usa del codice Javascript apposito per disabilitare i link.

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Usando i menu a discesa (dropdowns)

Aggiungi dei menu a discesa con un pò di codice HTML extra e il plugin JavaScript dropdowns.

Schede con menu a discesa

<ul class="nav nav-tabs">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Pillole con menu a discesa

<ul class="nav nav-pills">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

I navbars sono meta componenti responsivi che servono come metodo di navigazione principale nelle tue applicazioni o nei tuoi siti web. Sono visualizzati compressi nelle finestre piccole e si espandono in orizzontale al crescere della larghezza della finestra.

Contenuto in eccesso

Dal momento che Bootstrap non sa quanto spazio occupa il contenuto della tua navbar, potresti imbatterti in qualche problema di contenuto in eccesso, quest'ultimo verrà portato su una seconda riga. Per risolvere, puoi:

Ridurre il numero o la larghezza degli elementi nella navbar.
Nascondere alcuni elementi della navbar nel caso si usi una finestra di grandezza x, usando le classi responsive.
Cambiare il punto in cui la tua navbar passa dalla modalità compressa a quella estesa in orizzontale. Personalizza la variabile @grid-float-breakpoint o aggiungi una tua media query personalizzata.

Richiede JavaScript

Se JavaScript è disabilitato nel browser e la finestra è stretta abbastanza da far comprimere la navbar, sarà impossibile espandere la navbar e vedere il contenuto all'interno di .navbar-collapse.

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Dipendenze plugin

La navbar responsiva richiede che nella tua versione di Bootstrap venga incluso il collapse plugin.

Regole di accessibilità - navbars

Assicurati di inserire per ogni navbar role="navigation". Per adattarsi agli standard di accessibilità.

Piazza il contenuto del form all'interno di .navbar-form per un allineamento verticale corretto e una visuale compressa nelle finestre strette. Usa le opzioni di allineamento per decidere dove posizionarlo all'interno della navbar.

Nota bene, .navbar-form condivide molto del suo codice con .form-inline attraverso i mixin. Alcuni controlli, come gli input groups, possono richiedere larghezze fisse per essere visualizzati correttamente all'interno di una navbar.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Avvertenze sui dispositivi Mobile

Ci sono alcuni avvertimenti riguardo l'uso dei controlli per form all'interno di elementi fissi sui dispositivi mobile. Per maggiori dettagli Guarda la nostra documentazione sul supporto dei browser.

Aggiungi sempre le etichette

Gli Screen readers (usati dai portatori di handicap visivo) avranno problemi con la lettura del tuo form se non aggiungi delle etichette per ogni input. Per le navbar con form in linea, puoi nascondere le etichette usando la classe .sr-only.

Aggiungi la classe .navbar-btn agli elementi <button> non presenti in un <form> per centrarli verticalmente nella navbar.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Utilizzo specifico al contesto

Così come le classi per bottoni standard, .navbar-btn può essere usato su elementi <a> e <input>. Tuttavia, nè .navbar-btn nè le classi standard per i bottoni dovrebbero essere usate su elementi <a> contenuti in .navbar-nav.

Racchiudi le stringhe di testo in un elemento con classe .navbar-text, tipicamente un tag <p> per una grandezza e colorazione appropriata.

<p class="navbar-text">Signed in as Mark Otto</p>

Per coloro che usano link standard non all'interno del componente di navigazione della navbar, usate la classe .navbar-link. In questo modo verranno visualizzati con la giusta colorazione sia nel caso di navbar standard che di navbar invertita.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Allinea (all'interno di un nav) links, forms, bottoni, o testo, usando le classi .navbar-left o .navbar-right. Entrambe le classi aggiungeranno un float CSS nella direzione specificata. Per esempio, per allineare dei links, mettili in un <ul> separato, con la rispettiva classe d'allineamento applicata.

Queste classi sono derivate (attraverso i mixin) da .pull-left e .pull-right, ma sono limitate alle media queries per facilitare la gestione dei componenti delle navbar fra dispositivi con differenti dimensioni di schermo.

Aggiungi .navbar-fixed-top e includi un .container o un .container-fluid per centrare e ottimizzare il contenuto della navbar.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

Richiesto un Body padding

La navbar fissa si sovrapporrà agli altri contenuti, a meno che non aggiungi del padding in cima all'elemento <body>. Prova dei valori che ritieni opportuni o usa il pezzetto di codice qui sotto. Suggerimento: di default, la navbar è alta 50px.

body { padding-top: 70px; }

Assicurati di includerlo dopo il core CSS di Bootstrap.

Aggiungi .navbar-fixed-bottom e includi un .container o un .container-fluid per centrare e ottimizzare il contenuto della navbar.

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

Richiesto un Body padding

La navbar fissa si sovrapporrà agli altri contenuti, a meno che non aggiungi del padding in basso all'elemento <body>. Prova dei valori che ritieni opportuni o usa il pezzetto di codice qui sotto. Suggerimento: di default, la navbar è alta 50px.

body { padding-bottom: 70px; }

Assicurati di includerlo dopo il core CSS di Bootstrap.

Crea una navbar full-width che scorre con la pagina, aggiungendo .navbar-static-top e includendo un .container o un .container-fluid per centrare e ottimizzare il contenuto della navbar.

Diversamente dalle classi .navbar-fixed-*, non hai bisogno di modificare il padding del body.

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

Modifica l'aspetto della navbar aggiungendo .navbar-inverse.

<nav class="navbar navbar-inverse" role="navigation">
  ...
</nav>

Breadcrumbs (briciole di pane)

Indica la pagina corrente all'interno di una gerarchia di navigazione.

I separatori sono aggiunti automaticamente con CSS attraverso :before e content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Paginatura

Fornisci link di paginatura per il tuo sito o la tua app con il componente per la paginatura multi-pagina, o il più semplice paginatore alternativo.

Paginatura di default

Semplice paginatura inspirata da Rdio, ottima per applicazioni e risultati di ricerca. Il blocco grande è difficile che sfugga, facilmente scalabile, e fornisce un'area per il click abbastanza ampia.

«
1
2
3
4
5
»

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

Stati: disabilitato e attivo

I link possono essere personalizzati per differenti circostanze. Usa .disabled per rendere un link incliccabile (la funzionalità permane, è lo stile a cambiare) e .active per indicare la pagina corrente.

<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
  ...
</ul>

In alternativa puoi cambiare gli elementi <a> con <span> per rimuovere la funzionalità di click pur mantenendo lo stile desiderato.

<ul class="pagination">
  <li class="disabled"><span>&laquo;</span></li>
  <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
  ...
</ul>

Dimensionamento

Desideri numeri di pagina più grandi o più piccoli? Aggiungi .pagination-lg o .pagination-sm.

«
1
2
3
4
5
»

«
1
2
3
4
5
»

«
1
2
3
4
5
»

<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

Paginatore

Link rapidi, precedente e successivo, per una paginatura veloce e uno stile minimale. E' ottimo per siti semplici come blog e magazine.

Esempio di default

Di default, i link sono centrati.

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Links allineati

In alternativa, puoi allineare ogni link ai lati:

<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Opzionale: stato disabilitato

I link del paginatore usano anch'essi la classe .disabled.

<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Esempio

Example heading New

<h3>Example heading <span class="label label-default">New</span></h3>

Varianti disponibili

Aggiungi una qualsiasi delle classi sotto menzionate per cambiare l'aspetto di un'etichetta.

Default Primary Success Info Warning Danger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Evidenzia facilmente oggetti nuovi o non letti aggiungendo un <span class="badge"> a links, navs, e altro...

Inbox 42

<a href="#">Inbox <span class="badge">42</span></a>

Auto collasso

Quando non ci sono oggetti nuovi o da leggere, i badges semplicemente collassano (attraverso il selettore CSS :empty).

Compatibilità Cross-browser

I Badges non auto collassano in Internet Explorer 8 perchè manca il supporto al selettore :empty.

Si adatta a stati attivi nel nav

Alcuni stili predefiniti vengono inclusi per piazzare i distintivi/badges negli stati attivi nella navigazione in stile "pillole".

<ul class="nav nav-pills nav-stacked">
  <li class="active">
    <a href="#">
      <span class="badge pull-right">42</span>
      Home
    </a>
  </li>
  ...
</ul>

Un componente leggero e flessibile che può estendere l'intera finestra per mostrare contenuti chiave nel tuo sito.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

Per mostrare il jumbotron a piena larghezza, e senza angoli arrotondati, piazzalo fuori da tutti i .container e aggiungici invece un .container all'interno.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Page Header rappresenta un piccolo guscio per h1, per far si che spezzi correttamente il contenuto di una pagina. Si può far uso dell'elemento small di default per h1, così come molti altri componenti (con stili aggiuntivi).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Estende il sistema a griglia di Bootstrap con il componente per le miniature, in modo da visualizzare griglie di immagini, video, testo e altro.

Esempio di default

Di default, le miniature di Bootstrap sono disegnate per mostrare (a mò di vetrina) immagini linkabili con uno stile e un codice minimale.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180" alt="...">
    </a>
  </div>
  ...
</div>

Contenuto personalizzato

Con un pò di codice extra, è possibile aggiungere qualsiasi tipo di contenuto HTML, come intestazioni, paragrafi, o pulsanti, all'interno delle miniature.

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Fornisci messaggi di feedback contestuali per le azioni degli utenti con i messaggi di alert disponibili in Bootstrap. Per la chiusura in linea, usa il plugin jQuery sugli alerts.

Esempi

Per messaggi d'avviso base, racchiudi qualsiasi testo e bottone (opzionale) di chiusura in .alert e in una delle quattro classi contestuali (ex., .alert-success).

Nessuna classe di default

Gli alerts non hanno classi di default, solo una base e delle classi contestuali. Un alert di default, grigio, non ha molto senso, quindi specifica il tipo di alert attraverso la classe contestuale di cui hai bisogno. Ovvero "success", "info", "warning", o "danger".

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

Alerts richiudibili

Applicabile su ogni alert, ne permette la chiusura, semplicemente aggiungi la classe .alert-dismissable e il bottone di chiusura.

Warning! Better check yourself, you're not looking too good.

<div class="alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Assicura un comportamento corretto su dispositivi differenti

Assicurati di usare l'elemento <button> con l'attributo data-dismiss="alert".

Links negli Alert

Usa la classe .alert-link per colorare in modo appropriato un link, all'interno di un qualsiasi alert.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

<div class="alert alert-success">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger">
  <a href="#" class="alert-link">...</a>
</div>

Fornisci dei feedback visivi aggiornati sul progresso di un lavoro o di un'azione con queste barre di avanzamento flessibili (dette anche progress bar).

Compatibilità Cross-browser

Queste barre d'avanzamento usano animazioni e transizioni CSS3 per raggiungere l'effetto desiderato. Queste caratteristiche non sono supportate da Internet Explorer 9 o versioni inferiori e da vecchie versioni di Firefox. Opera 12 non supporta le animazioni.

Esempio di base

Barra d'avanzamento di default.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Con etichetta

Rimuovi la classe .sr-only contenuta nella barra per rendere visibile la percentuale d'avanzamento. Per piccole percentuali, considera l'aggiunta di min-width per far si che il testo dell'etichetta sia completamente visibile.

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Alternative contestuali

Le barre d'avanzamento usano alcune classi comuni ai bottoni e agli alert, per gli stili contestuali.

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete</span>
  </div>
</div>

Striato

Utilizza un gradiente per creare l'effetto striato. Non disponibile su IE8.

<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animato

Aggiungi .active a .progress-striped per animare le strisce da destra verso sinistra. Non disponibile su IE9 e versioni precedenti.

<div class="progress progress-striped active">
  <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Ammassato

Per uno stile "ammassato" piazza più barre d'avanzamento nello stesso .progress.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Vari stili per oggetti astratti atti a creare vari tipi di componenti (ex. commenti per blog, Tweets, etc) che abbiano un'immagine allineata a sinistra o a destra del contenuto testuale.

Media di default

Di default permette di allineare un oggetto multimediale (immagine, video, audio) a sinistra o a destra di un blocco testuale.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Lista di Media

Con un pò di codice extra, puoi realizzare una lista di oggetti media (utile per i commenti di un articolo o liste di articoli).

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" src="..." alt="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Le "List groups" sono componenti flessibili e potenti per mostrare non solo semplici liste di elementi, ma liste di elementi con del contenuto personalizzato.

Esempio di base

La lista a gruppo più semplice che possa esserci è una lista non ordinata di elementi, con le classi appropriate. Puoi applicarci sopra le regole CSS di cui hai bisogno.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Distintivi (Badges)

Aggiungi dei distintivi ad ogni elemento della lista e verranno automaticamente posizionati alla destra.

14 Cras justo odio
2 Dapibus ac facilisis in
1 Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Oggetti Linkati

Puoi linkare ogni elemento della list group usando i tags <a> invece dei tags di lista <li> (che si traduce nell'uso di un tag genitore <div> invece di un <ul>). Non c'è bisogno di un tag che racchiuda ogni elemento, tipico delle comuni liste.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Classi contestuali

Usa le classi contestuali per cambiare lo stile agli oggetti della lista (elementi di lista o link che siano, funziona per entrambi). Includi anche lo stato .active.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Contenuto personalizzato

Puoi aggiungere praticamente qualsiasi codice HTML all'interno, persino per la list group composta da link, come quella mostrata qui di seguito.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Mentre non sempre è necessario, qualche volta avrai bisogno di inserire il tuo DOM in un box. Per queste situazioni, prova il componente "Pannello" (Panel).

Esempio di base

Di default, tutto ciò che fa il .panel è applicare bordo e del padding di base per racchiudere dei contenuti di vario genere.

Basic panel example

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Pannello con intestazione

Aggiungi facilmente un contenitore d'intestazione al tuo pannello con .panel-heading. Puoi anche includere qualsiasi <h1>-<h6> con una classe .panel-title per aggiungere uno stile predefinito alle intestazioni.

Panel heading without title

Panel content

Panel title

Panel content

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Pannello con piè di pagina

Racchiudi pulsanti o testo in un .panel-footer. Nota che il pannello in piè di pagina non eredita colori e bordi quando usa varianti contestuali in quanto non sono destinati ad essere in primo piano.

Panel content

Panel footer

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Varianti contestuali

Come gli altri componenti, rendi un pannello significativo per un contesto particolare aggiungendo una qualsiasi delle classi contestuali.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Con tabelle

Aggiungi una tabella (senza bordi) .table all'interno di un pannello. Se c'è un .panel-body, aggiungiamo un bordo extra in cima alla tabella di separazione.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Se non c'è un corpo nel pannello (panel body), il componente si sposta dall'intestazione del pannello alla tabella, senza interruzione.

Panel heading

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Con una lista a gruppo (list group)

Inlcudi facilmente una list group a piena larghezza all'interno di un qualsiasi pannello.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Gabbia di default

Usa le gabbie per un semplice effetto d'inserimento su un elemento.

Guarda, sono in una gabbia!

<div class="well">...</div>

Classi opzionali

Controlla il padding e gli angoli arrotondati con queste due classi opzionali.

Guarda, sono in una gabbia grande!

<div class="well well-lg">...</div>

Guarda, sono in una gabbia piccola!

<div class="well well-sm">...</div>

Componenti

Glyphicons

Glifi disponibili

Come usarle

Non mescolarle con altri componenti

Esempi

Dropdowns

Esempio

Allineamento

Potrebbe richiedere posizionamenti aggiuntivi

Allineamento .pull-right deprecato

Intestazioni

Elementi disabilitati nel menu

Gruppi di bottoni

Tooltips & popovers nei gruppi di pulsanti richiedono una configurazione speciale

Esempio di base

Button toolbar

Dimensionamento

Annidare

Variante in verticale

Gruppi di pulsanti giustificati

Gestire i bordi

Con gli elementi <a>

Con gli elementi <button>

Button dropdowns (pulsanti a discesa)

Dipendenze Plugin

Singolo pulsante a discesa

Pulsante con menu suddiviso

Dimensionamento

Variante Dropup (in salita)

Gruppi di input

Compatibilità cross-browser

Tooltips & popovers negli input groups richiedono configurazioni particolari

Non mescolarli con altri componenti

Esempio di base

Dimensionamento

Checkboxes e radio button (dentro un input)

Pulsanti (dentro un input)

Bottoni con menu a discesa (all'interno di input)

Bottoni segmentati

Navigatori (Navs)

Schede

Richiede del plugin JavaScript tabs

Pillole

Giustificato

Safari e i navigatori responsivi

Links disabilitati

Non intacca la funzionalità dei Link

Usando i menu a discesa (dropdowns)

Schede con menu a discesa

Pillole con menu a discesa

Navbar

Navbar di default

Contenuto in eccesso

Richiede JavaScript

Dipendenze plugin

Regole di accessibilità - navbars

Forms (Moduli)

Avvertenze sui dispositivi Mobile

Aggiungi sempre le etichette

Pulsanti

Utilizzo specifico al contesto

Testo

Links Non-nav (non di navigazione)

Allineamento dei componenti

Fisso in alto

Richiesto un Body padding

Fisso in basso

Richiesto un Body padding

Statico in cima

Navbar invertita

Breadcrumbs (briciole di pane)

Paginatura

Paginatura di default

Stati: disabilitato e attivo

Dimensionamento

Paginatore

Esempio di default

Links allineati

Opzionale: stato disabilitato

Allineamento `.pull-right` deprecato

Con gli elementi `<a>`

Con gli elementi `<button>`