Glificoni

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 d'icona individuale. 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 evitari un output imprevisu è cunfusu in i lettori di schermu (in particulare quandu l'icone sò aduprate solu per a decorazione), l'ammucciamu cù l' aria-hidden="true"attributu.

Sè vo aduprate un 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.

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

Dropdowns

Menu contestuale toggleable per vede liste di ligami. Fattu interattivu cù u plugin JavaScript dropdown .

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>

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.

Pò esse bisognu di pusizioni supplementari

I dropdowns sò automaticamente posizionati via CSS in u flussu normale di u documentu. Questu significa chì i dropdowns ponu esse tagliati da i genitori cù certe overflowproprietà o appariscenu fora di i limiti di u viewport. Affrontate questi prublemi nantu à u vostru propiu cumu si sviluppanu.

Allineamentu .pull-rightobsoletu

A partire da v3.1.0, avemu deprecated .pull-rightin menu drop-down. Per allineà a destra un menu, utilizate .dropdown-menu-right. I cumpunenti di navigazione allineati à destra in a barra di navigazione utilizanu una versione mixin di sta classa per allineà automaticamente u menu. Per annullà, utilizate .dropdown-menu-left.

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

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>

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>

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>

Gruppi di buttone

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<button>elementi) o un dropdown.

Inoltre, i gruppi è i toolbars deve 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

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

Barra di strumenti di buttone

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.

<a>elementi

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

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

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

Button dropdowns

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>

Gruppi di input

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.

Sempre aghjunghje 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.

@

@example.com

$ .00

https://example.com/users/
<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 - senza 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

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 a 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, perchè questu impedirà di esse annunziatu cum'è una lista attuale da e tecnulugia assistive.

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>

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>

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>

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>

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>

Navbar

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

  1. Reduce a quantità o a larghezza di l'articuli di navigazione.
  2. Oculta certi elementi di a barra di navigazione à certe dimensioni di schermu usendu classi di utilità responsive .
  3. 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.

Richiede un plugin JavaScript

Se JavaScript hè disattivatu è a vista hè abbastanza stretta chì a barra di navigazione si colapsà, serà impussibile di espansione a barra di navigazione è vede u cuntenutu in u .navbar-collapse.

A navbar responsiva richiede chì u plugin di colapsu sia inclusu in a vostra versione di Bootstrap.

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

A navbar collapses in a so vista mobile verticale quandu u viewport hè più strettu di @grid-float-breakpoint, è si espande in a so vista horizontale non mobile quandu u viewport hè almenu @grid-float-breakpointin larghezza. Aghjustate sta variàbile in a Meno fonte per cuntrullà quandu a navbar collapses / expands. U valore predeterminatu hè 768px(a più chjuca schermu "picculu" o "tablet").

Fate accessibile i navbars

Assicuratevi di utilizà un <nav>elementu o, se aduprate un elementu più genericu cum'è un <div>, aghjunghje un role="navigation"à ogni navbar per identificà esplicitamente cum'è una regione di riferimentu per l'utilizatori di tecnulugii assistivi.

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

Avvertenze di u dispositivu mobile

Ci sò alcune avvertenze in quantu à l'usu di cuntrolli di forma in elementi fissi in i dispositi mobili. Vede i nostri documenti di supportu di navigatore per i dettagli.

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

Usu specificu di u cuntestu

Cum'è e classi di buttone standard , .navbar-btnponu esse aduprati nantu à <a>è <input>elementi. Tuttavia, nè .navbar-btne classi di buttone standard ùn devenu esse aduprate nantu à <a>elementi in .navbar-nav.

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 predeterminata è 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.

Allineamentu drittu parechje cumpunenti

I Navbars anu attualmente una limitazione cù parechje .navbar-rightclassi. Per u spaziu propiu di u cuntenutu, usemu un margine negativu nantu à l'ultimu .navbar-rightelementu. Quandu ci sò parechje elementi chì utilizanu quella classa, sti margini ùn funzionanu micca cum'è previstu.

Rivisiteremu questu quandu pudemu riscrive quellu cumpunente in v4.

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>

Pane grattugiatu

Indicate u locu 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 inspirata da 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 tale sezione di navigazione dighjà (cum'è a navigazione primaria in l'intestazione, o una navigazione laterale), hè cunsigliu di furnisce un descrittivu 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>

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>

Etichette

Esempiu

Esempiu di rubrica Novu

Esempiu di rubrica Novu

Esempiu di rubrica Novu

Esempiu di rubrica Novu

Esempiu di rubrica Novu
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 .

Badges

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>

Jumbotron

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>

Intestazione di a pagina

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>

Miniatures

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 mostrà 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.

100% x 200

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

100% x 200

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

100% x 200

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>

Alerts

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.

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

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

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

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

Barra di prugressu

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 Politica 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'è mostra in i nostri esempi sottu. I metudi alternativi 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.

60% cumpletu
<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>.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

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

40% cumpletu (successu)
20% cumpletu
60% cumpletu (avvertimentu)
80% cumpletu (periculu)
<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.

40% cumpletu (successu)
20% cumpletu
60% cumpletu (avvertimentu)
80% cumpletu (periculu)
<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 .activeà .progress-bar-stripedper animate e strisce da diritta à manca. Ùn dispunibile in IE9 è sottu.

45% cumpletu
<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à.

35% cumpletu (successu)
20% cumpletu (avvertimentu)
10% cumpletu (periculu)
<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>

Ughjettu media

Stili di oggetti astratti per custruisce diversi tipi di cumpunenti (cum'è cumenti di blog, Tweets, etc.) chì presentanu una maghjina allineata à sinistra o à destra 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 allinati 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>

Lista di gruppu

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.

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

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

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

Pannelli

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

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

Incrussione responsive

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>

Wells

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>