Più di una decina di cumpunenti riutilizzabili custruiti per furnisce iconografia, dropdowns, gruppi di input, navigazione, avvisi è assai di più.
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 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.
Esempii
Aduprate in i buttoni, gruppi di buttone per una barra di strumenti, navigazione, o input di forma preposta.
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.
Errore:Inserite un indirizzu email validu
Dropdowns
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.
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.
Intestazioni
Aghjunghjite un intestazione per etichettate e sezioni di l'azzioni in qualsiasi menu a tendina.
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 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.
Barra di strumenti di buttone
Unisce seti di <div class="btn-group">in un <div class="btn-toolbar">per cumpunenti più cumplessi.
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.
Nidificazione
Mettite un .btn-groupin un altru .btn-groupquandu vulete menu dropdown mischiati cù una seria di buttone.
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.
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.
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.
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.
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.
Checkboxes è addons radio
Pone ogni casella di spunta o opzione di radiu in un addun di un gruppu di input invece di testu.
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.
Pulsanti cù menu dropdown
Buttuni segmentati
Pulsanti multipli
Mentre pudete avè solu un add-on per latu, pudete avè parechje buttoni in un unicu .input-group-btn.
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.
Tabs
Nota chì a .nav-tabsclassa richiede a .navclassa di basa.
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 .
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:
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.
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.
Immagine di marca
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.
Forme
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.
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.
Bottoni
Aghjunghjite a .navbar-btnclassa à l' <button>elementi chì ùn sò micca residenti in a <form>per centru verticalmente in a barra di navigazione.
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.
Testu
Imbulighjate e stringhe di testu in un elementu cù .navbar-text, di solitu nantu à un <p>tag per u culore è u culore propiu.
Ligami non-nav
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.
Allineamentu di cumpunenti
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.
Fissu in cima
Aghjunghjite .navbar-fixed-topè include un .containero .container-fluidà centru è pad u cuntenutu di a barra di navigazione.
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.
Assicuratevi di include questu dopu à u core Bootstrap CSS.
Fissu in fondu
Aghjunghjite .navbar-fixed-bottomè include un .containero .container-fluidà centru è pad u cuntenutu di a barra di navigazione.
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.
Assicuratevi di include questu dopu à u core Bootstrap CSS.
Top staticu
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.
Navbar invertitu
Mudificà l'aspettu di a barra di navigazione aghjunghjendu .navbar-inverse.
Pane grattugiatu
Indicate u locu di a pagina attuale in una ghjerarchia di navigazione.
I separatori sò aghjuntu automaticamente in CSS attraversu :beforeè content.
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.
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.
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.
Misure
Vulete una paginazione più grande o più chjuca? Aggiungi .pagination-lgo .pagination-smper dimensioni supplementari.
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.
Ligami allineati
In alternativa, pudete allineà ogni ligame à i lati:
Statu disattivatu opzionale
I ligami di pager utilizanu ancu a .disabledclassa di utilità generale da a paginazione.
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
Variazioni dispunibili
Aghjunghjite qualsiasi di e classi di modificatori quì sottu per cambià l'apparenza di una etichetta.
Default Primary Success Info Avvisu Periculu
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ù.
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.
Per fà u jumbotron a larghezza completa, è senza anguli arrotondati, mette fora di tutti i .containers è invece aghjunghje un .containerin.
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).
Esempiu di l'intestazione di a pagina Subtext per l'intestazione
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.
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.
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.
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.
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.
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
Cù etichetta
Eliminate a classe <span>cù .sr-onlyda a barra di prugressu per vede un percentualità visibile.
60%
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%
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)
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)
Animatu
Aghjunghjite .activeà .progress-bar-stripedper animate e strisce da diritta à manca. Ùn dispunibile in IE9 è sottu.
45% cumpletu
Impilati
Pone parechje barre in u stessu .progressper impilà.
35% cumpletu (successu)
20% cumpletu (avvertimentu)
10% cumpletu (periculu)
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.
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.
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.
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
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
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.
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ì.
Articuli disabilitati
Aghjunghjite .disabledà un .list-group-itemgrisgiu per vede disattivatu.
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
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
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
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
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
Se ùn ci hè micca un corpu di pannellu, u cumpunente si move da l'intestazione di u pannellu à a tavola senza interruzzione.
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
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.
Wells
Default bè
Aduprate u pozzu cum'è un effettu simplice nantu à un elementu per dà un effettu inseritu.
Fighjate, sò in un pozzu !
Classi opzionali
Cuntrolla l'imbottitura è i cantoni arrotondati cù duie classi di modificatori opzionali.