Glifi disponibili

Include oltre 250 glifi in formato font dal set Glyphicon Halflings. Gli Halfling di Glyphicons normalmente non sono disponibili gratuitamente, ma il loro creatore li ha resi disponibili gratuitamente per Bootstrap. Come ringraziamento, ti chiediamo solo di includere un collegamento a Glyphicons quando possibile.

glyphicon glyphicon-asterisco
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-meno
glyphicon glyphicon-nuvola
glyphicon glyphicon-busta
glyphicon glyphicon-matita
glyphicon glyphicon-vetro
glyphicon glyphicon-musica
glyphicon glyphicon-ricerca
glyphicon glyphicon-cuore
glyphicon glyphicon-stella
glyphicon glyphicon-stella-vuota
glyphicon glyphicon-utente
glyphicon glyphicon-film
glyphicon glyphicon-th-grande
glyphicon glyphicon-th
glyphicon glyphicon-esimo-elenco
glyphicon glyphicon-ok
glyphicon glyphicon-rimuovi
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-segnale
glyphicon glyphicon-cog
glyphicon glyphicon-spazzatura
glyphicon glyphicon-casa
glyphicon glyphicon-file
glyphicon glyphicon-tempo
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-posta in arrivo
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeat
glyphicon glyphicon-aggiorna
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-bandiera
glyphicon glyphicon-cuffie
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-basso
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-codice a barre
glyphicon glyphicon-tag
glyphicon glyphicon-tag
glyphicon glyphicon-libro
glyphicon glyphicon-segnalibro
glyphicon glyphicon-stampa
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-grassetto
glyphicon glyphicon-corsivo
glyphicon glyphicon-testo-altezza
glyphicon glyphicon-larghezza-testo
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-rientro-sinistra
glyphicon glyphicon-rientro-destra
glyphicon glyphicon-facetime-video
glyphicon glyphicon-immagine
glyphicon glyphicon-map-marker
glyphicon glyphicon-regola
glyphicon glyphicon-tinta
glyphicon glyphicon-modifica
glyphicon glyphicon-condivisione
glyphicon glyphicon-check
glyphicon glyphicon-mossa
glyphicon glyphicon-passo-indietro
glyphicon glyphicon-veloce-indietro
glyphicon glyphicon-indietro
glyphicon glyphicon-play
glyphicon glyphicon-pausa
glyphicon glyphicon-stop
glyphicon glyphicon-avanti
glyphicon glyphicon-avanti veloce
glyphicon glyphicon-passo avanti
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-sinistra
glyphicon glyphicon-chevron-destra
glyphicon glyphicon-segno-più
glyphicon glyphicon-segno-meno
glyphicon glyphicon-rimuovi-segno
glyphicon glyphicon-ok-segno
glyphicon glyphicon-interrogativo-segno
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-rimuovi-cerchio
glyphicon glyphicon-ok-cerchio
glyphicon glyphicon-ban-circle
glyphicon glyphicon-freccia-sinistra
glyphicon glyphicon-freccia-destra
glyphicon glyphicon-freccia-su
glyphicon glyphicon-freccia giù
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-ridimensiona-piccolo
glyphicon glyphicon-segno-esclamativo
glyphicon glyphicon-regalo
glyphicon glyphicon-foglia
glyphicon glyphicon-fuoco
glyphicon glyphicon-occhio-aperto
glyphicon glyphicon-eye-close
glyphicon glyphicon-segnale di avvertimento
glyphicon glyphicon-piano
glyphicon glyphicon-calendario
glyphicon glyphicon-casuale
glyphicon glyphicon-commento
glyphicon glyphicon-magnete
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-carrello
glyphicon glyphicon-cartella-chiudi
glyphicon glyphicon-cartella-aperta
glyphicon glyphicon-ridimensiona-verticale
glyphicon glyphicon-ridimensiona-orizzontale
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-campana
glyphicon glyphicon-certificato
glyphicon glyphicon-pollice in su
glyphicon glyphicon-pollice giù
glyphicon glyphicon-mano-destra
glyphicon glyphicon-mano-sinistra
glyphicon glyphicon-mano in alto
glyphicon glyphicon-hand-down
glyphicon glyphicon-cerchio-freccia-destra
glyphicon glyphicon-cerchio-freccia-sinistra
glyphicon glyphicon-cerchio-freccia-su
glyphicon glyphicon-cerchio-freccia-giù
glyphicon glyphicon-globo
glyphicon glyphicon-chiave
glyphicon glyphicon-compiti
glyphicon glyphicon-filtro
glyphicon glyphicon-valigetta
glyphicon glyphicon-schermo intero
glyphicon glyphicon-dashboard
glyphicon glyphicon-graffetta
glyphicon glyphicon-cuore-vuoto
glyphicon glyphicon-link
glyphicon glyphicon-telefono
glyphicon glyphicon-puntina da disegno
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-ordina-per-alfabeto
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-ordina-per-ordine
glyphicon glyphicon-ordina-per-ordine-alt
glyphicon glyphicon-ordina-per-attributi
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-deselezionato
glyphicon glyphicon-espandi
glyphicon glyphicon-collasso verso il basso
glyphicon glyphicon-collasso
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-logout
glyphicon glyphicon-nuova-finestra
glyphicon glyphicon-record
glyphicon glyphicon-salvataggio
glyphicon glyphicon-aperto
glyphicon glyphicon-salvato
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-salvato
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-carta di credito
glyphicon glyphicon-trasferimento
glyphicon glyphicon-posate
glyphicon glyphicon-intestazione
glyphicon glyphicon compresso
glyphicon glyphicon-auricolare
glyphicon glyphicon-telefono-alt
glyphicon glyphicon-torre
glyphicon glyphicon-statistiche
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-sottotitoli
glyphicon glyphicon-suono-stereo
glyphicon glyphicon-suono-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-marchio di registrazione
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-albero-conifera
glyphicon glyphicon-albero-deciduo
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-file-aperto
glyphicon glyphicon-level-up
glyphicon glyphicon-copia
glyphicon glyphicon-pasta
glyphicon glyphicon-avviso
glyphicon equalizzatore glyphicon
glyphicon glyphicon-re
glyphicon glyphicon-regina
glyphicon glyphicon-pedone
glyphicon glyphicon-vescovo
glyphicon glyphicon-cavaliere
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tenda
glyphicon glyphicon-lavagna
glyphicon glyphicon-letto
glyphicon glyphicon-mela
glyphicon glyphicon-cancella
glyphicon glyphicon-clessidra
glyphicon glyphicon-lampada
glyphicon glyphicon-duplicato
glyphicon glyphicon-salvadanaio
glyphicon glyphicon-forbici
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-sfregamento
glyphicon glyphicon-scala
glyphicon glyphicon-ghiacciolo
glyphicon glyphicon-gusto di ghiacciolo
glyphicon glyphicon-educazione
glyphicon glyphicon-opzione-orizzontale
glyphicon glyphicon-opzione-verticale
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-finestra-modale
glyphicon glyphicon-olio
glyphicon glyphicon-grano
glyphicon glyphicon-occhiali da sole
glyphicon glyphicon-dimensione-testo
glyphicon glyphicon-text-color
glyphicon glyphicon-testo-sfondo
glyphicon glyphicon-oggetto-allineamento-top
glyphicon glyphicon-oggetto-allineamento-fondo
glyphicon glyphicon-oggetto-allineamento-orizzontale
glyphicon glyphicon-oggetto-allineamento-sinistra
glyphicon glyphicon-oggetto-allineamento-verticale
glyphicon glyphicon-oggetto-allineamento-destra
glyphicon glyphicon-triangolo-destra
glyphicon glyphicon-triangolo-sinistra
glyphicon glyphicon-triangolo-fondo
glyphicon glyphicon-triangolo-top
glyphicon glyphicon-console
glyphicon glyphicon-apice
glyphicon glyphicon-pedice
glyphicon glyphicon-menu-sinistra
glyphicon glyphicon-menu-destra
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Come usare

Per motivi di prestazioni, tutte le icone richiedono una classe base e una classe icona individuale. Per usarlo, posiziona il codice seguente praticamente ovunque. Assicurati di lasciare uno spazio tra l'icona e il testo per un riempimento corretto.

Non mescolare con altri componenti

Le classi di icone non possono essere combinate direttamente con altri componenti. Non dovrebbero essere usati insieme ad altre classi sullo stesso elemento. Invece, aggiungi un nidificato <span>e applica le classi di icone al file <span>.

Solo per l'uso su elementi vuoti

Le classi di icone devono essere utilizzate solo su elementi che non contengono contenuto di testo e non hanno elementi figlio.

Modifica della posizione del carattere dell'icona

Bootstrap presuppone che i file dei caratteri delle icone si trovino nella ../fonts/directory, relativa ai file CSS compilati. Spostare o rinominare quei file di font significa aggiornare il CSS in uno dei tre modi seguenti:

Modificare le variabili @icon-font-pathe/o @icon-font-namenei file Less di origine.
Utilizza l' opzione relativa agli URL fornita dal compilatore Less.
Modifica i url()percorsi nel CSS compilato.

Usa l'opzione più adatta alla tua specifica configurazione di sviluppo.

Icone accessibili

Le versioni moderne delle tecnologie assistive annunceranno il contenuto generato dai CSS, oltre a specifici caratteri Unicode. Per evitare un output non intenzionale e confuso negli screen reader (in particolare quando le icone vengono utilizzate esclusivamente per la decorazione), le nascondiamo con l' aria-hidden="true"attributo.

Se stai utilizzando un'icona per trasmettere un significato (piuttosto che solo come elemento decorativo), assicurati che questo significato venga trasmesso anche alle tecnologie assistive, ad esempio includi contenuti aggiuntivi, visivamente nascosti con la .sr-onlyclasse.

Se stai creando controlli senza altro testo (come quelli <button>che contengono solo un'icona), dovresti sempre fornire contenuto alternativo per identificare lo scopo del controllo, in modo che abbia senso per gli utenti delle tecnologie assistive. In questo caso, puoi aggiungere un aria-labelattributo sul controllo stesso.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Esempi

Usali nei pulsanti, nei gruppi di pulsanti per una barra degli strumenti, nella navigazione o negli input di moduli anteposti.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

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

Un'icona utilizzata in un avviso per comunicare che si tratta di un messaggio di errore, con .sr-onlytesto aggiuntivo per trasmettere questo suggerimento agli utenti di tecnologie assistive.

Inserire un indirizzo email valido

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Menu contestuale attivabile per visualizzare elenchi di collegamenti. Reso interattivo con il plugin JavaScript a discesa .

Esempio

Avvolgi il trigger del menu a discesa e il menu a discesa all'interno .dropdowno un altro elemento che dichiara position: relative;. Quindi aggiungi l'HTML del menu.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

I menu a discesa possono essere modificati per espandersi verso l'alto (anziché verso il basso) aggiungendoli .dropupal genitore.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Allineamento

Per impostazione predefinita, un menu a discesa viene posizionato automaticamente al 100% dall'alto e lungo il lato sinistro del suo genitore. Aggiungi .dropdown-menu-righta a .dropdown-menuper allineare a destra il menu a discesa.

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

Intestazioni

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Divisore

Aggiungi un divisore per separare le serie di collegamenti in un menu a discesa.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Voci di menu disabilitate

Aggiungi .disableda un <li>nel menu a discesa per disabilitare il collegamento.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Raggruppa una serie di pulsanti su un'unica riga con il gruppo di pulsanti. Aggiungi la radio JavaScript opzionale e il comportamento dello stile delle caselle di controllo con il nostro plugin per pulsanti .

Tooltip e popover nei gruppi di pulsanti richiedono un'impostazione speciale

Quando utilizzi descrizioni comandi o popover su elementi all'interno di un .btn-group, dovrai specificare l'opzione container: 'body'per evitare effetti collaterali indesiderati (come l'allargamento dell'elemento e/o la perdita degli angoli arrotondati quando viene attivato il suggerimento o il popover).

Garantire corretto `role`e fornire un'etichetta

Affinché le tecnologie assistive, come le utilità per la lettura dello schermo, indichino che una serie di pulsanti è raggruppata, è rolenecessario fornire un attributo appropriato. Per i gruppi di pulsanti, questo sarebbe role="group", mentre le barre degli strumenti dovrebbero avere un role="toolbar".

Un'eccezione sono i gruppi che contengono un solo controllo (ad esempio i gruppi di pulsanti giustificati con <button>elementi) o un menu a discesa.

Inoltre, ai gruppi e alle barre degli strumenti dovrebbe essere assegnata un'etichetta esplicita, poiché la maggior parte delle tecnologie assistive non li annuncerà, nonostante la presenza dell'attributo corretto role. Negli esempi forniti qui, utilizziamo , ma possono essere utilizzate anche aria-labelalternative come .aria-labelledby

Esempio di base

Avvolgi una serie di pulsanti con .btnin .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <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 insiemi di <div class="btn-group">in a <div class="btn-toolbar">per componenti più complessi.

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

Dimensionamento

Invece di applicare classi di ridimensionamento dei pulsanti a ogni pulsante in un gruppo, aggiungi semplicemente .btn-group-*a ciascuno .btn-group, anche quando si annidano più gruppi.

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

Nidificazione

Metti uno .btn-groupdentro un altro .btn-groupquando vuoi che i menu a tendina siano mescolati con una serie di pulsanti.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      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>

Variazione verticale

Fai in modo che una serie di pulsanti appaia impilati verticalmente anziché orizzontalmente. I menu a discesa dei pulsanti di divisione non sono supportati qui.

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

Gruppi di pulsanti giustificati

Fai allungare un gruppo di pulsanti di dimensioni uguali per coprire l'intera larghezza del suo genitore. Funziona anche con i menu a discesa dei pulsanti all'interno del gruppo di pulsanti.

Gestione dei confini

A causa dello specifico HTML e CSS utilizzato per giustificare i pulsanti (vale a dire display: table-cell), i bordi tra di loro sono raddoppiati. Nei normali gruppi di pulsanti, margin-left: -1pxviene utilizzato per impilare i bordi invece di rimuoverli. Tuttavia, marginnon funziona con display: table-cell. Di conseguenza, a seconda delle personalizzazioni di Bootstrap, potresti voler rimuovere o ricolorare i bordi.

IE8 e confini

Internet Explorer 8 non esegue il rendering dei bordi dei pulsanti in un gruppo di pulsanti giustificato, sia che si tratti di elementi <a>che di <button>elementi. Per aggirare il problema, avvolgi ogni pulsante in un altro .btn-group.

Vedere #12476 per ulteriori informazioni.

Con `<a>`elementi

Basta avvolgere una serie di .btns in .btn-group.btn-group-justified.

Sono partiti Mezzo Destra

Sono partiti Mezzo

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

Collegamenti che fungono da pulsanti

Se gli <a>elementi vengono utilizzati per fungere da pulsanti, attivando la funzionalità in-page, piuttosto che passare a un altro documento o sezione all'interno della pagina corrente, dovrebbero anche ricevere un appropriato role="button".

Con `<button>`elementi

Per utilizzare gruppi di pulsanti giustificati con <button>elementi, devi racchiudere ogni pulsante in un gruppo di pulsanti . La maggior parte dei browser non applica correttamente il nostro CSS per la giustificazione agli <button>elementi, ma poiché supportiamo i menu a discesa dei pulsanti, possiamo aggirarlo.

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

Utilizzare qualsiasi pulsante per attivare un menu a discesa posizionandolo all'interno di a .btn-groupe fornendo il markup del menu corretto.

Dipendenza dal plugin

I menu a discesa dei pulsanti richiedono che il plug -in a discesa sia incluso nella tua versione di Bootstrap.

Menu a discesa a pulsante singolo

Trasforma un pulsante in un interruttore a discesa con alcune modifiche di markup di base.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    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 role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Menu a discesa dei pulsanti di divisione

Allo stesso modo, crea menu a discesa dei pulsanti divisi con le stesse modifiche al markup, solo con un pulsante separato.

<!-- 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" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</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 role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Dimensionamento

I menu a discesa dei pulsanti funzionano con pulsanti di tutte le dimensioni.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    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" aria-haspopup="true" aria-expanded="false">
    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" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Variazione a caduta

Attiva i menu a discesa sopra gli elementi aggiungendoli .dropupal 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" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Estendi i controlli dei moduli aggiungendo testo o pulsanti prima, dopo o su entrambi i lati di qualsiasi <input>. Utilizzare .input-groupcon .input-group-addono .input-group-btnper anteporre o aggiungere elementi a un singolo .form-control.

`<input>`Solo s testuali

Evita di utilizzare <select>gli elementi qui in quanto non possono essere completamente stilizzati nei browser WebKit.

Evitare di utilizzare <textarea>elementi qui poiché il loro rowsattributo non verrà rispettato in alcuni casi.

Tooltip e popover nei gruppi di input richiedono un'impostazione speciale

Quando utilizzi descrizioni comandi o popover su elementi all'interno di un .input-group, dovrai specificare l'opzione container: 'body'per evitare effetti collaterali indesiderati (come l'allargamento dell'elemento e/o la perdita degli angoli arrotondati quando viene attivato il suggerimento o il popover).

Non mescolare con altri componenti

Non combinare gruppi di moduli o classi di colonne della griglia direttamente con i gruppi di input. Annidare invece il gruppo di input all'interno del gruppo di moduli o dell'elemento correlato alla griglia.

Aggiungi sempre etichette

I lettori di schermo avranno problemi con i tuoi moduli se non includi un'etichetta per ogni input. Per questi gruppi di input, assicurati che qualsiasi etichetta o funzionalità aggiuntiva venga trasmessa alle tecnologie assistive.

La tecnica esatta da utilizzare (elementi visibili <label>, <label>elementi nascosti usando la classe .sr-onlyo uso dell'attributo aria-label, aria-labelledby, o ) e quali informazioni aggiuntive dovranno essere trasmesse varieranno a seconda del tipo esatto di widget di interfaccia che stai implementando. Gli esempi in questa sezione forniscono alcuni approcci suggeriti e specifici per il caso.aria-describedbytitleplaceholder

Esempio di base

Posiziona un componente aggiuntivo o un pulsante su entrambi i lati di un input. Puoi anche posizionarne uno su entrambi i lati di un input.

Non supportiamo più componenti aggiuntivi ( .input-group-addono .input-group-btn) su un solo lato.

Non supportiamo più controlli modulo in un singolo gruppo di input.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Dimensionamento

Aggiungi le relative classi di ridimensionamento del modulo a .input-groupse stesso e il contenuto all'interno si ridimensionerà automaticamente, non è necessario ripetere le classi di dimensioni del controllo del modulo su ciascun elemento.

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

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

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

Caselle di controllo e componenti aggiuntivi radio

Posiziona qualsiasi casella di controllo o opzione radio all'interno del componente aggiuntivo di un gruppo di input anziché testo.

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

Componenti aggiuntivi del pulsante

I pulsanti nei gruppi di input sono leggermente diversi e richiedono un ulteriore livello di annidamento. Invece di .input-group-addon, dovrai usare .input-group-btnper avvolgere i pulsanti. Ciò è necessario a causa degli stili di browser predefiniti 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" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Pulsanti con menu a tendina

<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" aria-haspopup="true" aria-expanded="false">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 role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" 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" aria-label="...">
</div>

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

Più pulsanti

Sebbene tu possa avere un solo componente aggiuntivo per lato, puoi avere più pulsanti all'interno di un singolo .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

I navigatori disponibili in Bootstrap hanno markup condiviso, a partire dalla .navclasse base, e stati condivisi. Scambia le classi di modificatori per passare da uno stile all'altro.

L'utilizzo di nav per i pannelli a schede richiede il plug-in per schede JavaScript

Per le schede con aree tabbable, è necessario utilizzare il plug-in JavaScript delle schede . Il markup richiederà anche roleattributi aggiuntivi e ARIA: consulta il markup di esempio del plug-in per ulteriori dettagli.

Rendi accessibili i navigatori utilizzati come navigazione

Se stai usando navs per fornire una barra di navigazione, assicurati di aggiungere a role="navigation"al contenitore padre più logico di <ul>, o avvolgi un <nav>elemento attorno all'intera navigazione. Non aggiungere il ruolo allo <ul>stesso, in quanto ciò eviterebbe che venga annunciato come una vera e propria lista dalle tecnologie assistive.

Schede

Nota che la .nav-tabsclasse richiede la .navclasse base.

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

Pillole

Prendi lo stesso HTML, ma usa .nav-pillsinvece:

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

Le pillole sono anche impilabili verticalmente. Basta aggiungere .nav-stacked.

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

Giustificato

Crea facilmente schede o pillole uguali alla larghezza del loro genitore su schermi più larghi di 768px con .nav-justified. Su schermi più piccoli, i collegamenti di navigazione sono impilati.

I collegamenti di navigazione giustificati alla barra di navigazione non sono attualmente supportati.

Safari e navigatori giustificati reattivi

A partire dalla v9.1.2, Safari mostra un bug in cui il ridimensionamento orizzontale del browser provoca errori di rendering nella navigazione giustificata che vengono cancellati dopo l'aggiornamento. Questo bug è mostrato anche nell'esempio di navigazione giustificato .

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

Collegamenti disabilitati

Per qualsiasi componente di navigazione (schede o pillole), aggiungi .disabledcollegamenti grigi e nessun effetto al passaggio del mouse .

Funzionalità di collegamento non influenzata

Questa classe cambierà solo l' <a>aspetto di ', non la sua funzionalità. Usa JavaScript personalizzato per disabilitare i link qui.

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

Utilizzo dei menu a discesa

Aggiungi menu a discesa con un po' di HTML in più e il plug-in JavaScript a discesa .

Schede con menu a discesa

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Pillole con menu a discesa

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Le Navbar sono meta componenti reattive che fungono da intestazioni di navigazione per la tua applicazione o sito. Iniziano a essere compressi (e sono attivabili) nelle viste mobili e diventano orizzontali all'aumentare della larghezza della finestra disponibile.

I collegamenti di navigazione giustificati alla barra di navigazione non sono attualmente supportati.

Contenuti traboccanti

Poiché Bootstrap non sa di quanto spazio ha bisogno il contenuto nella barra di navigazione, potresti riscontrare problemi con il contenuto a capo in una seconda riga. Per risolvere questo problema, puoi:

Riduci la quantità o la larghezza degli elementi della barra di navigazione.
Nascondi determinati elementi della barra di navigazione a determinate dimensioni dello schermo utilizzando classi di utilità reattive .
Cambia il punto in cui la barra di navigazione passa dalla modalità compressa a quella orizzontale. Personalizza la @grid-float-breakpointvariabile o aggiungi la tua media query.

Modifica del punto di interruzione della barra di navigazione mobile compresso

La barra di navigazione si comprime nella vista mobile verticale quando la vista è più stretta di @grid-float-breakpoint, e si espande nella vista non mobile orizzontale quando la vista è almeno @grid-float-breakpointin larghezza. Regola questa variabile nella sorgente Less per controllare quando la barra di navigazione si comprime/si espande. Il valore predefinito è 768px(la schermata più piccola "piccola" o "tablet").

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Sostituisci il marchio della barra di navigazione con la tua immagine scambiando il testo con un file <img>. Poiché .navbar-brandha il suo riempimento e altezza, potrebbe essere necessario sovrascrivere alcuni CSS a seconda dell'immagine.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Posiziona il contenuto del modulo all'interno .navbar-formper un corretto allineamento verticale e un comportamento compresso in finestre strette. Usa le opzioni di allineamento per decidere dove risiede all'interno del contenuto della barra di navigazione.

Come avviso, .navbar-formcondivide gran parte del suo codice con .form-inlinetramite mixin. Alcuni controlli del modulo, come i gruppi di input, potrebbero richiedere la visualizzazione corretta di larghezze fisse all'interno di una barra di navigazione.

<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>

Aggiungi sempre etichette

I lettori di schermo avranno problemi con i tuoi moduli se non includi un'etichetta per ogni input. Per questi moduli in linea, puoi nascondere le etichette utilizzando la .sr-onlyclasse. Esistono ulteriori metodi alternativi per fornire un'etichetta per le tecnologie assistive, come l' attributo aria-label, aria-labelledbyo . titleSe nessuno di questi è presente, le utilità per la lettura dello schermo possono ricorrere all'utilizzo placeholderdell'attributo, se presente, ma si noti che l'uso placeholderin sostituzione di altri metodi di etichettatura non è consigliato.

Aggiungi la .navbar-btnclasse agli <button>elementi che non risiedono in a <form>per centrarli verticalmente nella barra di navigazione.

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

Avvolgi stringhe di testo in un elemento con .navbar-text, di solito su un <p>tag per l'interlinea e il colore corretti.

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

Per le persone che utilizzano collegamenti standard che non sono all'interno del normale componente di navigazione della barra di navigazione, utilizzare la .navbar-linkclasse per aggiungere i colori appropriati per le opzioni della barra di navigazione predefinita e inversa.

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

Allineare collegamenti, moduli, pulsanti o testo di navigazione utilizzando le classi di utilità .navbar-lefto . .navbar-rightEntrambe le classi aggiungeranno un float CSS nella direzione specificata. Ad esempio, per allineare i collegamenti di navigazione, inserirli in un separato <ul>con la rispettiva classe di utilità applicata.

Queste classi sono versioni miste di .pull-lefte .pull-right, ma hanno l'ambito di query multimediali per una gestione più semplice dei componenti della barra di navigazione in tutte le dimensioni dei dispositivi.

Aggiungi .navbar-fixed-tope includi un .containero .container-fluidper centrare e riempire il contenuto della barra di navigazione.

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

Necessaria imbottitura per il corpo

La barra di navigazione fissa si sovrapporrà agli altri tuoi contenuti, a meno che tu non li aggiunga paddingnella parte superiore del file <body>. Prova i tuoi valori o usa il nostro snippet qui sotto. Suggerimento: per impostazione predefinita, la barra di navigazione è alta 50px.

body { padding-top: 70px; }

Assicurati di includerlo dopo il CSS di Bootstrap di base.

Aggiungi .navbar-fixed-bottome includi un .containero .container-fluidper centrare e riempire il contenuto della barra di navigazione.

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

Necessaria imbottitura per il corpo

La barra di navigazione fissa si sovrapporrà agli altri tuoi contenuti, a meno che tu non aggiunga paddingin fondo al file <body>. Prova i tuoi valori o usa il nostro snippet qui sotto. Suggerimento: per impostazione predefinita, la barra di navigazione è alta 50px.

body { padding-bottom: 70px; }

Assicurati di includerlo dopo il CSS di Bootstrap di base.

Crea una barra di navigazione a larghezza intera che scorre via con la pagina aggiungendo .navbar-static-tope includendo una .containero .container-fluidper centrare e riempire il contenuto della barra di navigazione.

A differenza delle .navbar-fixed-*classi, non è necessario modificare il padding su body.

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

Modifica l'aspetto della barra di navigazione aggiungendo .navbar-inverse.

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

Briciole di pane

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

I separatori vengono aggiunti automaticamente in CSS tramite :beforee content.

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

Impaginazione

Fornisci collegamenti di impaginazione per il tuo sito o app con il componente di impaginazione multipagina o l' alternativa più semplice al cercapersone .

Impaginazione predefinita

Impaginazione semplice ispirata a Rdio, ottima per app e risultati di ricerca. Il blocco grande è difficile da perdere, facilmente scalabile e offre ampie aree di clic.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Etichettare il componente di impaginazione

Il componente di impaginazione deve essere racchiuso in un <nav>elemento per identificarlo come una sezione di navigazione per lettori di schermo e altre tecnologie assistive. Inoltre, poiché è probabile che una pagina abbia già più di una di queste sezioni di navigazione (come la navigazione principale nell'intestazione o una navigazione nella barra laterale), è consigliabile fornire una descrizione aria-labelche ne <nav>rifletta lo scopo. Ad esempio, se il componente di impaginazione viene utilizzato per navigare tra una serie di risultati di ricerca, un'etichetta appropriata potrebbe essere aria-label="Search results pages".

Stati disabili e attivi

I collegamenti sono personalizzabili per diverse circostanze. Utilizzare .disabledper collegamenti non cliccabili e .activeper indicare la pagina corrente.

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

Ti consigliamo di sostituire gli ancoraggi attivi o disabilitati con <span>, o di omettere l'ancora nel caso delle frecce precedente/successiva, per rimuovere la funzionalità di clic mantenendo gli stili previsti.

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

Dimensionamento

Hai voglia di un'impaginazione più grande o più piccola? Aggiungi .pagination-lgo .pagination-smper dimensioni aggiuntive.

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

Cercapersone

Collegamenti rapidi precedenti e successivi per semplici implementazioni di impaginazione con markup e stili leggeri. È ottimo per siti semplici come blog o riviste.

Esempio predefinito

Per impostazione predefinita, il cercapersone centra i collegamenti.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Collegamenti allineati

In alternativa, puoi allineare ogni collegamento ai lati:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Stato disabilitato opzionale

I collegamenti cercapersone utilizzano anche la .disabledclasse di utilità generale dall'impaginazione.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Esempio

Esempio di intestazione Nuovo

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

Varianti disponibili

Aggiungi una delle classi di modificatori menzionate di seguito per modificare l'aspetto di un'etichetta.

Informazioni di successo primarie predefinite Avviso Pericolo

<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>

Hai tonnellate di etichette?

Possono sorgere problemi di rendering quando hai dozzine di etichette inline all'interno di un contenitore stretto, ciascuna contenente il proprio inline-blockelemento (come un'icona). Il modo per aggirare questo è l'impostazione display: inline-block;. Per il contesto e un esempio, vedere #13219 .

Evidenzia facilmente gli elementi nuovi o non letti aggiungendo <span class="badge">a link, Bootstrap navs e altro.

Posta in arrivo42

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

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Auto collassante

Quando non ci sono elementi nuovi o non letti, i badge si comprimono semplicemente (tramite il :emptyselettore di CSS) a condizione che non esistano contenuti all'interno.

Compatibilità tra browser

I badge non si comprimono automaticamente in Internet Explorer 8 perché manca il supporto per il :emptyselettore.

Si adatta agli stati di navigazione attivi

Gli stili integrati sono inclusi per posizionare i badge negli stati attivi nelle navigazioni della pillola.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

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

Ciao mondo!

Questa è una semplice unità eroe, un semplice componente in stile jumbotron per richiamare l'attenzione su contenuti o informazioni in primo piano.

Scopri di più

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

Per rendere il jumbotron a tutta larghezza e senza angoli arrotondati, posizionalo all'esterno di tutte le .containers e aggiungi invece un .containerinterno.

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

Una semplice shell per h1distanziare e segmentare in modo appropriato sezioni di contenuto in una pagina. Può utilizzare l' elemento h1predefinito di ' small, così come la maggior parte degli altri componenti (con stili aggiuntivi).

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

Estendi il sistema di griglia di Bootstrap con il componente miniatura per visualizzare facilmente griglie di immagini, video, testo e altro.

Se stai cercando una presentazione simile a Pinterest di miniature di diverse altezze e/o larghezze, dovrai utilizzare un plug-in di terze parti come Masonry , Isotope o Salvattore .

Esempio predefinito

Per impostazione predefinita, le miniature di Bootstrap sono progettate per mostrare le immagini collegate con un markup minimo richiesto.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Contenuti personalizzati

Con un po' di markup in più, è possibile aggiungere qualsiasi tipo di contenuto HTML come intestazioni, paragrafi o pulsanti nelle miniature.

Etichetta miniatura

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.

Pulsante Pulsante

Etichetta miniatura

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.

Pulsante Pulsante

Etichetta miniatura

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.

Pulsante Pulsante

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." 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 tipiche dell'utente con la manciata di messaggi di avviso disponibili e flessibili.

Esempi

Avvolgere qualsiasi testo e un pulsante di eliminazione facoltativo in .alerte una delle quattro classi contestuali (ad esempio, .alert-success) per i messaggi di avviso di base.

Nessuna classe predefinita

Gli avvisi non hanno classi predefinite, solo classi base e modificatore. Un avviso grigio predefinito non ha molto senso, quindi è necessario specificare un tipo tramite una classe contestuale. Scegli tra successo, informazioni, avviso o pericolo.

Ben fatto! Hai letto con successo questo importante messaggio di avviso.

Dritta! Questo avviso richiede la tua attenzione, ma non è molto importante.

Avvertimento! Meglio controllarti, non stai molto bene.

Oh schiocco! Modifica alcune cose e prova a inviare di nuovo.

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

Avvisi ignorabili

Basati su qualsiasi avviso aggiungendo un .alert-dismissiblepulsante di chiusura opzionale.

Richiede il plug-in di avviso JavaScript

Per avvisi completamente funzionanti e non ammissibili, è necessario utilizzare il plug-in JavaScript avvisi .

Avvertimento! Meglio controllarti, non stai molto bene.

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

Garantire un comportamento corretto su tutti i dispositivi

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

Collegamenti negli avvisi

Utilizza la .alert-linkclasse di utilità per fornire rapidamente collegamenti colorati corrispondenti all'interno di qualsiasi avviso.

Ben fatto! Hai letto con successo questo importante messaggio di avviso .

Dritta! Questo avviso richiede la tua attenzione , ma non è molto importante.

Avvertimento! Meglio controllarti, non stai molto bene .

Oh schiocco! Modifica alcune cose e prova a inviare di nuovo.

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

Fornisci un feedback aggiornato sullo stato di avanzamento di un flusso di lavoro o di un'azione con barre di avanzamento semplici ma flessibili.

Compatibilità tra browser

Le barre di avanzamento utilizzano transizioni e animazioni CSS3 per ottenere alcuni dei loro effetti. Queste funzionalità non sono supportate in Internet Explorer 9 e versioni precedenti o precedenti di Firefox. Opera 12 non supporta le animazioni.

Compatibilità con i criteri di sicurezza dei contenuti (CSP).

Se il tuo sito web ha una politica di sicurezza dei contenuti (CSP) che non consente style-src 'unsafe-inline', non sarai in grado di utilizzare gli styleattributi inline per impostare le larghezze della barra di avanzamento come mostrato nei nostri esempi di seguito. Metodi alternativi per impostare le larghezze compatibili con i CSP rigidi includono l'utilizzo di un piccolo JavaScript personalizzato (che imposta element.style.width) o l'utilizzo di classi CSS personalizzate.

Esempio di base

Barra di avanzamento predefinita.

<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

Rimuovere la classe <span>with .sr-onlydalla barra di avanzamento per mostrare una percentuale 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>

Per garantire che il testo dell'etichetta rimanga leggibile anche per percentuali basse, valutare l'aggiunta di min-widtha alla barra di avanzamento.

0%

2%

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

Alternative contestuali

Le barre di avanzamento utilizzano alcuni degli stessi pulsanti e classi di avviso per stili coerenti.

<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 (danger)</span>
  </div>
</div>

A strisce

Usa una sfumatura per creare un effetto a strisce. Non disponibile in IE9 e versioni precedenti.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" 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 progress-bar-striped" 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 progress-bar-striped" 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 progress-bar-striped" 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 .activea .progress-bar-stripedper animare le strisce da destra a sinistra. Non disponibile in IE9 e versioni precedenti.

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

Impilato

Metti più barre nello stesso .progressper impilarle.

<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 progress-bar-striped" 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>

Stili di oggetti astratti per la creazione di vari tipi di componenti (come commenti sul blog, Tweet e così via) che presentano un'immagine allineata a sinistra o a destra insieme al contenuto testuale.

Supporto predefinito

Il supporto predefinito visualizza un oggetto multimediale (immagini, video, audio) a sinistra oa destra di un blocco di contenuto.

Intestazione multimediale

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

Intestazione multimediale

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

Intestazione multimediale nidificata

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

Intestazione multimediale

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

Intestazione multimediale

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

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

Le classi .pull-lefte .pull-rightesistono anche e sono state utilizzate in precedenza come parte del componente multimediale, ma sono obsolete per tale uso a partire dalla v3.3.0. Sono approssimativamente equivalenti a .media-lefte .media-right, tranne per il fatto che .media-rightdovrebbero essere inseriti dopo .media-bodynell'html.

Allineamento multimediale

Le immagini o altri media possono essere allineati in alto, al centro o in basso. Il valore predefinito è allineato in alto.

Media allineati in alto

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Media allineati al centro

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Supporti allineati in basso

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

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

Elenco dei media

Con un po' di markup in più, puoi usare i media all'interno dell'elenco (utile per i thread di commenti o gli elenchi di articoli).

Intestazione multimediale

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

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

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

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

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

I gruppi di elenchi sono un componente flessibile e potente per visualizzare non solo semplici elenchi di elementi, ma anche complessi con contenuto personalizzato.

Esempio di base

Il gruppo di elenchi più semplice è semplicemente un elenco non ordinato con elementi di elenco e le classi appropriate. Costruisci su di esso con le opzioni che seguono o il tuo CSS, se necessario.

Cras solo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibolo all'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

Aggiungi il componente badge a qualsiasi elemento del gruppo elenco e verrà posizionato automaticamente sulla destra.

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

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

Articoli collegati

Collega gli elementi del gruppo di elenchi utilizzando i tag di ancoraggio anziché gli elementi dell'elenco (che significa anche un genitore <div>anziché un <ul>). Non c'è bisogno di genitori individuali attorno a ogni elemento.

Cras solo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibolo all'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>

Elementi pulsante

Gli elementi del gruppo di elenchi possono essere pulsanti anziché elementi di elenco (che significa anche un genitore <div>anziché un <ul>). Non c'è bisogno di genitori individuali attorno a ogni elemento. Non utilizzare le .btnclassi standard qui.

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

Articoli disabilitati

Aggiungi .disableda a .list-group-itemper renderlo grigio in modo che appaia disabilitato.

Cras solo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibolo all'eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    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 definire lo stile degli elementi dell'elenco, predefiniti o collegati. Include anche .activelo stato.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibolo all'eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibolo all'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>

Contenuti personalizzati

Aggiungi quasi qualsiasi codice HTML all'interno, anche per gruppi di elenchi collegati come quello qui sotto.

Elenca l'intestazione dell'elemento del gruppo

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

Elenca l'intestazione dell'elemento del gruppo

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

Elenca l'intestazione dell'elemento del gruppo

Donec id elit non mi porta gravida at eget metus. Mecenate 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>

Sebbene non sia sempre necessario, a volte devi mettere il tuo DOM in una scatola. Per queste situazioni, prova il componente del pannello.

Esempio di base

Per impostazione predefinita, tutto .panelciò che fa è applicare un bordo e un riempimento di base per contenere del contenuto.

Esempio di pannello di base

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

Pannello con intestazione

Aggiungi facilmente un contenitore di intestazione al tuo pannello con .panel-heading. Puoi anche includere qualsiasi <h1>- <h6>con una .panel-titleclasse per aggiungere un'intestazione predefinita. Tuttavia, le dimensioni dei caratteri di <h1>- <h6>sono sostituite da .panel-heading.

Per una corretta colorazione dei collegamenti, assicurati di posizionare i collegamenti nelle intestazioni all'interno di .panel-title.

Intestazione pannello senza titolo

Contenuto del pannello

Titolo del pannello

Contenuto del pannello

<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

Avvolgi pulsanti o testo secondario in .panel-footer. Tieni presente che i piè di pagina del pannello non ereditano colori e bordi quando si utilizzano variazioni contestuali poiché non devono essere in primo piano.

Contenuto del pannello

Piè di pagina del pannello

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

Alternative contestuali

Come altri componenti, puoi facilmente rendere un pannello più significativo per un particolare contesto aggiungendo una qualsiasi delle classi di stato contestuale.

Titolo del pannello

Contenuto del pannello

Titolo del pannello

Contenuto del pannello

Titolo del pannello

Contenuto del pannello

Titolo del pannello

Contenuto del pannello

Titolo del pannello

Contenuto del pannello

<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 tavoli

Aggiungi qualsiasi elemento senza bordi .tableall'interno di un pannello per un design senza interruzioni. Se è presente un .panel-body, aggiungiamo un bordo extra nella parte superiore della tabella per la separazione.

Intestazione pannello

Alcuni contenuti del pannello predefinito qui. Nulla vitae elit libero, a pharetra augu. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesco ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Nome di battesimo	Cognome	Nome utente
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry	l'uccello	@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 è presente il corpo del pannello, il componente si sposta dall'intestazione del pannello alla tabella senza interruzioni.

Intestazione pannello

#	Nome di battesimo	Cognome	Nome utente
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry	l'uccello	@twitter

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

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

Con gruppi di elenchi

Includi facilmente gruppi di elenchi a larghezza intera all'interno di qualsiasi pannello.

Intestazione pannello

Alcuni contenuti del pannello predefinito qui. Nulla vitae elit libero, a pharetra augu. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesco ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras solo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibolo all'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>

Consenti ai browser di determinare le dimensioni del video o della presentazione in base alla larghezza del blocco che li contiene creando un rapporto intrinseco che verrà ridimensionato correttamente su qualsiasi dispositivo.

Le regole vengono applicate direttamente agli elementi <iframe>, <embed>, <video>, e <object>; facoltativamente usa una classe discendente esplicita .embed-responsive-itemquando vuoi abbinare lo stile per altri attributi.

Suggerimento professionale! Non è necessario includerlo frameborder="0"nelle tue <iframe>s poiché lo sovrascriviamo per te.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Predefinito bene

Usa il pozzo come effetto semplice su un elemento per dargli un effetto di inserto.

Guarda, sono in un pozzo!

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

Classi facoltative

Controllare il riempimento e gli angoli arrotondati con due classi di modificatori opzionali.

Guarda, sono in un grande pozzo!

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

Guarda, sono in un piccolo pozzo!

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

Componenti

Glificoni

Glifi disponibili

Come usare

Non mescolare con altri componenti

Solo per l'uso su elementi vuoti

Modifica della posizione del carattere dell'icona

Icone accessibili

Esempi

Dropdown

Esempio

Allineamento

Potrebbe richiedere un posizionamento aggiuntivo

.pull-rightAllineamento deprecato

Intestazioni

Divisore

Voci di menu disabilitate

Gruppi di pulsanti

Tooltip e popover nei gruppi di pulsanti richiedono un'impostazione speciale

Garantire corretto rolee fornire un'etichetta

Esempio di base

Barra degli strumenti del pulsante

Dimensionamento

Nidificazione

Variazione verticale

Gruppi di pulsanti giustificati

Gestione dei confini

IE8 e confini

Con <a>elementi

Collegamenti che fungono da pulsanti

Con <button>elementi

Menu a discesa dei pulsanti

Dipendenza dal plugin

Menu a discesa a pulsante singolo

Menu a discesa dei pulsanti di divisione

Dimensionamento

Variazione a caduta

Gruppi di input

<input>Solo s testuali

Tooltip e popover nei gruppi di input richiedono un'impostazione speciale

Non mescolare con altri componenti

Aggiungi sempre etichette

Esempio di base

Dimensionamento

Caselle di controllo e componenti aggiuntivi radio

Componenti aggiuntivi del pulsante

Pulsanti con menu a tendina

Bottoni segmentati

Più pulsanti

navi

L'utilizzo di nav per i pannelli a schede richiede il plug-in per schede JavaScript

Rendi accessibili i navigatori utilizzati come navigazione

Schede

Pillole

Giustificato

Safari e navigatori giustificati reattivi

Collegamenti disabilitati

Funzionalità di collegamento non influenzata

Utilizzo dei menu a discesa

Schede con menu a discesa

Pillole con menu a discesa

barra di navigazione

Barra di navigazione predefinita

Contenuti traboccanti

Richiede il plug-in JavaScript

Modifica del punto di interruzione della barra di navigazione mobile compresso

Rendi accessibili le barre di navigazione

Immagine di marca

Le forme

Avvertenze sui dispositivi mobili

Aggiungi sempre etichette

Bottoni

Utilizzo specifico del contesto

Testo

Collegamenti non di navigazione

Allineamento dei componenti

Allineamento a destra di più componenti

Fissato in alto

Necessaria imbottitura per il corpo

Fissato al fondo

`.pull-right`Allineamento deprecato

Garantire corretto `role`e fornire un'etichetta

Con `<a>`elementi

Con `<button>`elementi

`<input>`Solo s testuali