Glificons

Glifs disponibles

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.

  • glyphicon glyphicon-asterisc
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-menys
  • glyphicon glyphicon-núvol
  • glyphicon glyphicon-sobre
  • glyphicon glyphicon-llapis
  • glyphicon glyphicon-vidre
  • glyphicon glyphicon-música
  • glyphicon glyphicon-cerca
  • glyphicon glyphicon-cor
  • glyphicon glyphicon-estrella
  • glyphicon glyphicon-estrella-buida
  • glyphicon glyphicon-usuari
  • glyphicon glyphicon-pel·lícula
  • glyphicon glyphicon-th-gran
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-eliminar
  • glyphicon glyphicon-apropar-se
  • glyphicon glyphicon-apropar-se
  • glyphicon glyphicon-off
  • glyphicon glyphicon-senyal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-escombraries
  • glyphicon glyphicon-home
  • glyphicon glyphicon-fitxer
  • glyphicon glyphicon-temps
  • glyphicon glyphicon-carretera
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-descàrrega
  • glyphicon glyphicon-càrrega
  • glyphicon glyphicon-safata d'entrada
  • glyphicon glyphicon-joc-cercle
  • glyphicon glyphicon-repetir
  • glyphicon glyphicon-refrescar
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-bandera
  • glyphicon glyphicon-auriculars
  • glyphicon glyphicon-volum apagat
  • glyphicon glyphicon-abaixar el volum
  • glyphicon glyphicon-augmentar el volum
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-codi de barres
  • glyphicon glyphicon-etiqueta
  • glyphicon glyphicon-etiquetes
  • glyphicon glyphicon-llibre
  • glyphicon glyphicon-marcador
  • glyphicon glyphicon-impressió
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-negreta
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-lista
  • glyphicon glyphicon-sagnia-esquerra
  • glyphicon glyphicon-sagnia-dreta
  • glyphicon glyphicon-facetime-vídeo
  • glyphicon glyphicon-foto
  • glyphicon glyphicon-mapa-marcador
  • glyphicon glyphicon-ajustar
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-editar
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-movir
  • glyphicon glyphicon-pas-enrere
  • glyphicon glyphicon-ràpid-enrere
  • glyphicon glyphicon-enrere
  • glyphicon glyphicon-joc
  • glyphicon glyphicon-pausa
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-endavant
  • glyphicon glyphicon-avançament ràpid
  • glyphicon glyphicon-pas endavant
  • glyphicon glyphicon-expulsar
  • glyphicon glyphicon-chevron-esquerra
  • glyphicon glyphicon-chevron-dreta
  • glyphicon glyphicon-plus-signe
  • glyphicon glyphicon-signe-menos
  • glyphicon glyphicon-remove-signe
  • glyphicon glyphicon-ok-signe
  • glyphicon glyphicon-pregunta-signe
  • glyphicon glyphicon-info-signe
  • glyphicon glyphicon captura de pantalla
  • glyphicon glyphicon-eliminar-cercle
  • glyphicon glyphicon-ok-cercle
  • glyphicon glyphicon-ban-cercle
  • glyphicon glyphicon-fletxa-esquerra
  • glyphicon glyphicon-fletxa-dreta
  • glyphicon glyphicon-fletxa amunt
  • glyphicon glyphicon-fletxa-abaix
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-canviar la mida-complet
  • glyphicon glyphicon-canviar la mida-petit
  • glyphicon glyphicon-signe-exclamació
  • glyphicon glyphicon-regal
  • glyphicon glyphicon-fulla
  • glyphicon glyphicon-foc
  • glyphicon glyphicon-ull-obert
  • glyphicon glyphicon-ull-tancar
  • glyphicon glyphicon senyal d'advertència
  • glyphicon glyphicon-pla
  • glyphicon glyphicon-calendari
  • glyphicon glyphicon-aleatori
  • glyphicon glyphicon-comentari
  • glyphicon glyphicon-imant
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retuitejar
  • glyphicon glyphicon-carretó de la compra
  • glyphicon glyphicon-carpeta-tancar
  • glyphicon glyphicon-carpeta-obrir
  • glyphicon glyphicon-canviar la mida-vertical
  • glyphicon glyphicon-canviar la mida-horitzontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-campana
  • glyphicon glyphicon-certificat
  • glyphicon glyphicon-polze amunt
  • glyphicon glyphicon-polze cap avall
  • glyphicon glyphicon-mà-dreta
  • glyphicon glyphicon-mà-esquerra
  • glyphicon glyphicon-mà amunt
  • glyphicon glyphicon-man avall
  • glyphicon glyphicon-cercle-fletxa-dreta
  • glyphicon glyphicon-cercle-fletxa-esquerra
  • glyphicon glyphicon-cercle-fletxa-amunt
  • glyphicon glyphicon-cercle-fletxa-abaix
  • glyphicon glyphicon-globus
  • glyphicon glyphicon-clau anglesa
  • glyphicon glyphicon-tasques
  • glyphicon glyphicon-filtre
  • glyphicon glyphicon-maletí
  • glyphicon glyphicon-pantalla completa
  • glyphicon glyphicon-tauler de control
  • glyphicon glyphicon-clip de paper
  • glyphicon glyphicon-cor-buit
  • glyphicon glyphicon-enllaç
  • glyphicon glyphicon-telèfon
  • glyphicon glyphicon-pinta
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-ordenar-per-abecedari
  • glyphicon glyphicon-ordenar-per-alfabet-alt
  • glyphicon glyphicon-ordenar-per-ordre
  • glyphicon glyphicon-ordenar-per-ordre-alt
  • glyphicon glyphicon-ordena-per-atributs
  • glyphicon glyphicon-ordenar-per-atributs-alt
  • glyphicon glyphicon-desmarcat
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-inici de sessió
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-tancar sessió
  • glyphicon glyphicon-nova-finestra
  • glyphicon glyphicon-registre
  • glyphicon glyphicon-guardar
  • glyphicon glyphicon-obert
  • glyphicon glyphicon-desat
  • glyphicon glyphicon-import
  • glyphicon glyphicon-exportació
  • glyphicon glyphicon-enviar
  • glyphicon glyphicon-disquet
  • glyphicon glyphicon-disquet-desat
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-disquet-desa
  • glyphicon glyphicon-disquet-obert
  • glyphicon glyphicon-targeta-de-crèdit
  • glyphicon glyphicon-transferència
  • glyphicon glyphicon-coberteria
  • glyphicon glyphicon-capçalera
  • glyphicon glyphicon-comprimit
  • glyphicon glyphicon-auricular
  • glyphicon glyphicon-telèfon-alt
  • glyphicon glyphicon-torre
  • glyphicon glyphicon-estadístiques
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-video-hd
  • glyphicon glyphicon-subtítols
  • glyphicon glyphicon-so-estèreo
  • glyphicon glyphicon-so-dolby
  • glyphicon glyphicon-so-5-1
  • glyphicon glyphicon-so-6-1
  • glyphicon glyphicon-so-7-1
  • glyphicon glyphicon-marca de drets d'autor
  • glyphicon glyphicon-marca-de-registre
  • glyphicon glyphicon-núvol-descàrrega
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-arbre-conífera
  • glyphicon glyphicon-arbre-caducifoli
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-desa-fitxer
  • glyphicon glyphicon-obre-fitxer
  • glyphicon glyphicon pujar de nivell
  • glyphicon glyphicon-còpia
  • glyphicon glyphicon-pasta
  • glyphicon glyphicon-alerta
  • glyphicon glyphicon-equalitzador
  • glyphicon glyphicon-rei
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-peó
  • glyphicon glyphicon-bisbe
  • glyphicon glyphicon-cavaller
  • glyphicon glyphicon-fórmula-nadó
  • glyphicon glyphicon-tenda
  • glyphicon glyphicon-pissarra
  • glyphicon glyphicon-llit
  • glyphicon glyphicon-poma
  • glyphicon glyphicon-esborrar
  • glyphicon glyphicon-rellotge de sorra
  • glyphicon glyphicon-làmpada
  • glyphicon glyphicon-duplicar
  • glyphicon glyphicon-guarderia
  • glyphicon glyphicon-tisores
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon-fregar
  • glyphicon glyphicon-escala
  • glyphicon glyphicon-gel-lolly
  • glyphicon glyphicon-gelat-agustat
  • glyphicon glyphicon-educació
  • glyphicon glyphicon-opció-horitzontal
  • glyphicon glyphicon-opció-vertical
  • glyphicon glyphicon-menú-hamburguesa
  • glyphicon glyphicon-finestra-modal
  • glyphicon glyphicon-oli
  • glyphicon glyphicon-gra
  • glyphicon glyphicon-ulleres de sol
  • glyphicon glyphicon-mida-text
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-text-fons
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-alineació d'objectes-horitzontal
  • glyphicon glyphicon-objecte-alinear-esquerra
  • glyphicon glyphicon-alineació d'objectes-vertical
  • glyphicon glyphicon-objecte-alinear-dreta
  • glyphicon glyphicon-triangle-dreta
  • glyphicon glyphicon-triangle-esquerra
  • glyphicon glyphicon-triangle-fons
  • glyphicon glyphicon-triangle-top
  • glyphicon glyphicon-consola
  • glyphicon glyphicon-superíndex
  • glyphicon glyphicon-subíndex
  • glyphicon glyphicon-menú-esquerra
  • glyphicon glyphicon-menú-dreta
  • glyphicon glyphicon-menú-avall
  • glyphicon glyphicon-menú amunt

Com utilitzar

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.

No barregis amb altres components

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

Només per al seu ús en elements buits

Les classes d'icones només s'han d'utilitzar en elements que no contenen contingut de text i no tenen elements secundaris.

Canviar la ubicació del tipus de lletra de la icona

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:

  • Canvieu les variables @icon-font-pathi/o @icon-font-nameals fitxers font Less.
  • Utilitzeu l' opció d'URL relatius proporcionada pel compilador Less.
  • Canvieu els url()camins al CSS compilat.

Utilitzeu l'opció que millor s'adapti a la vostra configuració de desenvolupament específica.

Icones accessibles

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

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-labelatribut al propi control.

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

Exemples

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

Desplegables

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-righta una .dropdown-menualineació a la dreta del menú desplegable.

Pot requerir un posicionament addicional

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 overflowpropietats o aparèixer fora dels límits de la finestra gràfica. Abordeu aquests problemes pel vostre compte a mesura que sorgeixin.

.pull-rightAlineació obsoleta

A partir de la v3.1.0, hem obsolet .pull-rightels 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>

Grups de botons

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 .

Els consells sobre eines i les finestres emergents dels grups de botons requereixen una configuració especial

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

Assegureu-vos que sigui correcte rolei proporcioneu una etiqueta

Perquè les tecnologies d'assistència, com ara els lectors de pantalla, transmetin que s'agrupen una sèrie de botons, rolecal 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' roleatribut correcte. En els exemples proporcionats aquí, fem servir , però també es poden utilitzar aria-labelalternatives com ara .aria-labelledby

Exemple bàsic

Emboliqui una sèrie de botons amb .btnen .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Barra d'eines de botons

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>

Talla

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>

Nidificació

Col·loqueu un .btn-groupdins d'un altre .btn-groupquan 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>

Variació vertical

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>

Grups de botons justificats

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.

Maneig de fronteres

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: -1pxs'utilitza per apilar les vores en lloc d'eliminar-les. Tanmateix, marginno 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.

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

Amb <a>elements

Només cal embolicar una sèrie de .btns en .btn-group.btn-group-justified.

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

Enllaços que actuen com a botons

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

Amb <button>elements

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

Botons desplegables

Utilitzeu qualsevol botó per activar un menú desplegable col·locant-lo dins d'un .btn-groupi proporcionant el marcatge de menú adequat.

Dependència del connector

Els menús desplegables de botons requereixen que el complement desplegable s'inclogui a la vostra versió de Bootstrap.

Menú desplegable d'un sol botó

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>

Dividir els menús desplegables de botons

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>

Talla

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>

Variació de descens

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>

Grups d'entrada

Amplieu els controls del formulari afegint text o botons abans, després o als dos costats de qualsevol <input>. Utilitzeu -lo .input-groupamb .input-group-addono .input-group-btnper anteposar o afegir elements a un únic .form-control.

<input>Només textuals

Eviteu utilitzar <select>elements aquí, ja que no es poden dissenyar completament als navegadors WebKit.

Eviteu utilitzar <textarea>elements aquí ja que el seu rowsatribut no es respectarà en alguns casos.

Els consells sobre eines i les finestres emergents dels grups d'entrada requereixen una configuració especial

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 barregis amb altres components

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.

Afegiu sempre etiquetes

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-onlyclasse o ús de l' atribut aria-label, aria-labelledby, aria-describedby, titleo 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.

Exemple bàsic

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-addono .input-group-btn) en un sol costat.

No admetem diversos controls de formulari en un sol grup d'entrada.

@

@exemple.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Talla

Afegiu les classes de mida del formulari relatives al .input-groupmateix 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>

Caselles de selecció i complements de ràdio

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

Addons de botons

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

Botons amb desplegables

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

Botons segmentats

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

Múltiples botons

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>

Navs

Els navegadors disponibles a Bootstrap tenen un marcatge compartit, començant per la .navclasse base, així com estats compartits. Canvia les classes modificadores per canviar entre cada estil.

L'ús de navs per als panells de pestanyes requereix un connector de pestanyes de JavaScript

Per a pestanyes amb àrees tabulables, heu d'utilitzar el connector JavaScript de pestanyes . L'etiquetatge també requerirà roleatributs addicionals i ARIA; consulteu l' exemple de marcatge del connector per a més detalls.

Feu que els navegadors utilitzats com a navegació siguin accessibles

Si utilitzeu navs per proporcionar una barra de navegació, assegureu-vos d'afegir un role="navigation"al contenidor principal més lògic del fitxer <ul>, o embolicar un <nav>element al voltant de tota la navegació. No afegiu el paper al <ul>mateix, ja que això evitaria que s'anunciés com una llista real per les tecnologies d'assistència.

Tingueu en compte que la .nav-tabsclasse requereix la .navclasse 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.

Safari i navegacions justificades responsives

A partir de la v9.1.2, Safari mostra un error en què canviar la mida del navegador horitzontalment provoca errors de representació a la navegació justificada que s'esborren en refrescar. Aquest error també es mostra a l' exemple de navegació justificada .

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

La funcionalitat de l'enllaç no afecta

Aquesta classe només canviarà l' <a>aparença de ', no la seva funcionalitat. Utilitzeu JavaScript personalitzat per desactivar els enllaços aquí.

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

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

Píndoles amb desplegables

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

Barra de navegació

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.

Contingut desbordant

Com que Bootstrap no sap quant espai necessita el contingut de la vostra barra de navegació, és possible que tingueu problemes amb l'embolcall del contingut en una segona fila. Per resoldre això, podeu:

  1. Redueix la quantitat o l'amplada dels elements de la barra de navegació.
  2. Amaga certs elements de la barra de navegació en determinades mides de pantalla utilitzant classes d'utilitat sensibles .
  3. Canvieu el punt en què la vostra barra de navegació canvia entre el mode replegat i el mode horitzontal. Personalitzeu la @grid-float-breakpointvariable o afegiu la vostra pròpia consulta multimèdia.

Requereix un connector de JavaScript

Si JavaScript està desactivat i la finestra gràfica és prou estreta com perquè la barra de navegació es col·lapsa, serà impossible ampliar la barra de navegació i veure el contingut dins del fitxer .navbar-collapse.

La barra de navegació sensible requereix que el connector de col·lapse s'inclogui a la vostra versió de Bootstrap.

Canviant el punt d'interrupció de la barra de navegació mòbil col·lapsada

La barra de navegació es col·lapsa a la seva visualització mòbil vertical quan la finestra gràfica és més estreta que @grid-float-breakpoint, i s'expandeix a la seva visualització horitzontal no mòbil quan la finestra gràfica té almenys @grid-float-breakpointuna amplada. Ajusteu aquesta variable a la font Menys per controlar quan la barra de navegació col·lapsa/expandeix. El valor predeterminat és 768px(la pantalla més petita "petita" o "tauleta").

Feu que les barres de navegació siguin accessibles

Assegureu-vos d'utilitzar un <nav>element o, si feu servir un element més genèric, com ara un <div>, afegiu una role="navigation"a cada barra de navegació per identificar-la explícitament com una regió de referència per als usuaris de tecnologies d'assistència.

<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-brandté 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-formper 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-formcomparteix gran part del seu codi amb .form-inlinevia 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>

Advertències dels dispositius mòbils

Hi ha algunes advertències sobre l'ús de controls de formulari dins d'elements fixos en dispositius mòbils. Consulteu els nostres documents d'assistència per al navegador per obtenir més informació.

Afegiu sempre etiquetes

Els lectors de pantalla tindran problemes amb els vostres formularis si no incloeu una etiqueta per a cada entrada. Per a aquests formularis en línia, podeu amagar les etiquetes mitjançant la .sr-onlyclasse. Hi ha altres mètodes alternatius per proporcionar una etiqueta per a tecnologies d'assistència, com ara l' atribut aria-label, aria-labelledbyo . titleSi no hi ha cap d'aquests, els lectors de pantalla poden recórrer a l'ús de l' placeholderatribut, si n'hi ha, però tingueu en compte que placeholderno es recomana l'ús de com a substitut d'altres mètodes d'etiquetatge.

Afegiu la .navbar-btnclasse 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>

Ús específic del context

Igual que les classes de botons estàndard , .navbar-btnes pot utilitzar en <a>i <input>elements. Tanmateix, .navbar-btnni les classes de botons estàndard s'han d'utilitzar en <a>elements dins de .navbar-nav.

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-linkclasse 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-lefto . .navbar-rightAmbdues 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-lefti .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.

Alineant a la dreta diversos components

Actualment, les barres de navegació tenen una limitació amb diverses .navbar-rightclasses. Per espaiar correctament el contingut, utilitzem el marge negatiu a l'últim .navbar-rightelement. Quan hi ha diversos elements que utilitzen aquesta classe, aquests marges no funcionen com s'ha previst.

Ho revisarem quan puguem reescriure aquest component a la v4.

Afegeix .navbar-fixed-topi inclou un .containero .container-fluidal contingut de la barra de navegació al centre i al coixinet.

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

Cal encoixinat corporal

La barra de navegació fixa se superposarà a l'altre contingut, tret que l'afegiu paddinga la part superior del fitxer <body>. Proveu els vostres propis valors o utilitzeu el nostre fragment a continuació. Consell: per defecte, la barra de navegació té 50 píxels d'alçada.

body { padding-top: 70px; }

Assegureu-vos d'incloure-ho després del CSS bàsic de Bootstrap.

Afegeix .navbar-fixed-bottomi inclou un .containero .container-fluidal contingut de la barra de navegació al centre i al coixinet.

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

Cal encoixinat corporal

La barra de navegació fixa se superposarà a l'altre contingut, tret que l'afegiu paddinga la part inferior del fitxer <body>. Proveu els vostres propis valors o utilitzeu el nostre fragment a continuació. Consell: per defecte, la barra de navegació té 50 píxels d'alçada.

body { padding-bottom: 70px; }

Assegureu-vos d'incloure-ho després del CSS bàsic de Bootstrap.

Creeu una barra de navegació d'amplada completa que s'allunyi amb la pàgina afegint .navbar-static-topi inclòs un .containero .container-fluidper 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>

Pa ratllat

Indiqueu la ubicació de la pàgina actual dins d'una jerarquia de navegació.

Els separadors s'afegeixen automàticament en CSS mitjançant :beforei content.

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

Paginació

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ó per defecte

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">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Etiquetar el component de paginació

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

Estats desactivats i actius

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 .activeper indicar la pàgina actual.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

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">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Talla

Vols una paginació més gran o més petita? Afegiu .pagination-lgo .pagination-smper 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>

Buscapersones

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.

Exemple per defecte

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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Estat desactivat opcional

Els enllaços de cercapersones també utilitzen la .disabledclasse d'utilitat general de la paginació.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Etiquetes

Exemple

Exemple d'encapçalament Nou

Exemple d'encapçalament Nou

Exemple d'encapçalament Nou

Exemple d'encapçalament Nou

Exemple d'encapçalament Nou
Exemple d'encapçalament Nou
<h3>Example heading <span class="label label-default">New</span></h3>

Variacions disponibles

Afegiu qualsevol de les classes modificadores esmentades a continuació per canviar l'aparença d'una etiqueta.

Informació d' èxit principal per defecte Advertència Perill
<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>

Tens tones d'etiquetes?

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-blockelement (com una icona). El camí per evitar-ho és la configuració display: inline-block;. Per obtenir un context i un exemple, vegeu #13219 .

Insígnies

Ressalteu fàcilment els elements nous o no llegits afegint un <span class="badge">a enllaços, navegacions Bootstrap i molt més.

Safata d'entrada42

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

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

Auto col·lapse

Quan no hi hagi elements nous o no llegits, les insígnies simplement es replegaran (mitjançant el :emptyselector de CSS) sempre que no hi hagi contingut.

Compatibilitat entre navegadors

Les insígnies no es col·lapsen automàticament a Internet Explorer 8 perquè no són compatibles amb el :emptyselector.

S'adapta als estats de navegació actius

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>

Jumbotron

Un component lleuger i flexible que, opcionalment, pot ampliar tota la finestra gràfica per mostrar el contingut clau del vostre lloc.

Hola món!

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.

Aprèn més

<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 .containers i, en canvi, afegiu-hi un .containerdins.

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

Capçalera de la pàgina

Una intèrpret d'ordres senzilla per h1espaiar i segmentar adequadament les seccions de contingut d'una pàgina. Pot utilitzar l' element h1predeterminat 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>

Miniatures

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 .

Exemple per defecte

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>

Contingut personalitzat

Amb una mica de marcatge addicional, és possible afegir qualsevol tipus de contingut HTML com encapçalaments, paràgrafs o botons a les miniatures.

100% x 200

Etiqueta en miniatura

Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Botó Botó

100% x 200

Etiqueta en miniatura

Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Botó Botó

100% x 200

Etiqueta en miniatura

Cras justo odio, dapibus ac facilitis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Botó Botó

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

Alertes

Proporcioneu missatges de comentaris contextuals per a les accions típiques dels usuaris amb un grapat de missatges d'alerta disponibles i flexibles.

Exemples

Embolcalla qualsevol text i un botó d'ignorar opcional .alerti una de les quatre classes contextuals (p. ex., .alert-success) per als missatges d'alerta bàsics.

No hi ha classe per defecte

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>

Alertes descartables

Creeu qualsevol alerta afegint un .alert-dismissiblebotó opcional i de tancament.

Requereix un connector d'alerta de JavaScript

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">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Assegureu-vos un comportament adequat en tots els dispositius

Assegureu-vos d'utilitzar l' <button>element amb l' data-dismiss="alert"atribut de dades.

Utilitzeu la .alert-linkclasse 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>

Barres de progrés

Proporcioneu comentaris actualitzats sobre el progrés d'un flux de treball o d'una acció amb barres de progrés senzilles però flexibles.

Compatibilitat entre navegadors

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.

Compatibilitat amb la política de seguretat de contingut (CSP).

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

Exemple bàsic

Barra de progrés predeterminada.

60% complet
<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>

Amb etiqueta

Traieu la classe <span>with .sr-onlyde la barra de progrés per mostrar un percentatge visible.

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Per assegurar-vos que el text de l'etiqueta es manté llegible fins i tot en percentatges baixos, penseu a afegir una min-widtha la barra de progrés.

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Alternatives contextuals

Les barres de progrés utilitzen alguns dels mateixos botons i classes d'alertes per a estils coherents.

40% completat (èxit)
20% complet
60% completat (advertència)
80% complet (perill)
<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>

A ratlles

Utilitza un degradat per crear un efecte ratllat. No disponible a IE9 i posteriors.

40% completat (èxit)
20% complet
60% completat (advertència)
80% complet (perill)
<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>

Animat

Afegeix .activea .progress-bar-stripedper animar les ratlles de dreta a esquerra. No disponible a IE9 i posteriors.

45% complet
<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>

Apilats

Col·loqueu diverses barres a la mateixa .progressper apilar-les.

35% completat (èxit)
20% completat (advertència)
10% complet (perill)
<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>

Objecte multimèdia

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.

Multimèdia per defecte

El suport predeterminat mostra un objecte multimèdia (imatges, vídeo, àudio) a l'esquerra o a la dreta d'un bloc de contingut.

Encapçalament dels mitjans

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.

Encapçalament dels mitjans

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.

Encapçalament multimèdia niu

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.

Encapçalament dels mitjans

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.

Encapçalament dels mitjans

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Les classes .pull-lefti .pull-righttambé 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-lefti .media-right, excepte que .media-rights'han de col·locar després .media-bodyde l'html.

Alineació dels mitjans

Les imatges o altres mitjans es poden alinear a la part superior, mitjana o inferior. El valor predeterminat és alineat a la part superior.

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

Mitjans alineats al mig

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.

Mitjans alineats a la part inferior

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>

Llista de mitjans

Amb una mica d'etiquetatge addicional, podeu utilitzar la llista de mitjans dins (útil per a fils de comentaris o llistes d'articles).

  • Encapçalament dels mitjans

    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.

    Encapçalament multimèdia niu

    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.

    Encapçalament multimèdia niu

    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.

    Encapçalament multimèdia niu

    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>

Grup de llista

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.

Exemple bàsic

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.

  • Cras justo odio
  • Dapibus ac facilitis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestíbul a l'eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Insígnies

Afegiu el component de les insígnies a qualsevol element del grup de llista i es col·locarà automàticament a la dreta.

  • 14Cras justo odio
  • 2Dapibus ac facilitis in
  • 1Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Elements enllaçats

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>

Elements de botons

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

Elements desactivats

Afegiu -lo .disableda a .list-group-itemper 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>

Classes contextuals

Utilitzeu classes contextuals per estilitzar els elements de la llista, per defecte o enllaçats. També inclou .activel'estat.

  • Dapibus ac facilitis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestíbul a l'eros
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Contingut personalitzat

Afegiu gairebé qualsevol HTML dins, fins i tot per a grups de llistes enllaçades com el següent.

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

Panells

Tot i que no sempre és necessari, de vegades cal posar el DOM en una caixa. En aquestes situacions, proveu el component del panell.

Exemple bàsic

Per defecte, tot el .panelque es fa és aplicar una vora bàsica i un farciment per contenir contingut.

Exemple de panell bàsic
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panell amb encapçalament

Afegiu fàcilment un contenidor d'encapçalament al vostre tauler amb .panel-heading. També podeu incloure qualsevol <h1>- <h6>amb una .panel-titleclasse 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.

Encapçalament del panell sense títol
Contingut del panell

Títol del panell

Contingut del panell
<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.

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

Alternatives contextuals

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.

Títol del panell

Contingut del panell

Títol del panell

Contingut del panell

Títol del panell

Contingut del panell

Títol del panell

Contingut del panell

Títol del panell

Contingut del panell
<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>

Amb taules

Afegiu qualsevol no vorejat .tabledins 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ó.

Encapçalament del panell

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 @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Si no hi ha cap cos del panell, el component es mou de la capçalera del panell a la taula sense interrupció.

Encapçalament del panell
# Nom Cognom Nom d'usuari
1 senyal Otto @mdo
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Amb grups de llista

Inclou fàcilment grups de llistes d'amplada completa dins de qualsevol tauler.

Encapçalament del panell

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.

  • Cras justo odio
  • Dapibus ac facilitis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestíbul a l'eros
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Incrustació responsiva

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

Pous

Bé per defecte

Utilitzeu el pou com a simple efecte sobre un element per donar-li un efecte d'inserció.

Mira, estic en un pou!
<div class="well">...</div>

Classes opcionals

Control de farciment i cantonades arrodonides amb dues classes de modificadors opcionals.

Mira, estic en un pou gran!
<div class="well well-lg">...</div>
Mira, estic en un pou petit!
<div class="well well-sm">...</div>