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.

Introdueix un correu electrònic vàlid

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

Exemple

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>

Alineació

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.

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

Capçaleres

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>

Divisor

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>

Elements de menú desactivats

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 .

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 `role`i 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>

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.

Esquerra Mig Dret

Esquerra Mig

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

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>

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.

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

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.

Pestanyes

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>

Píndoles

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>

Justificada

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>

Enllaços desactivats

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>

Utilitzant menús desplegables

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>

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:

Redueix la quantitat o l'amplada dels elements de la barra de navegació.
Amaga certs elements de la barra de navegació en determinades mides de pantalla utilitzant classes d'utilitat sensibles .
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.

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

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

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>

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.

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>

Enllaços alineats

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>

Exemple

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 .

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>

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>

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>

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.

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ó

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ó

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>

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.

Ben fet! Heu llegit correctament aquest missatge d'alerta important.

Caps amunt! Aquesta alerta necessita la vostra atenció, però no és molt important.

Avís! Millor comproveu-vos, no teniu massa bona pinta.

Oh snap! Canvia algunes coses i prova d'enviar de nou.

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

Avís! Millor comproveu-vos, no teniu massa bona pinta.

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

Enllaços a les alertes

Utilitzeu la .alert-linkclasse d'utilitat per proporcionar ràpidament enllaços de colors coincidents dins de qualsevol alerta.

Ben fet! Heu llegit correctament aquest missatge d'alerta important .

Caps amunt! Aquesta alerta necessita la vostra atenció , però no és molt important.

Avís! Millor comproveu-vos, no teniu massa bona pinta .

Oh snap! Canvia algunes coses i prova d'enviar de nou.

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

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.

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

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

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

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

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

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>

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.

Cras justo odio Dapibus ac facilitis in Morbi leo risus Porta ac consectetur ac Vestíbul a l'eros

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

Cras justo odio Dapibus ac facilitis in Morbi leo risus Porta ac consectetur ac Vestíbul a l'eros

<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

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.

Encapçalament d'elements del grup de llista

Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.

Encapçalament d'elements del grup de llista

Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.

Encapçalament d'elements del grup de llista

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.

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>

Panell amb peu de pàgina

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

Peu de pàgina 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>

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>

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>

Components

Glificons

Glifs disponibles

Com utilitzar

No barregis amb altres components

Només per al seu ús en elements buits

Canviar la ubicació del tipus de lletra de la icona

Icones accessibles

Exemples

Desplegables

Exemple

Alineació

Pot requerir un posicionament addicional

.pull-rightAlineació obsoleta

Capçaleres

Divisor

Elements de menú desactivats

Grups de botons

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

Assegureu-vos que sigui correcte rolei proporcioneu una etiqueta

Exemple bàsic

Barra d'eines de botons

Talla

Nidificació

Variació vertical

Grups de botons justificats

Maneig de fronteres

IE8 i vores

Amb <a>elements

Enllaços que actuen com a botons

Amb <button>elements

Botons desplegables

Dependència del connector

Menú desplegable d'un sol botó

Dividir els menús desplegables de botons

Talla

Variació de descens

Grups d'entrada

<input>Només textuals

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

No barregis amb altres components

Afegiu sempre etiquetes

Exemple bàsic

Talla

Caselles de selecció i complements de ràdio

Addons de botons

Botons amb desplegables

Botons segmentats

Múltiples botons

Navs

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

Feu que els navegadors utilitzats com a navegació siguin accessibles

Pestanyes

Píndoles

Justificada

Safari i navegacions justificades responsives

Enllaços desactivats

La funcionalitat de l'enllaç no afecta

Utilitzant menús desplegables

Pestanyes amb desplegables

Píndoles amb desplegables

Barra de navegació

Barra de navegació per defecte

Contingut desbordant

Requereix un connector de JavaScript

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

Feu que les barres de navegació siguin accessibles

Imatge de marca

Formes

Advertències dels dispositius mòbils

Afegiu sempre etiquetes

Botons

Ús específic del context

Text

Enllaços que no són de navegació

Alineació de components

Alineant a la dreta diversos components

Fixat a la part superior

Cal encoixinat corporal

Fixat al fons

`.pull-right`Alineació obsoleta

Assegureu-vos que sigui correcte `role`i proporcioneu una etiqueta

Amb `<a>`elements

Amb `<button>`elements

`<input>`Només textuals