Cumpunenti
Più di una decina di cumpunenti riutilizzabili custruiti per furnisce iconografia, dropdowns, gruppi di input, navigazione, avvisi è assai di più.
Più di una decina di cumpunenti riutilizzabili custruiti per furnisce iconografia, dropdowns, gruppi di input, navigazione, avvisi è assai di più.
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.
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.
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>
.
I classi di l'icona deve esse aduprate solu nantu à elementi chì ùn cuntenenu micca cuntenutu di testu è ùn anu micca elementi figlioli.
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:
@icon-font-path
e / o @icon-font-name
variàbili in i schedari source Less.url()
percorsi in u CSS compilatu.Aduprate l'opzione più adatta à a vostra configurazione di sviluppu specifica.
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-only
classe.
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-label
attributu nantu à u cuntrollu stessu.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
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-only
testu 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>
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-menu
a destra allineate u menù a tendina.
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 overflow
proprietà o appariscenu fora di i limiti di u viewport. Affrontate questi prublemi nantu à u vostru propiu cumu si sviluppanu.
.pull-right
obsoletuA partire da v3.1.0, avemu deprecated .pull-right
in 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>
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 .
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).
role
è furnisce una etichettaPer esse tecnulugii assistivi - cum'è i lettori di schermu - per trasmette chì una serie di buttoni hè raggruppata, un role
attributu 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' role
attributu currettu. In l'esempii furniti quì, usemu aria-label
, ma alternative cum'è aria-labelledby
ponu ancu esse usate.
Avvolgi una seria di buttoni cù .btn
in .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Unisce seti di <div class="btn-group">
in un <div class="btn-toolbar">
per cumpunenti più cumplessi.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
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>
Mettite un .btn-group
in un altru .btn-group
quandu 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>
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>
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.
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: -1px
hè 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.
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>
elementiBasta avvolgere una serie di .btn
s in .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
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>
elementiPer utilizà gruppi di buttone ghjustificate cù <button>
elementi, duvete imballà ogni buttone in un gruppu di buttone . A maiò parte di i navigatori ùn applicanu micca bè u nostru CSS per a ghjustificazione à l' <button>
elementi, ma postu chì supportemu i dropdowns di buttone, pudemu travaglià intornu.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Aduprate qualsiasi buttone per attivà un menu a tendina mettendulu in un .btn-group
è furnisce u marcatu di menu propiu.
I dropdown di i buttoni necessitanu chì u plugin dropdown sia inclusu in a vostra versione di Bootstrap.
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>
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>
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>
Trigger menu a discesa sopra elementi aghjunghjendu .dropup
à u genitore.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Estende i cuntrolli di forma aghjunghjendu testu o buttone prima, dopu, o da i dui lati di qualsiasi testu basatu <input>
. Aduprà .input-group
cù un .input-group-addon
o .input-group-btn
per appiccicà o aghjunghje elementi à un unicu .form-control
.
<input>
Solu testualeEvite 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 rows
attributu ùn serà micca rispettatu in certi casi.
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 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.
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-only
classa, o l'usu di l' attributu aria-label
, aria-labelledby
, aria-describedby
, title
o placeholder
attributu) è 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.
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-addon
o .input-group-btn
) in un solu latu.
Ùn sustenemu micca più cuntrolli di forma in un unicu gruppu di input.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
Aghjunghjite e classi di dimensionamentu di forma relative à u .input-group
stessu è 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>
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 -->
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 -->
<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 -->
<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>
Mentre pudete avè solu un add-on per latu, pudete avè parechje buttoni in un unicu .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
Navs dispunibuli in Bootstrap anu marcatu spartutu, cuminciendu cù a .nav
classa di basa, è ancu i stati spartuti. Scambià e classi di modificatori per cambià trà ogni stile.
Nota chì a .nav-tabs
classa richiede a .nav
classa 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-pills
invece:
<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.
<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 .disabled
per ligami grigi è senza effetti di hover .
<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 .
<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>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
I Navbars sò meta cumpunenti responsivi chì servenu cum'è intestazioni di navigazione per a vostra applicazione o situ. Accumincianu colapsati (è sò toggleable) in vedute mobili è diventanu orizontali cum'è a larghezza di vista dispunibule aumenta.
I ligami di navigazione navbar justificati ùn sò attualmente supportati.
<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-brand
hà 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-form
per 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-form
sparte assai di u so codice cù .form-inline
via mixin. Certi cuntrolli di forma, cum'è i gruppi di input, ponu esse bisognu di larghezza fissa per esse apparsu bè in una barra di navigazione.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Aghjunghjite a .navbar-btn
classa à l' <button>
elementi chì ùn sò micca residenti in a <form>
per centru verticalmente in a barra di navigazione.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Imbulighjate e stringhe di testu in un elementu cù .navbar-text
, di solitu nantu à un <p>
tag per u culore è u culore propiu.
<p class="navbar-text">Signed in as Mark Otto</p>
Per e persone chì utilizanu ligami standard chì ùn sò micca in u cumpunente di navigazione regulare di a barra di navigazione, utilizate a .navbar-link
classa 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-left
o .navbar-right
classi di utilità. E duie classi aghjunghjenu un float CSS in a direzzione specifica. Per esempiu, per allineà i ligami di navigazione, mette in un separatu <ul>
cù a classa di utilità rispettiva applicata.
Queste classi sò versioni mixin-ed di .pull-left
è .pull-right
, ma sò svolte à e dumande di media per una gestione più faciule di cumpunenti di navbar in tutte e dimensioni di u dispositivu.
Aghjunghjite .navbar-fixed-top
è include un .container
o .container-fluid
à centru è pad u cuntenutu di a barra di navigazione.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Aghjunghjite .navbar-fixed-bottom
è include un .container
o .container-fluid
à centru è pad u cuntenutu di a barra di navigazione.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Crea una navbar di larghezza completa chì scorri cù a pagina aghjunghjendu .navbar-static-top
è include un .container
o .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>
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>
Fornite ligami di paginazione per u vostru situ o app cù u cumpunente di paginazione multi-pagina, o l' alternativa di paginazione più simplice .
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">«</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">»</span>
</a>
</li>
</ul>
</nav>
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-label
per <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"
.
I ligami sò persunalizabili per diverse circustanze. Aduprà .disabled
per i ligami incliccabili è .active
per indicà a pagina attuale.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</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">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Vulete una paginazione più grande o più chjuca? Aggiungi .pagination-lg
o .pagination-sm
per 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>
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.
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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
I ligami di pager utilizanu ancu a .disabled
classa di utilità generale da a paginazione.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Aghjunghjite qualsiasi di e classi di modificatori quì sottu per cambià l'apparenza di una etichetta.
<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>
I prublemi di rendering ponu esse quandu avete decine di etichette in linea in un containeru strettu, ognunu cuntene u so propiu inline-block
elementu (cum'è un icona). U modu intornu à questu hè a stallazione display: inline-block;
. Per u cuntestu è un esempiu, vede #13219 .
Evidenziate facilmente l'articuli novi o micca letti aghjunghjendu un <span class="badge">
ligame, navigatori Bootstrap, è più.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Quandu ùn ci sò micca articuli novi o micca letti, i badges colapsanu solu (via u :empty
selettore di CSS) sempre chì ùn ci sia micca cuntenutu.
I badges ùn si colapsanu micca in Internet Explorer 8 perchè ùn mancanu supportu per u :empty
selettore.
Stili integrati sò inclusi per mette badge in stati attivi in navigazione di pill.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
Un cumpunente ligeru è flessibile chì pò opzionalmente estenderà tutta a vista per mostrà u cuntenutu chjave in u vostru situ.
Questa hè una unità di eroe simplice, un cumpunente simplice in stile jumbotron per chjamà l'attenzione extra à u cuntenutu o l'infurmazioni presentati.
<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 .container
s è invece aghjunghje un .container
in.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Una cunchiglia simplice per un h1
spaziu adattatu è segmentà e sezioni di cuntenutu in una pagina. Puderà utilizà l' elementu h1
predeterminatu small
, è ancu a maiò parte di l'altri cumpunenti (cù stili supplementari).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Estende u sistema di griglia di Bootstrap cù u cumpunente di miniatura per vede facilmente e griglie di immagini, video, testu è più.
Sè vo circate di presentazione Pinterest-like di miniature di varii altezza è / o larghezza, vi tuccherà à aduprà un plugin di terzu partitu cum'è Masonry , Isotope , o Salvattore .
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>
Cù un pocu di marcatura extra, hè pussibule aghjunghje ogni tipu di cuntenutu HTML cum'è intestazioni, paragrafi, o buttoni in miniature.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
Fornite missaghji di feedback contextuale per l'azzioni tipici di l'utilizatori cù una mansa di messagi d'alerta dispunibili è flessibili.
Imbulighjate ogni testu è un buttone di scartà facultativu in .alert
una di e quattru classi contextuale (per esempiu, .alert-success
) per i missaghji d'alerta basi.
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>
Custruite nantu à qualsiasi alerta aghjunghjendu un .alert-dismissible
buttone opzionale è chjusu.
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">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Assicuratevi di utilizà l' <button>
elementu cù l' data-dismiss="alert"
attributu di dati.
Aduprate a .alert-link
classa 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>
Fornite un feedback aghjurnatu nantu à u prugressu di un flussu di travagliu o azzione cù barre di prugressu simplici ma flessibili.
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.
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à style
attributi 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.
Barra di prugressu predeterminata.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
Eliminate a classe <span>
cù .sr-only
da a barra di prugressu per vede un percentualità visibile.
<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.
<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>
E barre di prugressu utilizanu alcuni di u listessu buttone è classi d'alerta per stili coherenti.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Aduprà un gradiente per creà un effettu strisce. Ùn dispunibile in IE9 è sottu.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Aghjunghjite .active
à .progress-bar-striped
per animate e strisce da diritta à manca. Ùn dispunibile in IE9 è sottu.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
Pone parechje barre in u stessu .progress
per impilà.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Stili 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.
U media predeterminatu mostra un oggettu media (imaghjini, video, audio) à a manca o à a diritta di un bloccu di cuntenutu.
<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-right
ancu 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-right
deve esse postu dopu à .media-body
in l'html.
L'imaghjini o altri media ponu esse allinati in cima, media o fondu. U predefinitu hè allineatu 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.
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.
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>
Cù un pocu di marcatura extra, pudete aduprà a lista media interna (utile per i fili di cumenti o liste d'articuli).
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
I gruppi di lista sò un cumpunente flexibule è putente per vede micca solu listi simplici di elementi, ma cumplessi cù cuntenutu persunalizatu.
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.
<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>
Aghjunghjite u cumpunente di badge à qualsiasi articulu di u gruppu di lista è serà automaticamente posizionatu à a diritta.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
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>
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 .btn
classi 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>
Aghjunghjite .disabled
à un .list-group-item
grisgiu 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>
Aduprate classi cuntestuali per stilà l'articuli di lista, predeterminati o ligati. Include ancu .active
u statu.
<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>
Aghjunghjite quasi ogni HTML, ancu per i gruppi di lista ligata cum'è quellu sottu.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
Mentre ùn hè micca sempre necessariu, qualchì volta avete bisognu di mette u vostru DOM in una casella. Per queste situazioni, pruvate u cumpunente di u pannellu.
Per automaticamente, tuttu ciò chì .panel
faci hè di applicà qualchì bordu di basa è padding per cuntene qualchì cuntenutu.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Aghjunghjite facilmente un containeru di intestazione à u vostru pannellu cù .panel-heading
. Pudete ancu include qualsiasi <h1>
- <h6>
cù una .panel-title
classa 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
.
<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.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Cum'è l'altri cumpunenti, rende facilmente un pannellu più significativu à un cuntestu particulari aghjunghjendu qualsiasi classi di u statu contextuale.
<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>
Aghjunghjite qualsiasi senza cunfini .table
in 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.
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 |
<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.
# | Nomu | Casata | Nome d'utilizatore |
---|---|---|---|
1 | Marcu | Ottu | @mdo |
2 | Ghjacobbu | Thornton | @grassu |
3 | Larry | l'uccello |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Includite facilmente gruppi di lista di larghezza completa in ogni 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.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Permette à i navigatori di determinà e dimensioni di video o di diapositive basatu annantu à a larghezza di u so bloccu chì cuntene, creendu un rapportu intrinsicu chì scala currettamente in ogni dispositivu.
E regule sò direttamente applicate à <iframe>
, <embed>
, <video>
, è <object>
elementi; Opzionalmente, utilizate una classa di discendenza esplicita .embed-responsive-item
quandu 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>
Aduprate u pozzu cum'è un effettu simplice nantu à un elementu per dà un effettu inseritu.
<div class="well">...</div>
Cuntrolla l'imbottitura è i cantoni arrotondati cù duie classi di modificatori opzionali.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>