Glifi dispunibuli

Include più di 250 glifi in formatu di font da u set Glyphicon Halflings. I Glyphicons Halflings sò normalment micca dispunibili gratuitamente, ma u so creatore li hà resi dispunibili per Bootstrap senza costu. Cum'è un ringraziu, vi dumandemu solu di include un ligame torna à Glyphicons ogni volta chì hè pussibule.

glyphicon glyphicon-asteriscu
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-nuvola
glyphicon glyphicon-busta
glyphicon glyphicon-pencil
glyphicon glyphicon-vetru
glyphicon glyphicon-musica
glyphicon glyphicon-cerca
glyphicon glyphicon-core
glyphicon glyphicon-stella
glyphicon glyphicon-star-vicu
glyphicon glyphicon-utilizatori
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-eliminà
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signale
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-casa
glyphicon glyphicon-file
glyphicon glyphicon-tempu
glyphicon glyphicon-strada
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-ripetizione
glyphicon glyphicon-rinfrescà
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-bandiera
glyphicon glyphicon-cuffie
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-codice a barre
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-libru
glyphicon glyphicon-marcatore
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-grass
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-aghjustà
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-verificà
glyphicon glyphicon-move
glyphicon glyphicon-passu-in daretu
glyphicon glyphicon-fast-backward
glyphicon glyphicon-backward
glyphicon glyphicon-play
glyphicon glyphicon-pausa
glyphicon glyphicon-stop
glyphicon glyphicon-avanti
glyphicon glyphicon-fast-forward
glyphicon glyphicon-passu-avanti
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-elimina-segnu
glyphicon glyphicon-ok-sign
glyphicon glyphicon-question-sign
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-elimina-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-segnu-esclamazione
glyphicon glyphicon-rigalu
glyphicon glyphicon-foglia
glyphicon glyphicon-focu
glyphicon glyphicon-ochju-apertu
glyphicon glyphicon-ochju-chjusu
glyphicon glyphicon-segnu-avvertimentu
glyphicon glyphicon-pianu
glyphicon glyphicon-calendaru
glyphicon glyphicon-casuali
glyphicon glyphicon-cumentu
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-carru da compra
glyphicon glyphicon-folder-close
glyphicon glyphicon-cartulari-apertu
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-campana
glyphicon glyphicon-certificatu
glyphicon glyphicon-pollice in su
glyphicon glyphicon-pollice in giù
glyphicon glyphicon-manu-diritta
glyphicon glyphicon-manu-manu
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-globu
glyphicon glyphicon-chiave
glyphicon glyphicon-tasks
glyphicon glyphicon-filtru
glyphicon glyphicon-valigetta
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-graffetta
glyphicon glyphicon-coeur-vidente
glyphicon glyphicon-link
glyphicon glyphicon-telefonu
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-per-alfabetu
glyphicon glyphicon-sort-per-alfabetu-alt
glyphicon glyphicon-ordina-per-ordine
glyphicon glyphicon-sort-per-ordine-alt
glyphicon glyphicon-sort-per-attributi
glyphicon glyphicon-sort-per-attributi-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-nova-finestra
glyphicon glyphicon-record
glyphicon glyphicon-salvà
glyphicon glyphicon-apertu
glyphicon glyphicon-salvatu
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-invià
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-salvatu
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-salva
glyphicon glyphicon-floppy-open
glyphicon glyphicon-carta-creditu
glyphicon glyphicon-trasferimentu
glyphicon glyphicon-cutelleria
glyphicon glyphicon-header
glyphicon glyphicon-cumpressatu
glyphicon glyphicon-auriculare
glyphicon glyphicon-phone-alt
glyphicon glyphicon-torre
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-sottotitoli
glyphicon glyphicon-sonu-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-marca-registrazione
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-arbre-cunifera
glyphicon glyphicon-arburu-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-copia
glyphicon glyphicon-paste
glyphicon glyphicon-alerta
glyphicon glyphicon-equalizer
glyphicon glyphicon-rè
glyphicon glyphicon-regina
glyphicon glyphicon-peone
glyphicon glyphicon-vescu
glyphicon glyphicon-cavaliere
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tenda
glyphicon glyphicon-lavagna
glyphicon glyphicon-lettu
glyphicon glyphicon-apple
glyphicon glyphicon-cancellare
glyphicon glyphicon-clessidra
glyphicon glyphicon-lampada
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-forbici
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-scala
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ghiaccio-lecca-tastatu
glyphicon glyphicon-educazione
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modale-finestra
glyphicon glyphicon-oliu
glyphicon glyphicon-grain
glyphicon glyphicon-occhiali da sole
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangulu-destra
glyphicon glyphicon-triangulu-left
glyphicon glyphicon-triangulu-fondu
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Cumu aduprà

Per ragioni di rendiment, tutte l'icone necessitanu una classa di basa è una classa di icone individuali. Per aduprà, mette u codice seguente quasi in ogni locu. Assicuratevi di lascià un spaziu trà l'icona è u testu per un padding propiu.

Ùn mischjà micca cù altri cumpunenti

I classi di icone ùn ponu esse cumminati direttamente cù altri cumpunenti. Ùn deve esse usatu cù altre classi nantu à u stessu elementu. Invece, aghjunghje un nidificatu <span>è applicate e classi di icone à u <span>.

Solu per l'usu nantu à elementi vacanti

I classi di l'icona deve esse aduprate solu nantu à elementi chì ùn cuntenenu micca cuntenutu di testu è ùn anu micca elementi figlioli.

Cambia u locu di font di l'icona

Bootstrap assume chì i schedarii di fonti di l'icona seranu situati in u ../fonts/cartulare, relative à i schedari CSS compilati. Spostà o rinominà quelli fugliali di font significa aghjurnà u CSS in unu di trè modi:

Cambià @icon-font-pathe / o @icon-font-namevariàbili in i schedari source Less.
Aduprate l' opzione URL relative furnita da u compilatore Less.
Cambia i url()percorsi in u CSS compilatu.

Aduprate l'opzione più adatta à a vostra configurazione di sviluppu specifica.

Icone accessibili

E versioni muderne di tecnulugii d'assistenza annunceranu u cuntenutu generatu CSS, è ancu caratteri specifichi Unicode. Per evità l'output imprevisu è cunfusu in i lettori di schermu (in particulare quandu l'icone sò aduprate puramente per a decorazione), l'avemu oculate cù l' aria-hidden="true"attributu.

Sè vo aduprate una icona per trasmette u significatu (piuttostu chè solu cum'è un elementu decorativu), assicuratevi chì stu significatu hè ancu trasmessu à e tecnulugia assistive - per esempiu, include cuntenutu supplementu, visualmente oculatu cù a .sr-onlyclasse.

Sè vo site criendu cuntrolli senza altru testu (cum'è un <button>chì cuntene solu un icona), duvete sempre furnisce un cuntenutu alternativu per identificà u scopu di u cuntrollu, in modu chì hà sensu per l'utilizatori di tecnulugia assistive. In questu casu, pudete aghjunghje un aria-labelattributu nantu à u cuntrollu stessu.

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

Esempii

Aduprate in i buttoni, gruppi di buttone per una barra di strumenti, navigazione, o input di forma preposta.

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

Una icona utilizata in una alerta per trasmette chì hè un missaghju d'errore, cù un .sr-onlytestu supplementu per trasmette stu suggerimentu à l'utilizatori di tecnulugia assistive.

Inserite un indirizzu email validu

<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 toggleable per vede liste di ligami. Fattu interattivu cù u plugin JavaScript dropdown .

Esempiu

Imbulighjate u trigger di u menù dropdown è u menù dropdown in .dropdown, o un altru elementu chì dichjara position: relative;. Allora aghjunghje l'HTML di u 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 dropdown ponu esse cambiati per espansione in sopra (invece di downwards) aghjunghjendu .dropupà u 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>

Allineamentu

Per automaticamente, un menu dropdown hè automaticamente posizionatu 100% da a cima è longu à u latu manca di u so parente. Aghjunghjite .dropdown-menu-rightà .dropdown-menua destra allineate u menù a tendina.

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

Intestazioni

Aghjunghjite un intestazione per etichettate e sezioni di l'azzioni in qualsiasi menu a tendina.

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

Divisore

Aghjunghjite un divisore per separà una serie di ligami in un menu a tendina.

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

Elementi di menu disabilitati

Aghjunghjite .disabledà un <li>in u menù dropdown per disattivà u ligame.

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

Gruppu una seria di buttoni inseme nantu à una sola linea cù u gruppu di buttone. Aghjunghjite nantu à a radiu JavaScript opzionale è u cumpurtamentu di stile di checkbox cù u nostru plugin di buttoni .

Tooltips è popovers in gruppi di buttone necessitanu un paràmetru speciale

Quandu aduprate tooltips o popovers nantu à elementi in un .btn-group, vi tuccherà à specificà l'opzione container: 'body'per evità effetti collaterali indesiderati (cum'è l'elementu cresce più largu è / o perde i so anguli arrotondati quandu u tooltip o popover hè attivatu).

Assicurà curretta `role`è furnisce una etichetta

Per esse tecnulugii assistivi - cum'è i lettori di schermu - per trasmette chì una serie di buttoni hè raggruppata, un roleattributu appropritatu deve esse furnitu. Per i gruppi di buttone, questu seria role="group", mentre chì i toolbars duveranu avè un role="toolbar".

Una eccezzioni sò i gruppi chì cuntenenu solu un cuntrollu unicu (per esempiu, i gruppi di buttone ghjustificate cù <button>elementi) o un dropdown.

Inoltre, i gruppi è i toolbars anu da esse datu una etichetta esplicita, cum'è a maiò parte di e tecnulugii d'assistenza ùn anu micca annunziatu, malgradu a presenza di l' roleattributu currettu. In l'esempii furniti quì, usemu aria-label, ma alternative cum'è aria-labelledbyponu ancu esse usate.

Esempiu basicu

Avvolge una seria di buttoni cù .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>

Unisce seti di <div class="btn-group">in un <div class="btn-toolbar">per cumpunenti più cumplessi.

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

Misure

Invece di applicà classi di dimensionamentu di buttone à ogni buttone in un gruppu, aghjunghje solu .btn-group-*à ognunu .btn-group, cumpresu quandu anidificà parechji 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

Mettite un .btn-groupin un altru .btn-groupquandu vulete menu dropdown mischiati cù una seria di buttone.

<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

Fate chì un inseme di buttuni apparisce verticalmente in pila invece di orizontali. I menu dropdown di u buttone Split ùn sò micca supportati quì.

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

Gruppi di buttone ghjustificate

Fate un gruppu di buttoni stende à dimensioni uguali per spannà tutta a larghezza di u so parente. Funziona ancu cù menu dropdown di buttone in u gruppu di buttone.

Manipulazione di e fruntiere

A causa di l'HTML è CSS specifichi utilizati per ghjustificà i buttoni (vale à dì display: table-cell), i cunfini trà elli sò radduppiati. In i gruppi di buttone rigulari, margin-left: -1pxhè utilizatu per stack the frontiere invece di sguassà. Tuttavia, marginùn funziona micca cù display: table-cell. In u risultatu, secondu e vostre persunalizazioni à Bootstrap, pudete vulete sguassate o re-colore i cunfini.

IE8 è cunfini

Internet Explorer 8 ùn rende micca e fruntiere nantu à i buttoni in un gruppu di buttuni ghjustificate, ch'ella sia attivata <a>o <button>elementi. Per attruvà questu, imbulighjate ogni buttone in un altru .btn-group.

Vede #12476 per più infurmazione.

Cù `<a>`elementi

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

Manca Mediu Diritta

Manca Mediu

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

Ligami chì facenu cum'è buttoni

Se l' <a>elementi sò usati per agisce cum'è buttoni - attivazione di funziunalità in-pagina, invece di navigà à un altru documentu o sezione in a pagina attuale - anu da esse ancu datu un role="button".

Cù `<button>`elementi

Per utilizà gruppi di buttone ghjustificate cù <button>elementi, duvete imballà ogni buttone in un gruppu di buttone . A maiò parte di i navigatori ùn applicanu micca bè u nostru CSS per a ghjustificazione à l' <button>elementi, ma postu chì supportemu i dropdowns di buttone, pudemu travaglià intornu.

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

Aduprate qualsiasi buttone per attivà un menu a tendina mettendulu in un .btn-groupè furnisce u marcatu di menu propiu.

Dipendenza di plugin

I dropdown di i buttoni necessitanu chì u plugin dropdown sia inclusu in a vostra versione di Bootstrap.

Menu dropdown unicu buttone

Trasfurmà un buttone in un toggle dropdown cù alcuni cambiamenti di marcatura basi.

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

Dividete i menu a tendina di u buttone

In listessu modu, creanu dropdowns di u buttone split cù i stessi cambiamenti di marcatura, solu cù un buttone separatu.

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

Misure

I buttuni dropdowns funzionanu cù i buttoni di tutte e 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 dropup

Trigger menu a discesa sopra elementi aghjunghjendu .dropupà u 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>

Estende i cuntrolli di forma aghjunghjendu testu o buttone prima, dopu, o da i dui lati di qualsiasi testu basatu <input>. Aduprà .input-groupcù un .input-group-addono .input-group-btnper appiccicà o aghjunghje elementi à un unicu .form-control.

`<input>`Solu testuale

Evite l'usu di <select>elementi quì chì ùn ponu micca esse cumpletamente stilati in i navigatori WebKit.

Evite l'usu di <textarea>elementi quì chì u so rowsattributu ùn serà micca rispettatu in certi casi.

Tooltips è popovers in i gruppi di input necessitanu un paràmetru speciale

Quandu aduprate tooltips o popovers nantu à elementi in un .input-group, duverete specificà l'opzione container: 'body'per evità effetti collaterali indesiderati (cum'è l'elementu cresce più largu è / o perde i so anguli arrotondati quandu u tooltip o popover hè attivatu).

Ùn mischjà micca cù altri cumpunenti

Ùn mischjà micca gruppi di forma o classi di colonna di griglia direttamente cù gruppi di input. Invece, nidificate u gruppu di input in u gruppu di forma o l'elementu di griglia.

Aghjunghjite sempre etichette

I lettori di schermu avaranu prublemi cù i vostri formi se ùn include micca una etichetta per ogni input. Per questi gruppi di input, assicuratevi chì ogni etichetta supplementu o funziunalità hè trasmessa à e tecnulugia di assistenza.

A tecnica esatta per esse aduprata (elementi visibili <label>, <label>elementi oculati usendu a .sr-onlyclassa, o l'usu di l' attributu aria-label, aria-labelledby, aria-describedby, titleo placeholderattributu) è quale infurmazione supplementaria deve esse trasmessa varierà secondu u tipu esattu di widget di l'interfaccia chì implementate. L'esempii in questa sezione furniscenu uni pochi di approcci suggeriti, specifichi di casu.

Esempiu basicu

Pone un add-on o buttone à ogni latu di un input. Pudete ancu mette unu da i dui lati di un input.

Ùn supportemu micca più add-ons ( .input-group-addono .input-group-btn) in un solu latu.

Ùn sustenemu micca più cuntrolli di forma in un unicu gruppu 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>

Misure

Aghjunghjite e classi di dimensionamentu di forma relative à u .input-groupstessu è u cuntenutu in u ridimensionamentu automaticamente - ùn hè micca bisognu di ripetiri e classi di dimensioni di cuntrollu di forma nantu à ogni elementu.

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

Checkboxes è addons radio

Pone ogni casella di spunta o opzione di radiu in un addun di un gruppu di input invece di testu.

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

Addons di buttone

I buttoni in i gruppi di input sò un pocu diffirenti è necessitanu un livellu extra di nidificazione. Invece di .input-group-addon, vi tuccherà à aduprà .input-group-btnà imbottiture i buttoni. Questu hè necessariu per via di i stili di navigatore predeterminati chì ùn ponu esse rimpiazzati.

<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 cù menu dropdown

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

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

Pulsanti multipli

Mentre pudete avè solu un add-on per latu, pudete avè parechje buttoni in un unicu .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>

Navs dispunibuli in Bootstrap anu marcatu spartutu, cuminciendu cù a .navclassa di basa, è ancu i stati spartuti. Scambià e classi di modificatori per cambià trà ogni stile.

L'usu di navs per i pannelli di tabulazione richiede un plugin di tabulazione JavaScript

Per e tabulazioni cù zoni tabulabili, duvete aduprà u plugin JavaScript di tabulazione . U marcatu richiederà ancu attributi supplementari roleè ARIA - vede l' esempiu di marcatura di u plugin per più dettagli.

Fate i navigatori utilizati cum'è navigazione accessibile

Sè vo aduprate navs per furnisce una barra di navigazione, assicuratevi di aghjunghje un role="navigation"à u containeru parentale più logicu di u <ul>, o imbulighjate un <nav>elementu intornu à tutta a navigazione. Ùn aghjunghje micca u rolu à u <ul>stessu, postu chì questu impedirà di esse annunziatu cum'è una lista attuale da e tecnulugia assistive.

Tabs

Nota chì a .nav-tabsclassa richiede a .navclassa di basa.

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

Pilules

Pigliate u listessu HTML, ma utilizate .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>

Pills sò ancu stackable verticalmente. Basta aghjunghje .nav-stacked.

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

Justificatu

Fate facilmente tabulature o pillole larghezze uguali di u so parente à schermi più largu di 768px cù .nav-justified. Nant'à schermi più chjuchi, i ligami di navigazione sò impilati.

I ligami di navigazione navbar justificati ùn sò attualmente supportati.

Safari è responsive justified navs

Da a v9.1.2, Safari mostra un bug in u quale u ridimensionamentu di u vostru navigatore orizzontalmente provoca errori di rendering in u navigatore ghjustificatu chì sò sbulicati dopu à rinfriscà. Stu bug hè ancu mostratu in l' esempiu di navigazione justificata .

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

Ligami disattivati

Per qualsiasi cumpunente di navigazione (tabulazioni o pillole), aghjunghje .disabledper ligami grigi è senza effetti di hover .

A funziunalità di u ligame ùn hè micca affettata

Questa classa cambierà solu l' <a>aspettu, micca a so funziunalità. Aduprate JavaScript persunalizatu per disattivà i ligami quì.

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

Utilizà i dropdowns

Aghjunghjite menu dropdown cù un pocu HTML extra è u plugin JavaScript dropdowns .

Tabulazioni cù menu a tendina

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

Pills cù dropdowns

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

I Navbars sò meta cumpunenti responsivi chì servenu cum'è intestazioni di navigazione per a vostra applicazione o situ. Accumincianu colapsati (è sò toggleable) in vedute mobili è diventanu orizontali cum'è a larghezza di vista dispunibule aumenta.

I ligami di navigazione navbar justificati ùn sò attualmente supportati.

Contenutu soprappiù

Siccomu Bootstrap ùn cunnosci micca quantu spaziu u cuntenutu in a vostra barra di navigazione hà bisognu, pudete avè prublemi cù l'imballaggio di cuntenutu in una seconda fila. Per risolve questu, pudete:

Reduce a quantità o a larghezza di l'articuli di navigazione.
Oculta certi elementi di a barra di navigazione à certe dimensioni di schermu usendu classi di utilità responsive .
Cambia u puntu in quale a vostra barra di navigazione cambia trà u modu colapsatu è horizontale. Personalizà a @grid-float-breakpointvariabile o aghjunghje a vostra propria dumanda media.

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

Sustituisce a marca navbar cù a vostra propria maghjina scambiendu u testu per un <img>. Siccomu .navbar-brandhà u so propiu padding è altezza, pudete avè bisognu di annullà qualchì CSS secondu a vostra imagina.

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

Mettite u cuntenutu di a forma .navbar-formper un allinamentu verticale propiu è un cumpurtamentu colapsatu in finestre strette. Aduprate l'opzioni di allineamentu per decide induve si trova in u cuntenutu di a barra di navigazione.

Cum'è un capu, .navbar-formsparte assai di u so codice cù .form-inlinevia mixin. Certi cuntrolli di forma, cum'è i gruppi di input, ponu esse bisognu di larghezza fissa per esse apparsu bè in 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>

Aghjunghjite sempre etichette

I lettori di schermu avaranu prublemi cù i vostri formi se ùn include micca una etichetta per ogni input. Per queste forme inline, pudete ammuccià l'etichette cù a .sr-onlyclassa. Ci sò altri metudi alternativi di furnisce una etichetta per i tecnulugii assistivi, cum'è u aria-label, aria-labelledbyo titlel'attributu. Se nimu di questi ùn hè presente, i lettori di schermu ponu ricorrere à l'usu di l' placeholderattributu, se presente, ma nutate chì l'usu di placeholdercum'è un sustitutu per altri metudi di etichettatura ùn hè micca cunsigliatu.

Aghjunghjite a .navbar-btnclassa à l' <button>elementi chì ùn sò micca residenti in a <form>per centru verticalmente in a barra di navigazione.

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

Imbulighjate e stringhe di testu in un elementu cù .navbar-text, di solitu nantu à un <p>tag per u culore è u culore propiu.

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

Per e persone chì utilizanu ligami standard chì ùn sò micca in u cumpunente di navigazione regulare di a barra di navigazione, utilizate a .navbar-linkclassa per aghjunghje i culori adattati per l'opzioni di navigazione predefinita è inversa.

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

Align nav links, forme, buttoni, o testu, usendu .navbar-lefto .navbar-rightclassi di utilità. E duie classi aghjunghjenu un float CSS in a direzzione specifica. Per esempiu, per allineà i ligami di navigazione, mette in un separatu <ul>cù a classa di utilità rispettiva applicata.

Queste classi sò versioni mixin-ed di .pull-leftè .pull-right, ma sò svolte à e dumande di media per una gestione più faciule di cumpunenti di navbar in tutte e dimensioni di u dispositivu.

Aghjunghjite .navbar-fixed-topè include un .containero .container-fluidà centru è pad u cuntenutu di a barra di navigazione.

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

Imbottitura di u corpu hè necessariu

U navbar fissu sovrappone u vostru altru cuntenutu, salvu chì aghjunghje paddingà a cima di u <body>. Pruvate i vostri valori o utilizate u nostru frammentu sottu. Tip: Per automaticamente, a barra di navigazione hè alta 50px.

body { padding-top: 70px; }

Assicuratevi di include questu dopu à u core Bootstrap CSS.

Aghjunghjite .navbar-fixed-bottomè include un .containero .container-fluidà centru è pad u cuntenutu di a barra di navigazione.

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

Imbottitura di u corpu hè necessariu

U navbar fissu sovrappone u vostru altru cuntenutu, salvu chì aghjunghje paddingà u fondu di u <body>. Pruvate i vostri valori o utilizate u nostru frammentu sottu. Tip: Per automaticamente, a barra di navigazione hè alta 50px.

body { padding-bottom: 70px; }

Assicuratevi di include questu dopu à u core Bootstrap CSS.

Crea una navbar di larghezza completa chì scorri cù a pagina aghjunghjendu .navbar-static-topè include un .containero .container-fluidà centru è pad u cuntenutu di a barra di navigazione.

A cuntrariu di e .navbar-fixed-*classi, ùn avete micca bisognu di cambià alcuna padding in u body.

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

Mudificà l'aspettu di a barra di navigazione aghjunghjendu .navbar-inverse.

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

Breadcrumbs

Indicate a situazione di a pagina attuale in una ghjerarchia di navigazione.

I separatori sò aghjuntu automaticamente in CSS attraversu :beforeè content.

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

Paginazione

Fornite ligami di paginazione per u vostru situ o app cù u cumpunente di paginazione multi-pagina, o l' alternativa di paginazione più simplice .

Pagina predefinita

Semplice paginazione ispirata à Rdio, fantastica per app è risultati di ricerca. U grande bloccu hè difficiule di missu, facilmente scalabile, è furnisce grandi spazii 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>

L'etichettatura di u cumpunente di paginazione

U cumpunente di paginazione deve esse impannillatu in un <nav>elementu per identificà cum'è una seccione di navigazione à i lettori di schermu è altre tecnulugia assistive. Inoltre, cum'è una pagina hè prubabile di avè più di una sezione di navigazione di questu (cum'è a navigazione primaria in l'intestazione, o una navigazione laterale), hè cunsigliatu di furnisce un descriptive aria-labelper <nav>chì riflette u so scopu. Per esempiu, se u cumpunente di paginazione hè utilizatu per navigà trà un settore di risultati di ricerca, una etichetta adatta puderia esse aria-label="Search results pages".

Stati disattivati è attivi

I ligami sò persunalizabili per diverse circustanze. Aduprà .disabledper i ligami incliccabili è .activeper indicà a pagina attuale.

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

Hè ricumandemu di scambià l'ancore attive o disattivate per <span>, o omette l'ancora in u casu di e frecce precedente/successiva, per sguassà a funziunalità di clic, mantenendu i 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>

Misure

Vulete una paginazione più grande o più chjuca? Aggiungi .pagination-lgo .pagination-smper dimensioni supplementari.

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

paginar

Ligami rapidi precedenti è prossimi per implementazioni di paginazione simplici cù marcatura è stili di luce. Hè grande per i siti simplici cum'è i blog o riviste.

Esempiu predeterminatu

Per automaticamente, u pager centra i ligami.

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

Ligami allineati

In alternativa, pudete allineà ogni ligame à i 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>

Statu disattivatu opzionale

I ligami di pager utilizanu ancu a .disabledclassa di utilità generale da a paginazione.

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

Esempiu

Esempiu di rubrica Novu

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

Variazioni dispunibili

Aghjunghjite qualsiasi di e classi di modificatori quì sottu per cambià l'apparenza di una etichetta.

Default Primary Success Info Avvisu Periculu

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

Avete tunnellate di etichette?

I prublemi di rendering ponu esse quandu avete decine di etichette in linea in un containeru strettu, ognunu cuntene u so propiu inline-blockelementu (cum'è un icona). U modu intornu à questu hè a stallazione display: inline-block;. Per u cuntestu è un esempiu, vede #13219 .

Evidenziate facilmente l'articuli novi o micca letti aghjunghjendu un <span class="badge">ligame, navigatori Bootstrap, è più.

Inbox42

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

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

Auto colapsante

Quandu ùn ci sò micca articuli novi o micca letti, i badges colapsanu solu (via u :emptyselettore di CSS) sempre chì ùn ci sia micca cuntenutu.

Compatibilità cross-browser

I badges ùn si colapsanu micca in Internet Explorer 8 perchè ùn mancanu supportu per u :emptyselettore.

Adatta à i stati di navigazione attivi

Stili integrati sò inclusi per mette badge in stati attivi in navigazione di pill.

<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 cumpunente ligeru è flessibile chì pò opzionalmente estenderà tutta a vista per mostrà u cuntenutu chjave in u vostru situ.

Salute, mondu !

Questa hè una unità di eroe simplice, un cumpunente simplice in stile jumbotron per chjamà l'attenzione extra à u cuntenutu o l'infurmazioni presentati.

Sapè ne 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 fà u jumbotron a larghezza completa, è senza anguli arrotondati, mette fora di tutti i .containers è invece aghjunghje un .containerin.

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

Una cunchiglia simplice per un h1spaziu adattatu è segmentà e sezioni di cuntenutu in una pagina. Puderà utilizà l' elementu h1predeterminatu small, è ancu a maiò parte di l'altri cumpunenti (cù stili supplementari).

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

Estende u sistema di griglia di Bootstrap cù u cumpunente di miniatura per vede facilmente e griglie di immagini, video, testu è più.

Sè vo circate di presentazione Pinterest-like di miniature di varii altezza è / o larghezza, vi tuccherà à aduprà un plugin di terzu partitu cum'è Masonry , Isotope , o Salvattore .

Esempiu predeterminatu

Per automaticamente, e miniature di Bootstrap sò pensate per vede l'imaghjini ligati cù un marcatu minimu necessariu.

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

Cuntinutu persunalizatu

Cù un pocu di marcatura extra, hè pussibule aghjunghje ogni tipu di cuntenutu HTML cum'è intestazioni, paragrafi, o buttoni in 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>

Fornite missaghji di feedback contextuale per l'azzioni tipici di l'utilizatori cù una mansa di messagi d'alerta dispunibili è flessibili.

Esempii

Imbulighjate ogni testu è un buttone di scartà facultativu in .alertuna di e quattru classi contextuale (per esempiu, .alert-success) per i missaghji d'alerta basi.

Nisuna classe predeterminata

L'alerte ùn anu micca classi predeterminate, solu classi di basa è modificatori. Una alerta grigia predeterminata ùn hà micca troppu sensu, cusì hè necessariu di specificà un tipu via classa contestuale. Sceglite da successu, infurmazione, avvirtimentu o periculu.

Bè fatta! Avete lettu bè stu missaghju d'alerta impurtante.

A testa alta ! Questa alerta hà bisognu di a vostra attenzione, ma ùn hè micca super impurtante.

Attenzione ! Hè megliu verificà sè stessu, ùn site micca troppu bellu.

Oh snap! Cambia uni pochi di cose è pruvate à mandà di novu.

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

Alerte dismissibile

Custruite nantu à qualsiasi alerta aghjunghjendu un .alert-dismissiblebuttone opzionale è chjusu.

Richiede un plugin d'alerta JavaScript

Per un funziunamentu cumpletu, alerti dismissibile, duvete aduprà u plugin JavaScript alerts .

Attenzione ! Hè megliu verificà sè stessu, ùn site micca troppu bellu.

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

Assicurà un cumpurtamentu propiu in tutti i dispositi

Assicuratevi di utilizà l' <button>elementu cù l' data-dismiss="alert"attributu di dati.

Ligami in avvisi

Aduprate a .alert-linkclassa di utilità per furnisce rapidamente ligami culurati currispondenti in ogni alerta.

Bè fatta! Avete lettu cù successu stu missaghju d'alerta impurtante .

A testa alta ! Questa alerta hà bisognu di a vostra attenzione , ma ùn hè micca super impurtante.

Attenzione ! Hè megliu cuntrolla sè stessu, ùn site micca troppu bellu .

Oh snap! Cambia uni pochi di cose è pruvate à mandà di novu.

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

Fornite un feedback aghjurnatu nantu à u prugressu di un flussu di travagliu o azzione cù barre di prugressu simplici ma flessibili.

Compatibilità cross-browser

I bars di prugressu utilizanu transizioni CSS3 è animazioni per ottene alcuni di i so effetti. Queste funzioni ùn sò micca supportate in Internet Explorer 9 è sottu o versioni più vechje di Firefox. Opera 12 ùn sustene micca animazioni.

Cumpatibilità di a pulitica di sicurezza di cuntenutu (CSP).

Se u vostru situ web hà una Pulitica di Sicurezza di u Contenutu (CSP) chì ùn permette micca style-src 'unsafe-inline', allora ùn puderete micca aduprà styleattributi inline per stabilisce l'larghezza di a barra di prugressu cum'è mostratu in i nostri esempi sottu. I metudi alternattivi per stabilisce l'larghezza chì sò cumpatibili cù CSP stretti includenu l'usu di un pocu JavaScript persunalizatu (chì stabilisce element.style.width) o l'usu di classi CSS persunalizati.

Esempiu basicu

Barra di prugressu predeterminata.

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

Cù etichetta

Eliminate a classe <span>cù .sr-onlyda a barra di prugressu per vede un percentualità 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 assicurà chì u testu di l'etichetta resta leggibile ancu per percentuali bassi, cunzidira l'aghjunghje un min-widthà a barra di prugressu.

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 cuntestuali

I bars di prugressu utilizanu alcuni di u listessu buttone è classi d'alerta per stili coherenti.

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

Striped

Aduprà un gradiente per creà un effettu strisce. Ùn dispunibile in IE9 è sottu.

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

Animatu

Aghjunghjite .activeper .progress-bar-stripedanimate e strisce da diritta à manca. Ùn dispunibile in IE9 è sottu.

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

Impilati

Pone parechje barre in u stessu .progressper impilà.

<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 d'oggetti astratti per custruisce diversi tipi di cumpunenti (cum'è cumenti di blog, Tweets, etc.) chì presentanu una maghjina allinata à a manca o à a diritta cù u cuntenutu testuale.

Media predefinitu

U media predeterminatu mostra un oggettu media (imaghjini, video, audio) à a manca o à a diritta di un bloccu di cuntenutu.

Titulu media

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.

Titulu media

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.

Intestazione media nidificata

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.

Titulu media

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.

Titulu media

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.

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

I classi .pull-leftè .pull-rightancu esistenu è sò stati utilizati prima cum'è parte di u cumpunente di media, ma sò deprecated per quellu usu da v3.3.0. Sò apprussimatamente equivalenti à .media-leftè .media-right, salvu chì .media-rightdeve esse postu dopu à .media-bodyin l'html.

Allineamentu di i media

L'imaghjini o altri media ponu esse allinati in cima, media o fondu. U predefinitu hè allineatu in cima.

Media allineati in cima

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.

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

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.

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 allineatu in fondu

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.

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>

Lista di media

Cù un pocu di marcatura extra, pudete aduprà a lista media interna (utile per i fili di cumenti o liste d'articuli).

Titulu media

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.

Intestazione media nidificata
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.

Intestazione media nidificata
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.

Intestazione media nidificata
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">
    <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 lista sò un cumpunente flexibule è putente per vede micca solu listi simplici di elementi, ma cumplessi cù cuntenutu persunalizatu.

Esempiu basicu

U gruppu di lista più basica hè simplicemente una lista senza ordine cù elementi di lista, è e classi propiu. Custruite nantu à questu cù l'opzioni chì seguitanu, o u vostru propiu CSS cum'è necessariu.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum à l'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>

Badges

Aghjunghjite u cumpunente di badge à qualsiasi articulu di u gruppu di lista è serà automaticamente posizionatu à a diritta.

14Cras justo 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>

Articuli ligati

Linkificate l'articuli di u gruppu di lista utilizendu tag di ancoraggio invece di elementi di lista (chì significa ancu un genitore <div>invece di un <ul>). Ùn ci hè bisognu di genitori individuali intornu à ogni elementu.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum à l'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 di buttone

L'articuli di u gruppu di lista ponu esse buttoni invece di l'articuli di lista (chì significa ancu un genitore <div>invece di un <ul>). Ùn ci hè bisognu di genitori individuali intornu à ogni elementu. Ùn aduprate micca e .btnclassi standard quì.

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

Articuli disabilitati

Aghjunghjite .disabledà un .list-group-itemgrisgiu per vede disattivatu.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum à l'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 contestuale

Aduprate classi cuntestuali per stilà l'articuli di lista, predeterminati o ligati. Include ancu .activeu statu.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum à l'eros

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

Cuntinutu persunalizatu

Aghjunghjite quasi ogni HTML, ancu per i gruppi di lista ligata cum'è quellu sottu.

Lista di l'elementu di u gruppu

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

Lista di l'elementu di u gruppu

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

Lista di l'elementu di u gruppu

Donec id elit non mi porta gravida at eget metus. Mecenas 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 ùn hè micca sempre necessariu, qualchì volta avete bisognu di mette u vostru DOM in una casella. Per queste situazioni, pruvate u cumpunente di u pannellu.

Esempiu basicu

Per automaticamente, tuttu ciò chì .panelfaci hè di applicà qualchì bordu di basa è padding per cuntene qualchì cuntenutu.

Esempiu di pannellu basicu

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

Pannellu cù intestazione

Aghjunghjite facilmente un containeru di intestazione à u vostru pannellu cù .panel-heading. Pudete ancu include qualsiasi <h1>- <h6>cù una .panel-titleclassa per aghjunghje un intestazione pre-stile. Tuttavia, e dimensioni di font di <h1>- <h6>sò rimpiazzate da .panel-heading.

Per un culore di ligame propiu, assicuratevi di mette ligami in intestazioni in .panel-title.

Titre du panneau sans titre

U cuntenutu di u pannellu

Titulu di u panel

U cuntenutu di u pannellu

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

Pannellu cù footer

Imbulighjate i buttoni o u testu secundariu in .panel-footer. Nota chì i piè di pagina di u pannellu ùn eredite micca i culori è e fruntiere quandu utilizanu variazioni cuntestuali perchè ùn sò micca destinati à esse in u primu pianu.

U cuntenutu di u pannellu

Piè di pagina di u pannellu

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

Alternative cuntestuali

Cum'è l'altri cumpunenti, rende facilmente un pannellu più significativu à un cuntestu particulari aghjunghjendu qualsiasi classi di u statu contextuale.

Titulu di u panel

U cuntenutu di u pannellu

Titulu di u panel

U cuntenutu di u pannellu

Titulu di u panel

U cuntenutu di u pannellu

Titulu di u panel

U cuntenutu di u pannellu

Titulu di u panel

U cuntenutu di u pannellu

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

Cù tavule

Aghjunghjite qualsiasi senza cunfini .tablein un pannellu per un disignu senza saldatura. Se ci hè un .panel-body, aghjunghjemu un cunfini extra à a cima di a tavula per a separazione.

Intestazione di u pannellu

Qualchese cuntenutu di u pannellu predeterminatu quì. 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.

#	Nomu	Casata	Nome d'utilizatore
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
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 ùn ci hè micca un corpu di pannellu, u cumpunente si move da l'intestazione di u pannellu à a tavola senza interruzzione.

Intestazione di u pannellu

#	Nomu	Casata	Nome d'utilizatore
1	Marcu	Ottu	@mdo
2	Ghjacobbu	Thornton	@grassu
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>

Cù gruppi di lista

Includite facilmente gruppi di lista di larghezza completa in ogni pannellu.

Intestazione di u pannellu

Qualchese cuntenutu di u pannellu predeterminatu quì. 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 à l'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>

Permette à i navigatori di determinà e dimensioni di video o di diapositive basatu annantu à a larghezza di u so bloccu chì cuntene, creendu un rapportu intrinsicu chì scala currettamente in ogni dispositivu.

E regule sò direttamente applicate à <iframe>, <embed>, <video>, è <object>elementi; Opzionalmente, utilizate una classa di discendenza esplicita .embed-responsive-itemquandu vulete currisponde à u stilu per altri attributi.

Pro-Tip! Ùn avete micca bisognu di includà frameborder="0"in i vostri <iframe>s, cum'è avemu annullatu quellu per voi.

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

Default bè

Aduprate u pozzu cum'è un effettu simplice nantu à un elementu per dà un effettu inseritu.

Fighjate, sò in un pozzu !

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

Classi opzionali

Cuntrolla l'imbottitura è i cantoni arrotondati cù duie classi di modificatori opzionali.

Fighjate, sò in un grande pozzu !

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

Fighjate, sò in un picculu pozzu !

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

Cumpunenti

Glificoni

Glifi dispunibuli

Cumu aduprà

Ùn mischjà micca cù altri cumpunenti

Solu per l'usu nantu à elementi vacanti

Cambia u locu di font di l'icona

Icone accessibili

Esempii

Dropdowns

Esempiu

Allineamentu

Pò esse bisognu di pusizioni supplementari

Allineamentu .pull-rightobsoletu

Intestazioni

Divisore

Elementi di menu disabilitati

Gruppi di buttone

Tooltips è popovers in gruppi di buttone necessitanu un paràmetru speciale

Assicurà curretta roleè furnisce una etichetta

Esempiu basicu

Barra di strumenti di buttone

Misure

Nidificazione

Variazione verticale

Gruppi di buttone ghjustificate

Manipulazione di e fruntiere

IE8 è cunfini

Cù <a>elementi

Ligami chì facenu cum'è buttoni

Cù <button>elementi

Button dropdowns

Dipendenza di plugin

Menu dropdown unicu buttone

Dividete i menu a tendina di u buttone

Misure

Variazione dropup

Gruppi di input

<input>Solu testuale

Tooltips è popovers in i gruppi di input necessitanu un paràmetru speciale

Ùn mischjà micca cù altri cumpunenti

Aghjunghjite sempre etichette

Esempiu basicu

Misure

Checkboxes è addons radio

Addons di buttone

Pulsanti cù menu dropdown

Buttuni segmentati

Pulsanti multipli

Navs

L'usu di navs per i pannelli di tabulazione richiede un plugin di tabulazione JavaScript

Fate i navigatori utilizati cum'è navigazione accessibile

Tabs

Pilules

Justificatu

Safari è responsive justified navs

Ligami disattivati

A funziunalità di u ligame ùn hè micca affettata

Utilizà i dropdowns

Tabulazioni cù menu a tendina

Pills cù dropdowns

Navbar

Barra di navigazione predeterminata

Contenutu soprappiù

Richiede un plugin JavaScript

Cambia u puntu di rottura di a barra di navigazione mobile colapsata

Fate accessibile i navbars

Immagine di marca

Forme

Avvertenze di u dispositivu mobile

Aghjunghjite sempre etichette

Bottoni

Usu specificu di u cuntestu

Testu

Ligami non-nav

Allineamentu di cumpunenti

Allineamentu drittu parechje cumpunenti

Fissu in cima

Imbottitura di u corpu hè necessariu

Fissu à u fondu

Allineamentu `.pull-right`obsoletu

Assicurà curretta `role`è furnisce una etichetta

Cù `<a>`elementi

Cù `<button>`elementi

`<input>`Solu testuale

Stati disattivati è attivi