Components
Més d'una dotzena de components reutilitzables creats per proporcionar iconografia, menús desplegables, grups d'entrada, navegació, alertes i molt més.
Més d'una dotzena de components reutilitzables creats per proporcionar iconografia, menús desplegables, grups d'entrada, navegació, alertes i molt més.
Inclou més de 250 glifos en format de lletra del conjunt Glyphicon Halflings. Els glyphicons Halflings normalment no estan disponibles de forma gratuïta, però el seu creador els ha fet disponibles per a Bootstrap de manera gratuïta. Com a agraïment, només us demanem que inclogueu un enllaç a Glyphicons sempre que sigui possible.
Per raons de rendiment, totes les icones requereixen una classe base i una classe d'icones individuals. Per utilitzar-lo, col·loqueu el codi següent gairebé a qualsevol lloc. Assegureu-vos de deixar un espai entre la icona i el text per a un farciment adequat.
Les classes d'icones no es poden combinar directament amb altres components. No s'han d'utilitzar juntament amb altres classes en el mateix element. En comptes d'això, afegiu un imbricat <span>
i apliqueu les classes d'icones al fitxer <span>
.
Les classes d'icones només s'han d'utilitzar en elements que no contenen contingut de text i no tenen elements secundaris.
Bootstrap suposa que els fitxers de tipus de lletra d'icones es trobaran al ../fonts/
directori, en relació amb els fitxers CSS compilats. Moure o canviar el nom d'aquests fitxers de tipus de lletra significa actualitzar el CSS d'una d'aquestes tres maneres:
@icon-font-path
i/o @icon-font-name
als fitxers font Less.url()
camins al CSS compilat.Utilitzeu l'opció que millor s'adapti a la vostra configuració de desenvolupament específica.
Les versions modernes de les tecnologies d'assistència anunciaran contingut generat en CSS, així com caràcters Unicode específics. Per evitar sortides no desitjades i confuses als lectors de pantalla (sobretot quan les icones s'utilitzen exclusivament per a la decoració), les amaguem amb l' aria-hidden="true"
atribut.
Si utilitzeu una icona per transmetre significat (en lloc de només com a element decoratiu), assegureu-vos que aquest significat també es transmeti a les tecnologies d'assistència; per exemple, incloeu contingut addicional, ocult visualment amb la .sr-only
classe.
Si esteu creant controls sense cap altre text (com ara un <button>
que només conté una icona), sempre hauríeu de proporcionar contingut alternatiu per identificar la finalitat del control, de manera que tingui sentit per als usuaris de tecnologies d'assistència. En aquest cas, podeu afegir un aria-label
atribut al propi control.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Utilitzeu-los en botons, grups de botons per a una barra d'eines, navegació o entrades de formularis afegides.
<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 que s'utilitza en una alerta per transmetre que es tracta d'un missatge d'error, amb .sr-only
text addicional per transmetre aquesta pista als usuaris de tecnologies d'assistència.
<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>
Menú contextual commutable per mostrar llistes d'enllaços. S'ha fet interactiu amb el connector de JavaScript desplegable .
Emboliqui l'activador del menú desplegable i el menú desplegable dins .dropdown
, o un altre element que declari position: relative;
. A continuació, afegiu l'HTML del menú.
<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>
Els menús desplegables es poden canviar per expandir-se cap amunt (en lloc de cap avall) afegint .dropup
-los al pare.
<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 defecte, un menú desplegable es col·loca automàticament al 100% des de la part superior i al costat esquerre del seu pare. Afegeix .dropdown-menu-right
a una .dropdown-menu
alineació a la dreta del menú desplegable.
Els desplegables es col·loquen automàticament mitjançant CSS dins del flux normal del document. Això significa que els pares poden retallar els menús desplegables amb determinades overflow
propietats o aparèixer fora dels límits de la finestra gràfica. Abordeu aquests problemes pel vostre compte a mesura que sorgeixin.
.pull-right
Alineació obsoletaA partir de la v3.1.0, hem obsolet .pull-right
els menús desplegables. Per alinear un menú a la dreta, utilitzeu .dropdown-menu-right
. Els components de navegació alineats a la dreta de la barra de navegació utilitzen una versió mixin d'aquesta classe per alinear automàticament el menú. Per anul·lar-lo, utilitzeu .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Afegiu una capçalera per etiquetar seccions d'accions a qualsevol menú desplegable.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Afegiu un divisor per separar sèries d'enllaços en un menú desplegable.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Afegiu .disabled
- <li>
lo al menú desplegable per desactivar l'enllaç.
<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>
Agrupeu una sèrie de botons en una única línia amb el grup de botons. Afegiu una ràdio de JavaScript opcional i un comportament d'estil de casella de selecció amb el nostre connector de botons .
Quan utilitzeu informació sobre eines o popovers en elements dins d'un .btn-group
, haureu d'especificar l'opció container: 'body'
per evitar efectes secundaris no desitjats (com ara que l'element creixi més ample i/o perdi les seves cantonades arrodonides quan s'activa la informació emergent o la informació emergent).
role
i proporcioneu una etiquetaPerquè les tecnologies d'assistència, com ara els lectors de pantalla, transmetin que s'agrupen una sèrie de botons, role
cal proporcionar un atribut adequat. Per als grups de botons, això seria role="group"
, mentre que les barres d'eines haurien de tenir un role="toolbar"
.
Una excepció són els grups que només contenen un únic control (per exemple, els grups de botons justificats amb <button>
elements) o un menú desplegable.
A més, els grups i les barres d'eines haurien de tenir una etiqueta explícita, ja que la majoria de tecnologies d'assistència no els anunciaran, malgrat la presència de l' role
atribut correcte. En els exemples proporcionats aquí, fem servir , però també es poden utilitzar aria-label
alternatives com ara .aria-labelledby
Emboliqui una sèrie de botons amb .btn
en .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Combina conjunts de <div class="btn-group">
en un <div class="btn-toolbar">
per a components més complexos.
<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>
En lloc d'aplicar classes de mida de botons a tots els botons d'un grup, només cal que afegiu -los .btn-group-*
a cada .btn-group
, inclòs quan anideu diversos grups.
<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>
Col·loqueu un .btn-group
dins d'un altre .btn-group
quan vulgueu que els menús desplegables es barregin amb una sèrie de botons.
<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>
Feu que un conjunt de botons apareguin apilats verticalment en lloc de horitzontal. Els menús desplegables de botons dividits no s'admeten aquí.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Feu que un grup de botons estiri a mides iguals per abastar tota l'amplada del seu pare. També funciona amb menús desplegables de botons dins del grup de botons.
A causa de l'HTML i el CSS específics utilitzats per justificar els botons (és a dir display: table-cell
, ), les vores entre ells es doblan. En grups de botons normals, margin-left: -1px
s'utilitza per apilar les vores en lloc d'eliminar-les. Tanmateix, margin
no funciona amb display: table-cell
. Com a resultat, depenent de les vostres personalitzacions a Bootstrap, és possible que vulgueu eliminar o tornar a pintar les vores.
Internet Explorer 8 no representa les vores dels botons d'un grup de botons justificat, tant si està activat <a>
com en <button>
elements. Per evitar-ho, emboliqueu cada botó en un altre .btn-group
.
Vegeu #12476 per obtenir més informació.
<a>
elementsNomés cal embolicar una sèrie de .btn
s en .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Si els <a>
elements s'utilitzen per actuar com a botons, activant la funcionalitat a la pàgina, en lloc de navegar a un altre document o secció dins de la pàgina actual, també se'ls hauria de donar un role="button"
.
<button>
elementsPer utilitzar grups de botons justificats amb <button>
elements, heu d'embolicar cada botó en un grup de botons . La majoria dels navegadors no apliquen correctament el nostre CSS per a la justificació dels <button>
elements, però com que admetem menús desplegables de botons, podem solucionar-ho.
<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>
Utilitzeu qualsevol botó per activar un menú desplegable col·locant-lo dins d'un .btn-group
i proporcionant el marcatge de menú adequat.
Els menús desplegables de botons requereixen que el complement desplegable s'inclogui a la vostra versió de Bootstrap.
Converteix un botó en un menú desplegable amb alguns canvis bàsics de marcatge.
<!-- 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>
De la mateixa manera, creeu menús desplegables de botons dividits amb els mateixos canvis de marcatge, només amb un botó separat.
<!-- 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>
Els menús desplegables de botons funcionen amb botons de totes les mides.
<!-- 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>
Activa els menús desplegables per sobre dels elements afegint .dropup
-los al pare.
<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>
Amplieu els controls del formulari afegint text o botons abans, després o als dos costats de qualsevol <input>
. Utilitzeu -lo .input-group
amb .input-group-addon
o .input-group-btn
per anteposar o afegir elements a un únic .form-control
.
<input>
Només textualsEviteu utilitzar <select>
elements aquí, ja que no es poden dissenyar completament als navegadors WebKit.
Eviteu utilitzar <textarea>
elements aquí ja que el seu rows
atribut no es respectarà en alguns casos.
Quan utilitzeu informació sobre eines o popovers en elements dins d'un .input-group
, haureu d'especificar l'opció container: 'body'
per evitar efectes secundaris no desitjats (com ara que l'element s'ample i/o perd les seves cantonades arrodonides quan s'activa la informació emergent o la informació emergent).
No barregeu grups de formularis ni classes de columnes de graella directament amb grups d'entrada. En lloc d'això, niu el grup d'entrada dins del grup de formularis o de l'element relacionat amb la quadrícula.
Els lectors de pantalla tindran problemes amb els vostres formularis si no incloeu una etiqueta per a cada entrada. Per a aquests grups d'entrada, assegureu-vos que qualsevol etiqueta o funcionalitat addicional es transmeti a les tecnologies d'assistència.
La tècnica exacta que s'ha d'utilitzar ( <label>
elements visibles, <label>
elements ocults mitjançant la .sr-only
classe o ús de l' atribut aria-label
, aria-labelledby
, aria-describedby
, title
o placeholder
) i quina informació addicional caldrà transmetre variarà en funció del tipus exacte de giny d'interfície que esteu implementant. Els exemples d'aquesta secció proporcionen alguns enfocaments suggerits i específics per a casos.
Col·loqueu un complement o un botó a banda i banda d'una entrada. També podeu col·locar-ne un als dos costats d'una entrada.
No admetem diversos complements ( .input-group-addon
o .input-group-btn
) en un sol costat.
No admetem diversos controls de formulari en un sol grup d'entrada.
<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>
Afegiu les classes de mida del formulari relatives al .input-group
mateix i el contingut es canviarà automàticament, sense necessitat de repetir les classes de mida del control del formulari a cada element.
<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>
Col·loqueu qualsevol casella de selecció o opció de ràdio dins del complement d'un grup d'entrada en lloc de text.
<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 -->
Els botons dels grups d'entrada són una mica diferents i requereixen un nivell addicional d'imbricació. En lloc de .input-group-addon
, haureu d'utilitzar .input-group-btn
per embolicar els botons. Això és necessari a causa dels estils de navegador predeterminats que no es poden substituir.
<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>
Tot i que només podeu tenir un complement per costat, podeu tenir diversos botons dins d'un mateix .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>
Els navegadors disponibles a Bootstrap tenen un marcatge compartit, començant per la .nav
classe base, així com estats compartits. Canvia les classes modificadores per canviar entre cada estil.
Tingueu en compte que la .nav-tabs
classe requereix la .nav
classe base.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Agafeu el mateix HTML, però feu servir .nav-pills
:
<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>
Les píndoles també es poden apilar verticalment. Només afegir .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Feu que les pestanyes o les píndoles tinguin una amplada igual a la dels seus pares en pantalles de més de 768 píxels amb .nav-justified
. En pantalles més petites, els enllaços de navegació s'apilen.
Els enllaços de navegació de la barra de navegació justificats no s'admeten actualment.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Per a qualsevol component de navegació (pestanyes o píndoles), afegiu .disabled
- hi enllaços grisos i no hi hagi efectes de desplaçament .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Afegiu menús desplegables amb una mica d'HTML addicional i el complement de JavaScript dels desplegables .
<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>
Les barres de navegació són metacomponents sensibles que serveixen com a capçaleres de navegació per a la vostra aplicació o lloc. Comencen a replegar-se (i es poden alternar) a les visualitzacions mòbils i es tornen horitzontals a mesura que augmenta l'amplada de la finestra gràfica disponible.
Els enllaços de navegació de la barra de navegació justificats no s'admeten actualment.
<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>
Substituïu la marca de la barra de navegació per la vostra pròpia imatge canviant el text per un <img>
. Com que .navbar-brand
té el seu propi farciment i alçada, és possible que hàgiu de substituir alguns CSS en funció de la vostra imatge.
<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>
Col·loqueu el contingut del formulari dins .navbar-form
per obtenir una alineació vertical adequada i un comportament col·lapsat en finestres estretes. Utilitzeu les opcions d'alineació per decidir on es troba dins del contingut de la barra de navegació.
Com a avisos, .navbar-form
comparteix gran part del seu codi amb .form-inline
via mixin. Alguns controls de formulari, com els grups d'entrada, poden requerir que les amplades fixes es mostrin correctament dins d'una barra de navegació.
<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>
Afegiu la .navbar-btn
classe als <button>
elements que no resideixen en a <form>
per centrar-los verticalment a la barra de navegació.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Emboliqui les cadenes de text en un element amb .navbar-text
, normalment en una <p>
etiqueta per a l'interlineat i el color adequats.
<p class="navbar-text">Signed in as Mark Otto</p>
Per a les persones que utilitzin enllaços estàndard que no es troben dins del component de navegació normal de la barra de navegació, utilitzeu la .navbar-link
classe per afegir els colors adequats per a les opcions de la barra de navegació predeterminada i inversa.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Alineeu els enllaços de navegació, els formularis, els botons o el text mitjançant les classes d'utilitat .navbar-left
o . .navbar-right
Ambdues classes afegiran un CSS flotant en la direcció especificada. Per exemple, per alinear els enllaços de navegació, col·loqueu-los en un separat <ul>
amb la classe d'utilitat corresponent aplicada.
Aquestes classes són versions combinades de .pull-left
i .pull-right
, però s'adrecen a les consultes multimèdia per facilitar el maneig dels components de la barra de navegació en diferents mides de dispositiu.
Afegeix .navbar-fixed-top
i inclou un .container
o .container-fluid
al contingut de la barra de navegació al centre i al coixinet.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Afegeix .navbar-fixed-bottom
i inclou un .container
o .container-fluid
al contingut de la barra de navegació al centre i al coixinet.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Creeu una barra de navegació d'amplada completa que s'allunyi amb la pàgina afegint .navbar-static-top
i inclòs un .container
o .container-fluid
per al centre i el contingut de la barra de navegació.
A diferència de les .navbar-fixed-*
classes, no cal que canvieu cap farciment al fitxer body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Modifiqueu l'aspecte de la barra de navegació afegint .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Indiqueu la ubicació de la pàgina actual dins d'una jerarquia de navegació.
Els separadors s'afegeixen automàticament en CSS mitjançant :before
i content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Proporcioneu enllaços de paginació per al vostre lloc o aplicació amb el component de paginació de diverses pàgines o l' alternativa de paginació més senzilla .
Paginació senzilla inspirada en Rdio, ideal per a aplicacions i resultats de cerca. El bloc gran és difícil de perdre, fàcilment escalable i ofereix grans àrees de 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>
El component de paginació s'ha d'embolicar en un <nav>
element per identificar-lo com a secció de navegació per als lectors de pantalla i altres tecnologies d'assistència. A més, com que és probable que una pàgina ja tingui més d'una secció de navegació d'aquest tipus (com ara la navegació principal a la capçalera o una navegació a la barra lateral), és recomanable proporcionar un descriptiu aria-label
que <nav>
reflecteixi el seu propòsit. Per exemple, si el component de paginació s'utilitza per navegar entre un conjunt de resultats de cerca, una etiqueta adequada podria ser aria-label="Search results pages"
.
Els enllaços es poden personalitzar per a diferents circumstàncies. Utilitzeu .disabled
-los per als enllaços que no es poden fer clic i .active
per indicar la pàgina actual.
<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>
Us recomanem que canvieu les àncores actives o desactivades per <span>
, o que l'ometeu en el cas de les fletxes anteriors/següents, per eliminar la funcionalitat de clic tot conservant els estils previstos.
<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>
Vols una paginació més gran o més petita? Afegiu .pagination-lg
o .pagination-sm
per a mides addicionals.
<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>
Enllaços ràpids anteriors i següents per a implementacions de paginació senzilles amb marques i estils lleugers. És ideal per a llocs senzills com blocs o revistes.
Per defecte, el cercapersones centra els enllaços.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Alternativament, podeu alinear cada enllaç als costats:
<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>
Els enllaços de cercapersones també utilitzen la .disabled
classe d'utilitat general de la paginació.
<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>
Afegiu qualsevol de les classes modificadores esmentades a continuació per canviar l'aparença d'una etiqueta.
<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>
Els problemes de renderització poden sorgir quan teniu desenes d'etiquetes en línia dins d'un contenidor estret, cadascuna conté el seu propi inline-block
element (com una icona). El camí per evitar-ho és la configuració display: inline-block;
. Per obtenir un context i un exemple, vegeu #13219 .
Ressalteu fàcilment els elements nous o no llegits afegint un <span class="badge">
a enllaços, navegacions Bootstrap i molt més.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Quan no hi hagi elements nous o no llegits, les insígnies simplement es replegaran (mitjançant el :empty
selector de CSS) sempre que no hi hagi contingut.
Les insígnies no es col·lapsen automàticament a Internet Explorer 8 perquè no són compatibles amb el :empty
selector.
S'inclouen estils integrats per col·locar insígnies en estats actius a les navegacions de píndoles.
<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 component lleuger i flexible que, opcionalment, pot ampliar tota la finestra gràfica per mostrar el contingut clau del vostre lloc.
Es tracta d'una unitat d'heroi senzilla, un component senzill d'estil jumbotron per cridar l'atenció addicional sobre el contingut o la informació destacats.
<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 fer el jumbotron d'amplada completa i sense cantonades arrodonides, col·loqueu-lo fora de totes les .container
s i, en canvi, afegiu-hi un .container
dins.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Una intèrpret d'ordres senzilla per h1
espaiar i segmentar adequadament les seccions de contingut d'una pàgina. Pot utilitzar l' element h1
predeterminat de ' small
, així com la majoria dels altres components (amb estils addicionals).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Amplieu el sistema de quadrícula de Bootstrap amb el component de miniatures per mostrar fàcilment quadrícules d'imatges, vídeos, text i molt més.
Si busqueu una presentació semblant a Pinterest de miniatures de diferents alçades i/o amplades, haureu d'utilitzar un connector de tercers com ara Masonry , Isotope o Salvattore .
De manera predeterminada, les miniatures de Bootstrap estan dissenyades per mostrar imatges enllaçades amb un marcatge mínim necessari.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Amb una mica de marcatge addicional, és possible afegir qualsevol tipus de contingut HTML com encapçalaments, paràgrafs o botons a les miniatures.
<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>
Proporcioneu missatges de comentaris contextuals per a les accions típiques dels usuaris amb un grapat de missatges d'alerta disponibles i flexibles.
Embolcalla qualsevol text i un botó d'ignorar opcional .alert
i una de les quatre classes contextuals (p. ex., .alert-success
) per als missatges d'alerta bàsics.
Les alertes no tenen classes per defecte, només classes base i modificadora. Una alerta grisa predeterminada no té massa sentit, de manera que cal que especifiqueu un tipus mitjançant una classe contextual. Trieu entre èxit, informació, advertència o perill.
<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>
Creeu qualsevol alerta afegint un .alert-dismissible
botó opcional i de tancament.
Perquè les alertes descartables funcionin completament, heu d'utilitzar el connector JavaScript d'alertes .
<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>
Assegureu-vos d'utilitzar l' <button>
element amb l' data-dismiss="alert"
atribut de dades.
Utilitzeu la .alert-link
classe d'utilitat per proporcionar ràpidament enllaços de colors coincidents dins de qualsevol 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>
Proporcioneu comentaris actualitzats sobre el progrés d'un flux de treball o d'una acció amb barres de progrés senzilles però flexibles.
Les barres de progrés utilitzen transicions i animacions CSS3 per aconseguir alguns dels seus efectes. Aquestes funcions no s'admeten a Internet Explorer 9 i anteriors o versions anteriors de Firefox. Opera 12 no admet animacions.
Si el vostre lloc web té una política de seguretat de contingut (CSP) que no permet style-src 'unsafe-inline'
, no podreu utilitzar els style
atributs en línia per establir l'amplada de la barra de progrés tal com es mostra als nostres exemples següents. Els mètodes alternatius per establir les amplades que són compatibles amb CSP estrictes inclouen utilitzar una mica de JavaScript personalitzat (que estableix element.style.width
) o utilitzar classes CSS personalitzades.
Barra de progrés predeterminada.
<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>
Traieu la classe <span>
with .sr-only
de la barra de progrés per mostrar un percentatge visible.
<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 assegurar-vos que el text de l'etiqueta es manté llegible fins i tot en percentatges baixos, penseu a afegir una min-width
a la barra de progrés.
<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>
Les barres de progrés utilitzen alguns dels mateixos botons i classes d'alertes per a estils coherents.
<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>
Utilitza un degradat per crear un efecte ratllat. No disponible a IE9 i posteriors.
<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>
Afegeix .active
a .progress-bar-striped
per animar les ratlles de dreta a esquerra. No disponible a IE9 i posteriors.
<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>
Col·loqueu diverses barres a la mateixa .progress
per apilar-les.
<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>
Estils d'objectes abstractes per crear diversos tipus de components (com ara comentaris de bloc, tuits, etc.) que inclouen una imatge alineada a l'esquerra o a la dreta juntament amb el contingut textual.
El suport predeterminat mostra un objecte multimèdia (imatges, vídeo, àudio) a l'esquerra o a la dreta d'un bloc de contingut.
<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>
Les classes .pull-left
i .pull-right
també existeixen i s'utilitzaven anteriorment com a part del component multimèdia, però estan obsoletes per a aquest ús a partir de la v3.3.0. Són aproximadament equivalents a .media-left
i .media-right
, excepte que .media-right
s'han de col·locar després .media-body
de l'html.
Les imatges o altres mitjans es poden alinear a la part superior, mitjana o inferior. El valor predeterminat és alineat a la part superior.
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>
Amb una mica d'etiquetatge addicional, podeu utilitzar la llista de mitjans dins (útil per a fils de comentaris o llistes d'articles).
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>
Els grups de llistes són un component flexible i potent per mostrar no només llistes simples d'elements, sinó també complexes amb contingut personalitzat.
El grup de llista més bàsic és simplement una llista no ordenada amb elements de llista i les classes adequades. Construeix-hi amb les opcions que segueixen o amb el teu propi CSS segons sigui necessari.
<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>
Afegiu el component de les insígnies a qualsevol element del grup de llista i es col·locarà automàticament a la dreta.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Enllaceu els elements del grup de llista mitjançant etiquetes d'ancoratge en lloc d'elements de llista (això també significa un pare <div>
en lloc d'un <ul>
). No hi ha necessitat de pares individuals al voltant de cada element.
<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>
Els elements del grup de llista poden ser botons en lloc d'elements de llista (això també significa un pare <div>
en lloc d'un <ul>
). No hi ha necessitat de pares individuals al voltant de cada element. No utilitzeu les .btn
classes estàndard aquí.
<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>
Afegiu -lo .disabled
a a .list-group-item
per posar-lo en gris perquè aparegui desactivat.
<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>
Utilitzeu classes contextuals per estilitzar els elements de la llista, per defecte o enllaçats. També inclou .active
l'estat.
<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>
Afegiu gairebé qualsevol HTML dins, fins i tot per a grups de llistes enllaçades com el següent.
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>
Tot i que no sempre és necessari, de vegades cal posar el DOM en una caixa. En aquestes situacions, proveu el component del panell.
Per defecte, tot el .panel
que es fa és aplicar una vora bàsica i un farciment per contenir contingut.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Afegiu fàcilment un contenidor d'encapçalament al vostre tauler amb .panel-heading
. També podeu incloure qualsevol <h1>
- <h6>
amb una .panel-title
classe per afegir un encapçalament amb estil prèviament. Tanmateix, les mides de lletra de <h1>
- <h6>
se substitueixen per .panel-heading
.
Per pintar els enllaços correctament, assegureu-vos de col·locar els enllaços als encapçalaments dins de .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>
Embolica els botons o el text secundari en .panel-footer
. Tingueu en compte que els peus de pàgina del panell no hereten els colors i les vores quan s'utilitzen variacions contextuals, ja que no estan pensats per estar en primer pla.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Com altres components, podeu fer que un panell sigui més significatiu per a un context concret afegint qualsevol de les classes d'estat contextual.
<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>
Afegiu qualsevol no vorejat .table
dins d'un panell per obtenir un disseny perfecte. Si hi ha un .panel-body
, afegim una vora addicional a la part superior de la taula per a la separació.
Alguns continguts del panell predeterminats aquí. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pel·lentesc ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | Nom | Cognom | Nom d'usuari |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry | l'ocell |
<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>
Si no hi ha cap cos del panell, el component es mou de la capçalera del panell a la taula sense interrupció.
# | Nom | Cognom | Nom d'usuari |
---|---|---|---|
1 | senyal | Otto | @mdo |
2 | Jacob | Thornton | @greix |
3 | Larry | l'ocell |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Inclou fàcilment grups de llistes d'amplada completa dins de qualsevol tauler.
Alguns continguts del panell predeterminats aquí. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pel·lentesc 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>
Permet que els navegadors determinin les dimensions del vídeo o de la presentació de diapositives en funció de l'amplada del bloc que la conté creant una proporció intrínseca que s'ajusti correctament a qualsevol dispositiu.
Les regles s'apliquen directament a <iframe>
, <embed>
, <video>
i <object>
elements; Opcionalment, utilitzeu una classe descendent explícita .embed-responsive-item
quan vulgueu fer coincidir l'estil d'altres atributs.
Pro-Tip! No cal que l'inclogueu frameborder="0"
a les vostres <iframe>
s, ja que ho substituïm per a vosaltres.
<!-- 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>
Utilitzeu el pou com a simple efecte sobre un element per donar-li un efecte d'inserció.
<div class="well">...</div>
Control de farciment i cantonades arrodonides amb dues classes de modificadors opcionals.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>