Glifos dispoñibles

Inclúe máis de 250 glifos en formato de fonte do conxunto Glyphicon Halflings. Os Halflings Glyphicons normalmente non están dispoñibles gratuitamente, pero o seu creador púxoos dispoñibles para Bootstrap de xeito gratuíto. Como agradecemento, só pedimos que inclúas unha ligazón a Glyphicons sempre que sexa posible.

glyphicon glyphicon-asterisco
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-menos
glyphicon glyphicon-nube
glyphicon glyphicon-sobre
glyphicon glyphicon-lapis
glyphicon gliphicon-vidrio
glyphicon glyphicon-música
glyphicon glyphicon-busca
glyphicon gliphicon-corazón
glyphicon glyphicon-estrela
glyphicon glyphicon-estrela-baleiro
glyphicon glyphicon-usuario
glyphicon glyphicon-película
glyphicon glyphicon-th-grande
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-eliminar
glyphicon glyphicon-ampliar
glyphicon glyphicon-amenzar
glyphicon glyphicon-off
glyphicon glyphicon-sinal
glifo glifo-cog
glyphicon glyphicon-lixo
glyphicon glyphicon-home
glyphicon glyphicon-ficheiro
glificón glifo-tempo
glyphicon glyphicon-estrada
glyphicon glyphicon-download-alt
glyphicon glyphicon-descarga
glyphicon glyphicon-cargar
glyphicon glyphicon bandexa de entrada
glyphicon glyphicon-xogar-círculo
glyphicon glyphicon-repetir
glyphicon glyphicon-refrescar
glyphicon glyphicon-list-alt
glyphicon glyphicon-bloqueo
glyphicon glyphicon-bandeira
glyphicon glyphicon-auriculares
glyphicon glyphicon-volume-off
glyphicon glyphicon-baixa o volume
glyphicon glyphicon-subir volume
glyphicon glyphicon-qrcode
glyphicon glyphicon-código de barras
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-libro
glyphicon glyphicon-marcador
glyphicon glyphicon-print
glyphicon glyphicon-cámara
glyphicon glyphicon-font
glyphicon glyphicon-negriña
glyphicon glyphicon-cursiva
glyphicon glyphicon-text-height
gliphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-dereita
glyphicon glyphicon-align-xustificar
glyphicon glyphicon-lista
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-dereita
glyphicon glyphicon-facetime-video
glyphicon glyphicon-foto
glyphicon glyphicon-mapa-marcador
glyphicon glyphicon-axustar
glyphicon glyphicon-tint
glyphicon glyphicon-editar
glyphicon glyphicon-compartir
glyphicon glyphicon-comprobación
glyphicon gliphicon-mover
glyphicon glyphicon-paso-atrás
glyphicon glyphicon-retroceso rápido
glyphicon glyphicon-atrás
glyphicon glyphicon-xogar
glyphicon glyphicon-pausa
glyphicon glyphicon-stop
glyphicon glyphicon-adelante
glyphicon glyphicon-avance rápido
glyphicon glyphicon-paso-adelante
glyphicon glyphicon-expulsar
glyphicon glyphicon-chevron-esquerda
glyphicon glyphicon-chevron-dereita
glyphicon glyphicon-plus-sign
glyphicon glyphicon-signo-menos
glyphicon glyphicon-eliminar-sinal
glyphicon glyphicon-ok-sign
glyphicon gliphicon-sinal-pregunta
glyphicon glyphicon-info-sin
glyphicon glyphicon captura de pantalla
glyphicon glyphicon-eliminar-círculo
glyphicon glyphicon-ok-círculo
glyphicon glyphicon-ban-círculo
glyphicon gliphicon-frecha-esquerda
glyphicon glyphicon-frecha-dereita
glyphicon gliphicon-frecha-arriba
glyphicon glyphicon-frecha-abajo
glyphicon glyphicon-share-alt
glyphicon glyphicon-redimensionar-completo
glyphicon glyphicon-redimensionar-pequeno
glyphicon glyphicon-signo-de-exclamación
glyphicon glyphicon-agasallo
glifo glifo-folla
glyphicon glyphicon-lume
glyphicon glyphicon-ollo-aberto
glyphicon glyphicon-ollo-pechar
glyphicon gliphicon-sinal-de-advertencia
glifo glifico-plano
glyphicon glyphicon-calendario
glyphicon glyphicon-aleatorio
glyphicon glyphicon-comentario
glyphicon glyphicon-imán
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-carro da compra
glyphicon glyphicon-carpeta-pechar
glyphicon glyphicon-carpeta-abrir
glyphicon glyphicon-redimensionar-vertical
glyphicon glyphicon-redimensionar-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon gliphicon-campá
glyphicon glyphicon-certificado
glyphicon glyphicon-pulgar cara arriba
glyphicon glyphicon-polgares abaixo
glyphicon glyphicon-man-dereita
glyphicon glyphicon-man-esquerda
glyphicon glyphicon-man arriba
glyphicon glyphicon-man abaixo
glyphicon glyphicon-círculo-frecha-dereita
glyphicon glyphicon-círculo-frecha-esquerda
glyphicon glyphicon-círculo-frecha-arriba
glyphicon glyphicon-círculo-frecha-abaixo
glyphicon glyphicon-globo
glyphicon glyphicon-chave inglesa
glyphicon glyphicon-tarefas
glyphicon glyphicon-filtro
glyphicon glyphicon-maletín
glyphicon glyphicon-pantalla completa
glyphicon gliphicon-panel de control
glyphicon glyphicon-clip de papel
glyphicon glyphicon-corazón-baleiro
glyphicon glyphicon-link
glyphicon glyphicon-teléfono
glyphicon glyphicon-chincheira
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-ordenar-por-alfabeto
glyphicon glyphicon-ordenar-por-alfabeto-alt
glyphicon glyphicon-ordenar-por-orden
glyphicon glyphicon-ordenar-por-orden-alt
glyphicon glyphicon-ordenar-por-atributos
glyphicon glyphicon-ordenar-por-atributos-alt
glyphicon glyphicon-desmarcado
glyphicon glyphicon-expand
glyphicon glyphicon-colapso-abaixo
glyphicon glyphicon-colapso
glyphicon glyphicon-iniciar sesión
glyphicon glyphicon-flash
glyphicon glyphicon-pechar sesión
glyphicon glyphicon-nova-xanela
glyphicon glyphicon-rexistro
glyphicon glyphicon-gardar
glyphicon glyphicon-aberto
glyphicon glyphicon gardado
glyphicon glyphicon-import
glyphicon glyphicon-exportación
glyphicon glyphicon-enviar
glyphicon glyphicon-disquete
glyphicon glyphicon-disquete gardado
glyphicon glyphicon-disquete-eliminar
glyphicon glyphicon-disquete-gardar
glyphicon glyphicon-disquete-aberto
glyphicon glyphicon-tarxeta-de-crédito
glyphicon glyphicon-transferencia
glyphicon glyphicon-cubertos
glyphicon glyphicon-header
glyphicon glyphicon-comprimido
glyphicon glyphicon-auriculares
glyphicon glyphicon-phone-alt
glyphicon glyphicon-torre
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-video-hd
glyphicon glyphicon-subtítulos
glyphicon glyphicon-son-estéreo
glyphicon glyphicon-son-dolby
glyphicon glyphicon-son-5-1
glyphicon glyphicon-son-6-1
glyphicon glyphicon-son-7-1
glyphicon glyphicon-marca-copyright
glyphicon glyphicon marca de rexistro
glyphicon glyphicon-cloud-descarga
glyphicon glyphicon-nube-carga
glyphicon gliphicon-árbore-conífera
glyphicon gliphicon-árbore-caducifolio
glyphicon glyphicon-cd
glyphicon glyphicon-gardar-ficheiro
glyphicon glyphicon-abrir-ficheiro
glyphicon glyphicon subir de nivel
glyphicon glyphicon-copia
glyphicon glyphicon-pegar
glyphicon glyphicon-alerta
glyphicon glyphicon ecualizador
glyphicon gliphicon-rei
glyphicon glyphicon-raíña
glyphicon gliphicon-peón
glyphicon glyphicon-bispo
glyphicon glyphicon-caballero
glyphicon glyphicon-fórmula-bebé
glyphicon glyphicon-tenda
glyphicon glyphicon-pizarra
glifo glifo-cama
glyphicon glyphicon-mazá
glyphicon glyphicon-borrar
glyphicon glyphicon-reloxo de area
glyphicon glyphicon-lámpada
glyphicon glyphicon-duplicar
glyphicon glyphicon-hucha
glyphicon glyphicon-tesoiras
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glifo glifo-rublo
glyphicon glyphicon-fregar
glyphicon glyphicon-escala
glyphicon glyphicon-xeo-polo
glyphicon glyphicon-polo-xeo-saborado
glyphicon glyphicon-educación
glyphicon glyphicon-opción-horizontal
glyphicon glyphicon-opción-vertical
glyphicon glyphicon-menú-hamburguesa
glyphicon glyphicon-xanela-modal
glyphicon gliphicon-aceite
glyphicon glyphicon-gran
glyphicon glyphicon-gafas de sol
gliphicon gliphicon-text-size
gliphicon gliphicon-text-color
gliphicon gliphicon-texto-fondo
glyphicon glyphicon-obxecto-align-top
glyphicon glyphicon-obxecto-align-bottom
glyphicon glyphicon-obxecto-align-horizontal
glyphicon glyphicon-obxecto-align-left
glyphicon glyphicon-obxecto-align-vertical
glyphicon glyphicon-obxecto-align-dereita
glyphicon gliphicon-triángulo-dereita
glyphicon glyphicon-triángulo-esquerda
glyphicon gliphicon-triángulo-fondo
glyphicon glyphicon-triangle-top
glyphicon glyphicon-consola
glyphicon gliphicon-superíndice
glyphicon gliphicon-subíndice
glyphicon glyphicon-menú-esquerda
glyphicon glyphicon-menú-dereita
glyphicon glyphicon-menú-abaixo
glyphicon glyphicon-menu-up

Como empregar

Por razóns de rendemento, todas as iconas requiren unha clase base e unha clase de iconas individual. Para usalo, coloca o seguinte código en calquera lugar. Asegúrate de deixar un espazo entre a icona e o texto para o recheo adecuado.

Non mesturar con outros compoñentes

As clases de iconas non se poden combinar directamente con outros compoñentes. Non deben usarse xunto con outras clases no mesmo elemento. En vez diso, engade un aniñado <span>e aplique as clases de iconas ao <span>.

Só para usar en elementos baleiros

As clases de iconas só deben usarse en elementos que non conteñen contido de texto e non teñan elementos fillos.

Cambiando a localización da fonte da icona

Bootstrap asume que os ficheiros de fonte de iconas estarán no ../fonts/directorio, en relación aos ficheiros CSS compilados. Mover ou renomear eses ficheiros de fonte significa actualizar o CSS dunha das tres formas:

Cambia as variables @icon-font-pathe/ou @icon-font-namenos ficheiros de Less fonte.
Use a opción de URL relativos proporcionada polo compilador Less.
Cambia os url()camiños no CSS compilado.

Use a opción que mellor se adapte á súa configuración de desenvolvemento específica.

Iconas accesibles

As versións modernas das tecnoloxías de asistencia anunciarán contido xerado en CSS, así como caracteres Unicode específicos. Para evitar saídas non desexadas e confusas nos lectores de pantalla (especialmente cando as iconas se usan exclusivamente para decoración), ocultámolas co aria-hidden="true"atributo.

Se estás a usar unha icona para transmitir significado (en lugar de só como elemento decorativo), asegúrate de que este significado tamén se transmita ás tecnoloxías de asistencia; por exemplo, inclúe contido adicional, oculto visualmente coa .sr-onlyclase.

Se estás a crear controis sen outro texto (como un <button>que só contén unha icona), sempre debes proporcionar contido alternativo para identificar o propósito do control, para que teña sentido para os usuarios de tecnoloxías de asistencia. Neste caso, pode engadir un aria-labelatributo no propio control.

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

Exemplos

Utilízaos en botóns, grupos de botóns para unha barra de ferramentas, navegación ou entradas de formularios antepostas.

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

Unha icona que se usa nunha alerta para indicar que se trata dunha mensaxe de erro, con .sr-onlytexto adicional para transmitir esta suxestión aos usuarios de tecnoloxías de asistencia.

Introduce un enderezo de correo electrónico válido

<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 conmutable para mostrar listas de ligazóns. Feito interactivo co complemento de JavaScript desplegable .

Exemplo

Envolve o disparador do menú despregable e o menú despregable dentro .dropdownde , ou noutro elemento que declare position: relative;. A continuación, engade o HTML do 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>

Os menús despregables pódense cambiar para expandirse cara arriba (en lugar de para abaixo) engadindo .dropupao pai.

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

Aliñación

De xeito predeterminado, un menú despregable sitúase automaticamente ao 100 % desde a parte superior e ao lado esquerdo do seu pai. Engadir .dropdown-menu-rightao .dropdown-menualiñar á dereita o menú despregable.

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

Cabeceiras

Engade unha cabeceira para etiquetar seccións de accións en calquera menú despregable.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Divisor

Engade un divisor para separar series de ligazóns nun menú despregable.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Elementos de menú desactivados

Engadir .disableda un <li>no menú despregable para desactivar a ligazón.

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

Agrupe unha serie de botóns nunha única liña co grupo de botóns. Engade a radio de JavaScript opcional e o comportamento do estilo de caixa de verificación co noso complemento de botóns .

As informacións sobre ferramentas e as ventás emerxentes nos grupos de botóns requiren unha configuración especial

Cando utilice información sobre ferramentas ou popovers en elementos dentro dun .btn-group, terás que especificar a opción container: 'body'para evitar efectos secundarios non desexados (como que o elemento se faga máis ancho e/ou perda as súas esquinas redondeadas cando se activa a información emerxente ou popover).

Asegúrese de ser correcto `role`e proporcionar unha etiqueta

Para que as tecnoloxías de asistencia, como os lectores de pantalla, transmitan que se agrupan unha serie de botóns, é rolenecesario proporcionar un atributo adecuado. Para os grupos de botóns, isto sería role="group", mentres que as barras de ferramentas deberían ter un role="toolbar".

Unha excepción son os grupos que só conteñen un só control (por exemplo, os grupos de botóns xustificados con <button>elementos) ou un menú despregable.

Ademais, os grupos e as barras de ferramentas deberían ter unha etiqueta explícita, xa que a maioría das tecnoloxías de asistencia non os anunciarán, a pesar da presenza do roleatributo correcto. Nos exemplos proporcionados aquí, usamos , pero tamén se poden usar aria-labelalternativas como .aria-labelledby

Exemplo básico

Envolve unha serie de botóns .btncon .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 conxuntos de <div class="btn-group">para <div class="btn-toolbar">os compoñentes máis 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 lugar de aplicar clases de tamaño de botón a cada botón dun grupo, só tes que engadir .btn-group-*a cada un .btn-group, incluso cando anidan varios grupos.

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

Aniñación

Coloque un .btn-groupdentro doutro .btn-groupcando quere menús despregables mesturados cunha serie de botóns.

<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ón vertical

Fai que un conxunto de botóns aparezan apilados verticalmente en lugar de horizontal. Aquí non se admiten os menús despregables dos botóns divididos.

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

Grupos de botóns xustificados

Fai un grupo de botóns que se estendan en tamaños iguais para abarcar todo o ancho do seu pai. Tamén funciona con menús despregables de botóns dentro do grupo de botóns.

Manexo de fronteiras

Debido ao HTML e CSS específicos usados para xustificar botóns (é dicir display: table-cell, ), os bordos entre eles duplícanse. Nos grupos de botóns normais, margin-left: -1pxúsase para apilar os bordos en lugar de eliminalos. Non obstante, marginnon funciona con display: table-cell. Como resultado, dependendo das súas personalizacións para Bootstrap, pode querer eliminar ou volver colorear os bordos.

IE8 e bordos

Internet Explorer 8 non representa os bordos dos botóns dun grupo de botóns xustificado, xa se estea activado <a>ou <button>elementos. Para evitar isto, envolve cada botón noutro .btn-group.

Consulte #12476 para obter máis información.

Con `<a>`elementos

Simplemente envolve unha serie de .btns en .btn-group.btn-group-justified.

Esquerda Medio Certo

Esquerda Medio

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

Ligazóns que actúan como botóns

Se os <a>elementos se usan para actuar como botóns, activando a funcionalidade na páxina, en lugar de navegar a outro documento ou sección da páxina actual, tamén se lles debería dar un role="button".

Con `<button>`elementos

Para usar grupos de botóns xustificados con <button>elementos, debes envolver cada botón nun grupo de botóns . A maioría dos navegadores non aplican correctamente o noso CSS para xustificar os <button>elementos, pero xa que admitimos menús despregables de botóns, podemos solucionar isto.

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

Use calquera botón para activar un menú despregable colocándoo dentro dun .btn-groupe proporcionando a marca de menú adecuada.

Dependencia do complemento

Os menús despregables de botóns requiren que se inclúa o complemento do menú despregable na túa versión de Bootstrap.

Menú despregable dun só botón

Converte un botón nun menú despregable con algúns cambios básicos de marcado.

<!-- 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 menú despregable de botóns

Do mesmo xeito, cree menú despregable de botón dividido cos mesmos cambios de marcado, só cun botón separado.

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

Os menús despregables de botóns funcionan con botóns de todos os tamaños.

<!-- 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ón de caída

Activa os menús despregables enriba dos elementos engadindo .dropupao pai.

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

Amplía os controis do formulario engadindo texto ou botóns antes, despois ou a ambos os dous lados de calquera formato baseado en texto <input>. Utilízase .input-groupcon .input-group-addonou .input-group-btnpara antepoñer ou engadir elementos a un único .form-control.

`<input>`Só textual

Evite usar <select>elementos aquí, xa que non se poden definir completamente nos navegadores WebKit.

Evite usar <textarea>elementos aquí xa rowsque nalgúns casos non se respectarán os seus atributos.

As informacións sobre ferramentas e as ventás emerxentes nos grupos de entrada requiren unha configuración especial

Cando utilices información sobre ferramentas ou popovers en elementos dentro dun .input-group, terás que especificar a opción container: 'body'para evitar efectos secundarios non desexados (como que o elemento se faga máis ancho e/ou perda as súas esquinas redondeadas cando se activa a información emerxente ou popover).

Non mesturar con outros compoñentes

Non mesture grupos de formularios ou clases de columnas de grade directamente con grupos de entrada. En vez diso, aniñe o grupo de entrada dentro do grupo de formularios ou do elemento relacionado coa grade.

Engade sempre etiquetas

Os lectores de pantalla terán problemas cos teus formularios se non inclúes unha etiqueta para cada entrada. Para estes grupos de entrada, asegúrate de que calquera etiqueta ou funcionalidade adicional se transmita ás tecnoloxías de asistencia.

A técnica exacta que se utilizará (elementos visibles <label>, <label>elementos ocultos mediante a .sr-onlyclase ou uso do atributo aria-label, aria-labelledby, aria-describedby, titleou placeholder) e a información adicional que se debe transmitir variará dependendo do tipo exacto de widget de interface que esteas a implementar. Os exemplos desta sección proporcionan algúns enfoques suxeridos e específicos para cada caso.

Exemplo básico

Coloque un complemento ou botón a cada lado dunha entrada. Tamén pode colocar un a ambos os dous lados dunha entrada.

Non admitimos varios complementos ( .input-group-addonou .input-group-btn) nun só lado.

Non admitimos varios controis de formulario nun só grupo de 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

Engade as clases relativas de tamaño do formulario ao .input-grouppropio e os contidos dentro redimensionaranse automaticamente, sen necesidade de repetir as clases de tamaño de control do formulario en cada elemento.

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

Caixas de verificación e complementos de radio

Coloque calquera caixa de verificación ou opción de radio dentro do complemento dun grupo de entrada en lugar de texto.

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

Complementos de botón

Os botóns dos grupos de entrada son un pouco diferentes e requiren un nivel adicional de aniñación. En lugar de .input-group-addon, terás que usar .input-group-btnpara envolver os botóns. Isto é necesario debido aos estilos de navegador predeterminados que non se poden anular.

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

Botóns con menú despregable

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

Botóns segmentados

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

Varios botóns

Aínda que só podes ter un complemento por lado, podes ter varios botóns dentro dun só .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>

Os navegadores dispoñibles en Bootstrap teñen marcado compartido, comezando pola .navclase base, así como estados compartidos. Cambia as clases modificadoras para cambiar entre cada estilo.

O uso de navs para paneis de pestanas require un complemento de pestanas de JavaScript

Para as pestanas con áreas con pestanas, debes usar o complemento JavaScript de pestanas . O marcado tamén requirirá roleatributos adicionais e ARIA; consulte o exemplo de marcado do complemento para obter máis detalles.

Fai que os navegadores utilizados como navegación sexan accesibles

Se estás a usar navs para proporcionar unha barra de navegación, asegúrate de engadir un role="navigation"ao contenedor principal máis lóxico do <ul>, ou envolve un <nav>elemento en toda a navegación. Non engadas o papel ao <ul>propio, xa que isto evitaría que sexa anunciado como unha lista real polas tecnoloxías de asistencia.

Fichas

Teña en conta que a .nav-tabsclase require a .navclase 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>

Pastillas

Tome o mesmo HTML, pero use no seu .nav-pillslugar:

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

As pílulas tamén son apilables verticalmente. Só engade .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Xustificada

Fai facilmente as pestanas ou as pílulas do mesmo ancho do seu pai en pantallas de máis de 768 píxeles con .nav-justified. Nas pantallas máis pequenas, as ligazóns de navegación están apiladas.

Actualmente non se admiten as ligazóns de navegación da barra de navegación xustificadas.

Safari e navegacións xustificadas sensibles

A partir da versión 9.1.2, Safari presenta un erro no que cambiar o tamaño do teu navegador de xeito horizontal provoca erros de renderización na navegación xustificada que se borran ao actualizar. Este erro tamén se mostra no exemplo de navegación xustificada .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Ligazóns desactivadas

Para calquera compoñente de navegación (pestañas ou pílulas), engade ligazóns grises e sen efectos.disabled de paso .

A función da ligazón non se viu afectada

Esta clase só cambiará a <a>aparencia de ', non a súa funcionalidade. Usa JavaScript personalizado para desactivar as ligazóns aquí.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Usando menú despregable

Engade menús despregables cun HTML extra e o complemento JavaScript para menús despregables .

Pestanas con menú despregable

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

Pastillas con menú despregable

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

As barras de navegación son metacomponentes sensibles que serven como cabeceiras de navegación para a súa aplicación ou sitio. Comezan contraídos (e pódense alternar) nas vistas móbiles e vólvense horizontais a medida que aumenta o ancho da xanela dispoñible.

Actualmente non se admiten as ligazóns de navegación da barra de navegación xustificadas.

Contido desbordado

Dado que Bootstrap non sabe canto espazo necesita o contido da túa barra de navegación, podes ter problemas coa inclusión do contido nunha segunda fila. Para resolver isto, pode:

Reduce a cantidade ou o ancho dos elementos da barra de navegación.
Ocultar certos elementos da barra de navegación en determinados tamaños de pantalla usando clases de utilidade receptivas .
Cambia o punto no que a túa barra de navegación cambia entre o modo contraído e o modo horizontal. Personaliza a @grid-float-breakpointvariable ou engade a túa propia consulta multimedia.

Cambiando o punto de interrupción da barra de navegación móbil contraída

A barra de navegación colapsa na súa vista móbil vertical cando a ventá é máis estreita que @grid-float-breakpoint, e expándese á súa vista horizontal non móbil cando a ventá ten polo menos un @grid-float-breakpointancho. Axusta esta variable na fonte Menos para controlar cando se contrae ou se expande a barra de navegación. O valor predeterminado é 768px(a pantalla máis pequena "pequena" ou "tableta").

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

Substitúe a marca da barra de navegación pola súa propia imaxe cambiando o texto por un <img>. Dado .navbar-brandque ten o seu propio recheo e altura, é posible que teñas que anular algúns CSS dependendo da túa imaxe.

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

Coloca o contido do formulario dentro .navbar-formpara un aliñamento vertical adecuado e un comportamento contraído en ventás estreitas. Use as opcións de aliñamento para decidir onde reside dentro do contido da barra de navegación.

Como aviso, .navbar-formcomparte gran parte do seu código .form-inlinemediante mixin. Algúns controis de formulario, como os grupos de entrada, poden requirir que os anchos fixos se mostren correctamente nunha barra de navegación.

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

Engade sempre etiquetas

Os lectores de pantalla terán problemas cos teus formularios se non inclúes unha etiqueta para cada entrada. Para estes formularios en liña, pode ocultar as etiquetas usando a .sr-onlyclase. Existen outros métodos alternativos para proporcionar unha etiqueta para tecnoloxías de asistencia, como o atributo aria-label, aria-labelledbyou . titleSe ningún destes está presente, os lectores de pantalla poden recorrer ao uso do placeholderatributo, se está presente, pero teña en conta que placeholdernon se recomenda o uso de como substituto doutros métodos de etiquetaxe.

Engade a .navbar-btnclase aos <button>elementos que non residen nun <form>para centralos verticalmente na barra de navegación.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Envolve as cadeas de texto nun elemento con .navbar-text, xeralmente nunha <p>etiqueta para a interlineado e a cor adecuadas.

<p class="navbar-text">Signed in as Mark Otto</p>

Para as persoas que usan ligazóns estándar que non están dentro do compoñente de navegación da barra de navegación normal, use a .navbar-linkclase para engadir as cores adecuadas para as opcións da barra de navegación predeterminada e inversa.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Aliñar ligazóns de navegación, formularios, botóns ou texto, utilizando as clases de utilidade .navbar-leftou . .navbar-rightAmbas clases engadirán un flotante CSS na dirección especificada. Por exemplo, para aliñar as ligazóns de navegación, colócaas nun separado <ul>coa clase de utilidade respectiva aplicada.

Estas clases son versións mixtas de .pull-lefte .pull-right, pero están destinadas a consultas multimedia para facilitar o manexo dos compoñentes da barra de navegación en todos os tamaños de dispositivos.

Engade .navbar-fixed-tope inclúa un .containerou .container-fluidao contido da barra de navegación para centrar e pad.

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

Requírese acolchado corporal

A barra de navegación fixa sobrepoñerase ao teu outro contido, a non ser que o engadas paddingna parte superior do ficheiro <body>. Proba os teus propios valores ou usa o noso fragmento a continuación. Consello: Por defecto, a barra de navegación ten 50 píxeles de alto.

body { padding-top: 70px; }

Asegúrate de incluír isto despois do núcleo Bootstrap CSS.

Engade .navbar-fixed-bottome inclúa un .containerou .container-fluidao contido da barra de navegación para centrar e pad.

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

Requírese acolchado corporal

A barra de navegación fixa sobrepoñerase ao teu outro contido, a non ser que o engadas paddingá parte inferior do ficheiro <body>. Proba os teus propios valores ou usa o noso fragmento a continuación. Consello: Por defecto, a barra de navegación ten 50 píxeles de alto.

body { padding-bottom: 70px; }

Asegúrate de incluír isto despois do núcleo Bootstrap CSS.

Crea unha barra de navegación de ancho completo que se desprace coa páxina engadindo .navbar-static-tope incluíndo un .containerou .container-fluidpara centrar e rellenar o contido da barra de navegación.

A diferenza das .navbar-fixed-*clases, non necesitas cambiar ningún recheo no body.

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

Modifique o aspecto da barra de navegación engadindo .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

Migas de pan

Indique a localización da páxina actual dentro dunha xerarquía de navegación.

Os separadores engádense automaticamente en CSS mediante :beforee content.

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

Paxinación

Proporciona ligazóns de paxinación para o teu sitio ou aplicación co compoñente de paxinación de varias páxinas ou a alternativa de paginación máis sinxela .

Paxinación predeterminada

Paxinación sinxela inspirada en Rdio, ideal para aplicacións e resultados de busca. O bloque grande é difícil de perder, facilmente escalable e ofrece grandes áreas 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 o compoñente de paxinación

O compoñente de paxinación debe estar envolto nun <nav>elemento para identificalo como unha sección de navegación para lectores de pantalla e outras tecnoloxías de asistencia. Ademais, como é probable que unha páxina teña xa máis dunha sección de navegación deste tipo (como a navegación principal na cabeceira ou a navegación na barra lateral), é recomendable proporcionar unha descripción que reflicta aria-labelo <nav>seu propósito. Por exemplo, se o compoñente de paxinación se usa para navegar entre un conxunto de resultados de busca, unha etiqueta adecuada podería ser aria-label="Search results pages".

Estados activos e desactivados

As ligazóns son personalizables para diferentes circunstancias. Utilízao .disabledpara ligazóns que non se pode facer clic e .activepara indicar a páxina 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>

Recomendamos que cambie as áncoras activas ou desactivadas por <span>, ou omita a áncora no caso das frechas anteriores ou seguintes, para eliminar a función de clic mantendo os estilos 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

Queres unha paxinación máis grande ou máis pequena? Engadir .pagination-lgou .pagination-smpara tamaños adicionais.

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

Buscapersonas

Ligazóns anteriores e seguintes rápidas para implementacións de paxinación sinxelas con marcas e estilos lixeiros. É ideal para sitios sinxelos como blogs ou revistas.

Exemplo predeterminado

Por defecto, o buscapersonas centra as ligazóns.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Ligazóns aliñadas

Alternativamente, pode aliñar cada ligazón aos lados:

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

Estado opcional desactivado

As ligazóns de paginación tamén usan a .disabledclase de utilidade xeral da paginación.

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

Exemplo

Exemplo de título Novo

<h3>Example heading <span class="label label-default">New</span></h3>

Variacións dispoñibles

Engade calquera das clases modificadoras mencionadas a continuación para cambiar o aspecto dunha etiqueta.

Información de éxito principal predeterminada Aviso Perigo

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

Tes toneladas de etiquetas?

Os problemas de renderización poden xurdir cando tes decenas de etiquetas en liña nun recipiente estreito, cada unha contén o seu propio inline-blockelemento (como unha icona). O xeito de evitar isto é a configuración display: inline-block;. Para o contexto e un exemplo, consulte #13219 .

Resalte facilmente elementos novos ou non lidos engadindo un <span class="badge">ás ligazóns, navegacións Bootstrap e moito máis.

Caixa de 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 colapso

Cando non haxa elementos novos ou sen ler, as insignias simplemente colapsarán (a través do :emptyselector de CSS) sempre que non exista contido.

Compatibilidade entre navegadores

As insignias non se colapsarán automaticamente en Internet Explorer 8 porque carece de compatibilidade co :emptyselector.

Adáptase aos estados de navegación activos

Inclúense estilos integrados para colocar distintivos en estados activos nas navegacións de pílulas.

<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 compoñente lixeiro e flexible que, opcionalmente, pode ampliar toda a ventana gráfica para mostrar o contido clave do teu sitio.

Ola, mundo!

Esta é unha unidade de heroe sinxela, un simple compoñente de estilo jumbotron para chamar máis atención ao contido ou información destacados.

Aprender máis

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

Para que o jumbotron teña o ancho total e sen esquinas redondeadas, colócao fóra de todos os .containers e, no seu lugar, engade un .containerdentro.

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

Un shell sinxelo para h1espaciar e segmentar adecuadamente seccións de contido nunha páxina. Pode utilizar o elemento h1predeterminado de ' small, así como a maioría dos outros compoñentes (con estilos adicionais).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Estende o sistema de grade de Bootstrap co compoñente de miniaturas para mostrar facilmente cuadrículas de imaxes, vídeos, texto e moito máis.

Se estás a buscar unha presentación de miniaturas tipo Pinterest de diferentes alturas e/ou anchos, terás que usar un complemento de terceiros como Masonry , Isotope ou Salvattore .

Exemplo predeterminado

De xeito predeterminado, as miniaturas de Bootstrap están deseñadas para mostrar as imaxes vinculadas cun marcado mínimo necesario.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Contido personalizado

Cun pouco de marcado adicional, é posible engadir calquera tipo de contido HTML como títulos, parágrafos ou botóns nas miniaturas.

Etiqueta en miniatura

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

Botón Botón

Etiqueta en miniatura

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

Botón Botón

Etiqueta en miniatura

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

Botón Botón

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

Proporcione mensaxes de comentarios contextuais para as accións típicas dos usuarios cun puñado de mensaxes de alerta dispoñibles e flexibles.

Exemplos

Envolve calquera texto e un botón de exclusión opcional .alertnunha das catro clases contextuais (por exemplo, .alert-success) para as mensaxes de alerta básicas.

Sen clase predeterminada

As alertas non teñen clases predeterminadas, só clases base e modificadora. Unha alerta gris predeterminada non ten demasiado sentido, polo que tes que especificar un tipo mediante unha clase contextual. Escolle entre éxito, información, aviso ou perigo.

Ben feito! Leu correctamente esta importante mensaxe de alerta.

Aviso! Esta alerta precisa da túa atención, pero non é moi importante.

Aviso! É mellor verifícate a ti mesmo, non tes demasiado bo aspecto.

¡Oh snap! Cambia algunhas cousas e tenta enviar de novo.

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

Alertas descartables

Constrúe calquera alerta engadindo un .alert-dismissiblebotón opcional e pechar.

Require un complemento de alerta de JavaScript

Para que as alertas non sexan totalmente funcionales, debes usar o complemento JavaScript de alertas .

Aviso! É mellor verifícate a ti mesmo, non tes demasiado bo aspecto.

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

Garantir un comportamento adecuado en todos os dispositivos

Asegúrate de usar o <button>elemento co data-dismiss="alert"atributo data.

Ligazóns nas alertas

Use a .alert-linkclase de utilidade para proporcionar rapidamente ligazóns de cores coincidentes en calquera alerta.

Ben feito! Leu correctamente esta importante mensaxe de alerta .

Aviso! Esta alerta precisa da túa atención , pero non é moi importante.

Aviso! É mellor comprobar vostede mesmo, non está moi ben .

¡Oh! Cambia algunhas cousas e tenta enviar de novo.

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

Proporciona comentarios actualizados sobre o progreso dun fluxo de traballo ou acción con barras de progreso sinxelas pero flexibles.

Compatibilidade entre navegadores

As barras de progreso usan transicións e animacións CSS3 para conseguir algúns dos seus efectos. Estas funcións non son compatibles con Internet Explorer 9 e anteriores nin con versións anteriores de Firefox. Opera 12 non admite animacións.

Compatibilidade con Política de seguranza de contido (CSP).

Se o teu sitio web ten unha Política de seguranza de contido (CSP) que non permite style-src 'unsafe-inline', non poderás utilizar styleatributos en liña para establecer o ancho das barras de progreso como se mostra nos nosos exemplos a continuación. Os métodos alternativos para configurar os anchos que son compatibles con CSP estritos inclúen usar un pouco de JavaScript personalizado (que establece element.style.width) ou usar clases CSS personalizadas.

Exemplo básico

Barra de progreso 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>

Con etiqueta

Elimina a clase <span>with .sr-onlyda barra de progreso para mostrar unha porcentaxe 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>

Para asegurarse de que o texto da etiqueta segue sendo lexible mesmo en porcentaxes baixas, considere engadir un min-widthá barra de progreso.

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>

Alternativas contextuais

As barras de progreso usan algúns dos mesmos botóns e clases de alerta para estilos consistentes.

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

Raias

Usa un degradado para crear un efecto de raias. Non dispoñible en IE9 e abaixo.

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

Animado

Engadir .activea .progress-bar-stripedpara animar as raias de dereita a esquerda. Non dispoñible en IE9 e abaixo.

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

Apilados

Coloca varias barras no mesmo .progresspara apilalas.

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

Estilos de obxectos abstractos para construír varios tipos de compoñentes (como comentarios de blog, chíos, etc.) que presentan unha imaxe aliñada á esquerda ou á dereita xunto con contido textual.

Medios predeterminados

O medio predeterminado mostra un obxecto multimedia (imaxes, vídeo, audio) á esquerda ou á dereita dun bloque de contido.

Título multimedia

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.

Título multimedia

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.

Título multimedia anidado

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.

Título multimedia

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.

Título multimedia

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>

As clases .pull-lefte .pull-righttamén existen e usáronse anteriormente como parte do compoñente multimedia, pero están en desuso para ese uso a partir da versión 3.3.0. Son aproximadamente equivalentes a .media-lefte .media-right, excepto que .media-rightdeberían colocarse despois do .media-bodyno html.

Aliñación de medios

As imaxes ou outros medios pódense aliñar arriba, no medio ou abaixo. O valor predeterminado está aliñado na parte superior.

Medios aliñados na parte 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.

Medios aliñados ao medio

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.

Medios aliñados na parte 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>

Lista de medios

Cun pouco de marcado extra, podes usar a lista de medios dentro (útil para os fíos de comentarios ou as listas de artigos).

Título multimedia

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.

Título multimedia anidado
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.

Título multimedia anidado
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.

Título multimedia anidado
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>

Os grupos de listas son un compoñente flexible e poderoso para mostrar non só listas simples de elementos, senón tamén complexas con contido personalizado.

Exemplo básico

O grupo de listas máis básico é simplemente unha lista sen ordenar con elementos de lista e as clases adecuadas. Constrúeo coas opcións que seguen ou o teu propio CSS segundo sexa necesario.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestíbulo no 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>

Insignias

Engade o compoñente de insignias a calquera elemento do grupo da lista e situarase automaticamente á dereita.

14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Elementos vinculados

Vincule os elementos do grupo da lista usando etiquetas de ancoraxe en lugar de elementos da lista (iso tamén significa un pai <div>en lugar de un <ul>). Non hai necesidade de pais individuais arredor de cada elemento.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestíbulo no 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>

Elementos de botón

Os elementos do grupo da lista poden ser botóns en lugar de elementos da lista (iso tamén significa un pai <div>en lugar de un <ul>). Non hai necesidade de pais individuais arredor de cada elemento. Non use as .btnclases estándar 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>

Elementos desactivados

Engádeo .disableda a .list-group-itempara que apareza desactivado.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestíbulo no 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>

Clases contextuais

Use clases contextuais para dar estilo aos elementos da lista, predeterminados ou vinculados. Tamén inclúe .activeestado.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestíbulo no eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestíbulo no 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>

Contido personalizado

Engade case calquera HTML dentro, mesmo para grupos de listas vinculadas como o seguinte.

Encabezamento do elemento do grupo da lista

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

Encabezamento do elemento do grupo da lista

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

Encabezamento do elemento do grupo da lista

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>

Aínda que non sempre é necesario, ás veces necesitas poñer o teu DOM nunha caixa. Para esas situacións, proba o compoñente do panel.

Exemplo básico

Por defecto, todo o .panelque fai é aplicar un bordo básico e un recheo para conter algún contido.

Exemplo de panel básico

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel con título

Engade facilmente un recipiente de título ao teu panel con .panel-heading. Tamén pode incluír calquera <h1>- <h6>cunha .panel-titleclase para engadir un título predefinido. Non obstante, os tamaños de letra de <h1>- <h6>son substituídos por .panel-heading.

Para colorear correctamente as ligazóns, asegúrate de colocar as ligazóns nos títulos dentro de .panel-title.

Título do panel sen título

Contido do panel

Título do panel

Contido do panel

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

Panel con pé de páxina

Axustar botóns ou texto secundario en .panel-footer. Teña en conta que os pés de páxina dos paneis non herdan cores e bordos cando se usan variacións contextuais xa que non están destinados a estar en primeiro plano.

Contido do panel

Pé de páxina do panel

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

Alternativas contextuais

Do mesmo xeito que outros compoñentes, fai facilmente un panel máis significativo para un contexto particular engadindo calquera das clases de estado contextuais.

Título do panel

Contido do panel

Título do panel

Contido do panel

Título do panel

Contido do panel

Título do panel

Contido do panel

Título do panel

Contido do panel

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

Con mesas

Engade calquera que non teña bordes .tabledentro dun panel para un deseño perfecto. Se hai un .panel-body, engadimos un bordo extra na parte superior da táboa para a separación.

Título do panel

Algún contido do panel predeterminado aquí. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@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>

Se non hai corpo do panel, o compoñente móvese da cabeceira do panel á táboa sen interrupción.

Título do panel

#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

Con grupos de listas

Inclúe facilmente grupos de listas de ancho completo dentro de calquera panel.

Título do panel

Algún contido do panel predeterminado aquí. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestíbulo no 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>

Permite que os navegadores determinen as dimensións do vídeo ou da presentación de diapositivas en función da anchura do bloque que o contén creando unha relación intrínseca que se escalará correctamente en calquera dispositivo.

As regras aplícanse directamente aos elementos <iframe>, <embed>, <video>, e <object>; opcionalmente use unha clase descendente explícita .embed-responsive-itemcando quere facer coincidir o estilo doutros atributos.

Pro-Tip! Non é necesario que inclúas frameborder="0"nas túas <iframe>s xa que o anulamos por ti.

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

Ben por defecto

Use o pozo como un efecto sinxelo sobre un elemento para darlle un efecto de inserción.

Mira, estou nun pozo!

<div class="well">...</div>

Clases optativas

Controla o recheo e as esquinas redondeadas con dúas clases de modificadores opcionais.

Mira, estou nun pozo grande!

<div class="well well-lg">...</div>

Mira, estou nun pozo pequeno!

<div class="well well-sm">...</div>

Compoñentes

Glifos

Glifos dispoñibles

Como empregar

Non mesturar con outros compoñentes

Só para usar en elementos baleiros

Cambiando a localización da fonte da icona

Iconas accesibles

Exemplos

Despregables

Exemplo

Aliñación

Pode requirir un posicionamento adicional

.pull-rightAliñación obsoleta

Cabeceiras

Divisor

Elementos de menú desactivados

Grupos de botóns

As informacións sobre ferramentas e as ventás emerxentes nos grupos de botóns requiren unha configuración especial

Asegúrese de ser correcto rolee proporcionar unha etiqueta

Exemplo básico

Barra de ferramentas de botóns

Talla

Aniñación

Variación vertical

Grupos de botóns xustificados

Manexo de fronteiras

IE8 e bordos

Con <a>elementos

Ligazóns que actúan como botóns

Con <button>elementos

Menú despregable de botóns

Dependencia do complemento

Menú despregable dun só botón

Dividir menú despregable de botóns

Talla

Variación de caída

Grupos de entrada

<input>Só textual

As informacións sobre ferramentas e as ventás emerxentes nos grupos de entrada requiren unha configuración especial

Non mesturar con outros compoñentes

Engade sempre etiquetas

Exemplo básico

Talla

Caixas de verificación e complementos de radio

Complementos de botón

Botóns con menú despregable

Botóns segmentados

Varios botóns

Navs

O uso de navs para paneis de pestanas require un complemento de pestanas de JavaScript

Fai que os navegadores utilizados como navegación sexan accesibles

Fichas

Pastillas

Xustificada

Safari e navegacións xustificadas sensibles

Ligazóns desactivadas

A función da ligazón non se viu afectada

Usando menú despregable

Pestanas con menú despregable

Pastillas con menú despregable

Barra de navegación

Barra de navegación predeterminada

Contido desbordado

Require un complemento de JavaScript

Cambiando o punto de interrupción da barra de navegación móbil contraída

Facer accesibles as barras de navegación

Imaxe de marca

Formularios

Advertencias dos dispositivos móbiles

Engade sempre etiquetas

Botóns

Uso específico do contexto

Texto

Ligazóns que non son de navegación

Aliñación de compoñentes

Aliñando á dereita varios compoñentes

Fixado na parte superior

Requírese acolchado corporal

Fixo ao fondo

`.pull-right`Aliñación obsoleta

Asegúrese de ser correcto `role`e proporcionar unha etiqueta

Con `<a>`elementos

Con `<button>`elementos

`<input>`Só textual