Glifos disponibles

Incluye más de 250 glifos en formato de fuente del conjunto Glyphicon Halflings. Glyphicons Halflings normalmente no están disponibles de forma gratuita, pero su creador los ha puesto a disposición para Bootstrap sin costo alguno. Como agradecimiento, solo le pedimos que incluya un enlace a Glyphicons siempre que sea posible.

glyphicon glyphicon-asterisco
glyphicon glyphicon plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon menos
glyphicon nube de glyphicon
glyphicon sobre de glyphicon
glyphicon glyphicon-lápiz
glyphicon vidrio de glyphicon
glyphicon glyphicon-music
glyphicon búsqueda de glyphicon
glyphicon glyphicon-corazón
glyphicon glyphicon-estrella
glyphicon glyphicon-star-vacío
glyphicon usuario de glyphicon
GlyphiconPelícula de glyphiconFantasía
glyphicon glyphicon-th-grande
glyphicon glyphicon-th
glyphicon glyphicon-th-lista
glyphicon glyphicon-ok
glyphicon glyphicon-eliminar
glyphicon glyphicon-zoom-in
glyphicon glyphicon-alejar
glyphicon glyphicon-apagado
glyphicon señal de glyphicon
glyphicon glyphicon-cog
glyphicon glyphicon-basura
glyphicon inicio-de-glyphicon
glyphicon archivo de glyphicon
glyphicon tiempo de glyphicon
glyphicon glyphicon-camino
glyphicon glyphicon-descargar-alt
descargar glyphicon
glyphicon subir glyphicon
Bandeja de entrada de glyphicon
glyphicon glyphicon-reproducir-círculo
glyphicon repetición de glyphicon
actualización de glyphicon
glyphicon glyphicon-lista-alt
bloqueo de glyphicon
glyphicon bandera de glyphicon
glyphicon auriculares-glyphicon
glyphicon glyphicon-volumen-apagado
glyphicon glyphicon-volumen-abajo
glyphicon glyphicon-subir-volumen
glyphicon glyphicon-qrcode
glyphicon código de barras glyphicon
etiqueta de glyphicon
glyphicon etiquetas de glyphicon
glyphicon libro-glyphicon
Marcador de glyphicon
glyphicon-impresión de glyphicon
glyphicon cámara-glyphicon
glyphicon fuente de glyphicon
glyphicon glyphicon-negrita
glyphicon glyphicon-cursiva
glyphicon glyphicon-text-height
glyphicon ancho de texto de glyphicon
glyphicon glyphicon-alinear-izquierda
glyphicon glyphicon-alinear-centro
glyphicon glyphicon-alinear-derecha
glyphicon glyphicon-alinear-justificar
glyphicon lista de glyphicons
glyphicon glyphicon-guión-izquierda
glyphicon glyphicon-sangría-derecha
glyphicon glyphicon-facetime-video
glyphicon imagen de glyphicon
glyphicon marcador de mapa de glyphicon
glyphicon ajuste de glyphicon
glyphicon tinte de glyphicon
editar glyphicon
glyphicon compartir glyphicon
verificación de glyphicon
glyphicon movimiento de glyphicon
glyphicon glyphicon-paso-hacia atrás
glyphicon glyphicon-retroceso rápido
glyphicon glyphicon-hacia atrás
glyphicon jugar con glyphicon
pausa de glyphicon
glyphicon parada de glyphicon
glyphicon glyphicon-adelante
glyphicon avance rápido de glyphicon
glyphicon glyphicon-paso-adelante
glyphicon glyphicon-expulsar
glyphicon glyphicon-chevron-izquierda
glyphicon glyphicon-chevron-derecha
glyphicon glyphicon-más-signo
glyphicon glyphicon-signo-menos
glyphicon glyphicon-eliminar-signo
glyphicon glyphicon-ok-signo
glyphicon glyphicon-signo-de-pregunta
glyphicon glyphicon-info-signo
glyphicon captura de pantalla de glyphicon
glyphicon glyphicon-eliminar-círculo
glyphicon glyphicon-ok-círculo
círculo de prohibición de glyphicon
glyphicon glyphicon-flecha izquierda
glyphicon glyphicon-flecha-derecha
glyphicon glyphicon-flecha hacia arriba
glyphicon glyphicon-flecha hacia abajo
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-redimensionar-pequeño
glyphicon glyphicon-signo-de-exclamación
regalo de glyphicon
glyphicon hoja de glyphicon
glyphicon glyphicon-fuego
glyphicon glyphicon-ojo-abierto
glyphicon glyphicon-ojo-cerrar
glyphicon señal-de-advertencia-glyphicon
glyphicon plano-glyphicon
Calendario de glyphicon
glyphicon glyphicon-aleatorio
comentario de glyphicon
glyphicon glyphicon-imán
glyphicon glyphicon-cheurón-arriba
glyphicon glyphicon-chevron-abajo
glyphicon glyphicon-retweet
glyphicon glyphicon-carrito-de-compras
glyphicon glyphicon-carpeta-cerrar
glyphicon glyphicon-carpeta-abierta
glyphicon glyphicon-redimensionar-vertical
glyphicon glyphicon-redimensionar-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-megáfono
glyphicon glyphicon-campana
certificado de glyphicon
glyphicon glyphicon-pulgar hacia arriba
glyphicon glyphicon-pulgar-abajo
glyphicon glyphicon-mano-derecha
glyphicon glyphicon-mano-izquierda
glyphicon glyphicon-mano-arriba
glyphicon glyphicon-hand-down
glyphicon glyphicon-círculo-flecha-derecha
glyphicon glyphicon-círculo-flecha-izquierda
glyphicon glyphicon-círculo-flecha hacia arriba
glyphicon glyphicon-círculo-flecha-abajo
glyphicon glyphicon-globe
Llave inglesa de glyphicon
glyphicon tareas de glyphicon
glyphicon filtro de glyphicon
glyphicon maletín de glyphicon
glyphicon glyphicon-pantalla completa
Panel de control de glyphicon
glyphicon clip-de-glyphicon
glyphicon glyphicon-corazón-vacío
enlace de glyphicon
glyphicon glyphicon-teléfono
glyphicon glyphicon-chincheta
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon tipo de glyphicon
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-sin marcar
glyphicon glyphicon-expandir
glyphicon glyphicon-colapso-abajo
glyphicon glyphicon-colapso-up
glyphicon iniciar sesión en glyphicon
glyphicon glyphicon-flash
glyphicon cerrar sesión en glyphicon
glyphicon glyphicon-nueva-ventana
registro de glyphicon
glyphicon guardar glyphicon
glyphicon glyphicon-abierto
glyphicon guardado en glyphicon
Importación de glyphicon
exportación de glyphicon
enviar glyphicon
glyphicon disquete de glyphicon
glyphicon glyphicon-floppy-guardado
glyphicon glyphicon-floppy-quitar
glyphicon glyphicon-disquete-guardar
glyphicon glyphicon-disquete-abierto
glyphicon glyphicon-tarjeta-de-credito
transferencia de glyphicon
glyphicon cubiertos-glyphicon
encabezado de glyphicon
glyphicon comprimido con glyphicon
glyphicon glyphicon-auricular
glyphicon glyphicon-teléfono-alt
glyphicon torre de glyphicon
glyphicon estadísticas de glyphicon
glyphicon glyphicon-sd-video
glyphicon glyphicon-video-hd
glyphicon glyphicon-subtítulos
glyphicon glyphicon-sonido-estéreo
glyphicon glyphicon-sonido-dolby
glyphicon glyphicon-sonido-5-1
glyphicon glyphicon-sonido-6-1
glyphicon glyphicon-sonido-7-1
glyphicon marca de derechos de autor de glyphicon
glyphicon marca-de-registro-glyphicon
glyphicon-descarga-de-la-nube-de-glyphicon
glyphicon glyphicon-nube-subir
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-árbol-caducifolio
glyphicon glyphicon-cd
glyphicon glyphicon-guardar-archivo
glyphicon glyphicon-archivo-abierto
glyphicon subir de nivel de glyphicon
glyphicon copia de glyphicon
glyphicon pasta de glyphicon
alerta de glyphicon
glyphicon ecualizador de glyphicon
glyphicon glyphicon-rey
glyphicon glyphicon-reinaFantasía
peón de glyphicon
glyphicon obispo-glyphicon
glyphicon glyphicon-caballero
glyphicon glyphicon-bebé-fórmula
glyphicon carpa-glyphicon
glyphicon glyphicon-pizarra
cama de glyphicon
glyphicon glyphicon-manzana
borrar glyphicon
glyphicon glyphicon-reloj de arena
glyphicon glyphicon-lámpara
glyphicon duplicado de glyphicon
glyphicon glyphicon-hucha
GlyphiconTijeras-glyphiconFísica
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rublo
glyphicon frotar con glyphicon
glyphicon escala de glyphicon
glyphicon glyphicon-palo de hielo
glyphicon glyphicon-ice-lolly-sated
glyphicon glyphicon-educación
glyphicon glyphicon-opción-horizontal
glyphicon glyphicon-opción-vertical
glyphicon glyphicon-menu-hamburguesa
glyphicon glyphicon-ventana-modal
glyphicon aceite de glyphicon
glyphicon grano de glyphicon
glyphicon glyphicon-gafas de sol
glyphicon tamaño de texto de glyphicon
glyphicon glyphicon-texto-color
glyphicon glyphicon-fondo-de-texto
glyphicon glyphicon-objeto-alinear-superior
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-objeto-alinear-vertical
glyphicon glyphicon-objeto-alinear-derecha
glyphicon glyphicon-triángulo-derecho
glyphicon glyphicon-triangulo-izquierda
glyphicon glyphicon-triángulo-inferior
glyphicon glyphicon-triángulo-top
glyphicon consola de glyphicon
glyphicon superíndice de glyphicon
glyphicon subíndice de glyphicon
glyphicon glyphicon-menú-izquierda
glyphicon glyphicon-menú-derecha
glyphicon glyphicon-menú-abajo
glyphicon glyphicon-menú-arriba

Cómo utilizar

Por razones de desempeño, todos los iconos requieren una clase base y clases de iconos individuales. Para usar, coloque el siguiente código en cualquier lugar. Asegúrese de dejar un espacio entre el icono y el texto para el acolchado apropiado.

No mezclar con otros componentes.

Las clases de iconos no se pueden combinar directamente con otros componentes. No deben usarse junto con otras clases en el mismo elemento. En su lugar, agregue un anidado <span>y aplique las clases de iconos al archivo <span>.

Solo para uso en elementos vacíos.

Las clases de iconos solo deben usarse en elementos que no contienen contenido de texto y no tienen elementos secundarios.

Cambiar la ubicación de la fuente del icono

Bootstrap asume que los archivos de fuentes de iconos se ubicarán en el ../fonts/directorio, en relación con los archivos CSS compilados. Mover o cambiar el nombre de esos archivos de fuentes significa actualizar el CSS de una de estas tres maneras:

Cambie las variables @icon-font-pathy/o @icon-font-nameen los archivos Less de origen.
Utilice la opción de direcciones URL relativas proporcionada por el compilador Less.
Cambie las url()rutas en el CSS compilado.

Utilice la opción que mejor se adapte a su configuración de desarrollo específica.

Iconos accesibles

Las versiones modernas de tecnologías de asistencia anunciarán contenido generado por CSS, así como caracteres Unicode específicos. Para evitar resultados imprevistos y confusos en los lectores de pantalla (particularmente cuando los íconos se usan únicamente como decoración), los ocultamos con el aria-hidden="true"atributo.

Si está utilizando un ícono para transmitir significado (en lugar de solo como un elemento decorativo), asegúrese de que este significado también se transmita a las tecnologías de asistencia; por ejemplo, incluya contenido adicional, oculto visualmente con la .sr-onlyclase.

Si está creando controles sin otro texto (como uno <button>que solo contiene un ícono), siempre debe proporcionar contenido alternativo para identificar el propósito del control, de modo que tenga sentido para los usuarios de tecnologías de asistencia. En este caso, podría agregar un aria-labelatributo en el propio control.

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

Ejemplos

Úselos en botones, grupos de botones para una barra de herramientas, navegación o entradas de formulario antepuestas.

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

Un ícono que se usa en una alerta para transmitir que es un mensaje de error, con .sr-onlytexto adicional para transmitir esta sugerencia a los usuarios de tecnologías de asistencia.

Introduzca una dirección de correo electrónico válida

<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 enlaces. Hecho interactivo con el complemento de JavaScript desplegable .

Ejemplo

Envuelva el activador del menú desplegable y el menú desplegable dentro .dropdownde u otro elemento que declare position: relative;. Luego agregue el 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>

Los menús desplegables se pueden cambiar para expandirse hacia arriba (en lugar de hacia abajo) al agregarlos .dropupal padre.

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

De forma predeterminada, un menú desplegable se coloca automáticamente al 100 % desde la parte superior y a lo largo del lado izquierdo de su elemento principal. Agregue .dropdown-menu-righta .dropdown-menupara alinear a la derecha el menú desplegable.

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

Encabezados

Agregue un encabezado para etiquetar secciones de acciones en cualquier menú desplegable.

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

Divisor

Agregue un divisor para separar series de enlaces en un menú desplegable.

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

Elementos de menú deshabilitados

Agregue .disableda un <li>en el menú desplegable para deshabilitar el enlace.

<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 una serie de botones en una sola línea con el grupo de botones. Agregue el comportamiento opcional de estilo de casilla de verificación y radio de JavaScript con nuestro complemento de botones .

La información sobre herramientas y las ventanas emergentes en los grupos de botones requieren una configuración especial

Al usar información sobre herramientas o ventanas emergentes en elementos dentro de un .btn-group, deberá especificar la opción container: 'body'para evitar efectos secundarios no deseados (como que el elemento se ensanche y/o pierda sus esquinas redondeadas cuando se activa la información sobre herramientas o la ventana emergente).

Asegúrese de que sea correcto `role`y proporcione una etiqueta

Para que las tecnologías de asistencia, como los lectores de pantalla, transmitan que una serie de botones está agrupada, rolese debe proporcionar un atributo apropiado. Para los grupos de botones, sería role="group", mientras que las barras de herramientas deberían tener una extensión role="toolbar".

Una excepción son los grupos que solo contienen un único control (por ejemplo, los grupos de botones justificados con <button>elementos) o un menú desplegable.

Además, los grupos y las barras de herramientas deben recibir una etiqueta explícita, ya que, de lo contrario, la mayoría de las tecnologías de asistencia no los anunciarán, a pesar de la presencia del roleatributo correcto. En los ejemplos proporcionados aquí, usamos , pero también se pueden usar aria-labelalternativas como .aria-labelledby

Ejemplo básico

Envuelve una serie de botones .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>

Combine conjuntos de <div class="btn-group">en a <div class="btn-toolbar">para componentes más complejos.

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

Dimensionamiento

En lugar de aplicar clases de tamaño de botón a cada botón de un grupo, simplemente agréguelo .btn-group-*a cada uno .btn-group, incluso al anidar 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>

Anidamiento

Coloque una .btn-groupdentro de otra .btn-groupcuando desee que los menús desplegables se mezclen con una serie de botones.

<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

Haga que un conjunto de botones aparezcan apilados verticalmente en lugar de horizontalmente. Los menús desplegables de botones divididos no son compatibles aquí.

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

Grupos de botones justificados

Haga que un grupo de botones se estire en tamaños iguales para abarcar todo el ancho de su padre. También funciona con botones desplegables dentro del grupo de botones.

Manejo de fronteras

Debido al HTML y CSS específicos que se usan para justificar los botones (es decir display: table-cell, ), los bordes entre ellos se duplican. En grupos de botones normales, margin-left: -1pxse utiliza para apilar los bordes en lugar de eliminarlos. Sin embargo, marginno funciona con display: table-cell. Como resultado, dependiendo de sus personalizaciones de Bootstrap, es posible que desee eliminar o volver a colorear los bordes.

IE8 y fronteras

Internet Explorer 8 no muestra los bordes de los botones en un grupo de botones justificado, ya sea en elementos <a>o <button>activados. Para evitar eso, envuelva cada botón en otro .btn-group.

Ver #12476 para más información.

con `<a>`elementos

Simplemente envuelva una serie de .btns en .btn-group.btn-group-justified.

Izquierda Medio Derecha

Izquierda Medio

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

Enlaces que actúan como botones

Si los <a>elementos se usan para actuar como botones, activando la funcionalidad en la página, en lugar de navegar a otro documento o sección dentro de la página actual, también se les debe dar un archivo role="button".

con `<button>`elementos

Para usar grupos de botones justificados con <button>elementos, debe envolver cada botón en un grupo de botones . La mayoría de los navegadores no aplican correctamente nuestro CSS para la justificación de los <button>elementos, pero dado que admitimos menús desplegables de botones, podemos solucionarlo.

<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 cualquier botón para activar un menú desplegable colocándolo dentro de .btn-groupy proporcionando el marcado de menú adecuado.

Dependencia del complemento

Los menús desplegables de botones requieren que el complemento desplegable se incluya en su versión de Bootstrap.

Menús desplegables de un solo botón

Convierta un botón en un menú desplegable con algunos 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>

Menús desplegables de botones divididos

Del mismo modo, cree menús desplegables de botones divididos con los mismos cambios de marcado, solo que con un 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>

Dimensionamiento

Los menús desplegables de botones funcionan con botones de todos los 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

Active los menús desplegables sobre los elementos al agregarlos .dropupal padre.

<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íe los controles de formulario agregando texto o botones antes, después o en ambos lados de cualquier archivo <input>. Úselo .input-groupcon .input-group-addono .input-group-btnpara anteponer o agregar elementos a un solo archivo .form-control.

Solo `<input>`textos

Evite usar <select>elementos aquí, ya que no se les puede aplicar un estilo completo en los navegadores WebKit.

Evite usar <textarea>elementos aquí ya que su rowsatributo no se respetará en algunos casos.

La información sobre herramientas y las ventanas emergentes en los grupos de entrada requieren una configuración especial

Al usar información sobre herramientas o ventanas emergentes en elementos dentro de un .input-group, deberá especificar la opción container: 'body'para evitar efectos secundarios no deseados (como que el elemento se ensanche y/o pierda sus esquinas redondeadas cuando se activa la información sobre herramientas o la ventana emergente).

No mezclar con otros componentes.

No mezcle grupos de formularios o clases de columnas de cuadrícula directamente con grupos de entrada. En su lugar, anide el grupo de entrada dentro del grupo de formularios o elemento relacionado con la cuadrícula.

Añade siempre etiquetas

Los lectores de pantalla tendrán problemas con sus formularios si no incluye una etiqueta para cada entrada. Para estos grupos de entrada, asegúrese de que cualquier etiqueta o funcionalidad adicional se transmita a las tecnologías de asistencia.

La técnica exacta que se usará (elementos visibles <label>, <label>elementos ocultos usando la .sr-onlyclase o el uso de , , aria-labelo aria-labelledbyatributo ) y qué información adicional deberá transmitirse variará según el tipo exacto de widget de interfaz que esté implementando. Los ejemplos de esta sección proporcionan algunos enfoques sugeridos para casos específicos.aria-describedbytitleplaceholder

Ejemplo básico

Coloque un complemento o botón a cada lado de una entrada. También puede colocar uno a ambos lados de una entrada.

No admitimos varios complementos ( .input-group-addono .input-group-btn) en un solo lado.

No admitimos múltiples controles de formulario en un solo 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>

Dimensionamiento

Agregue las clases de tamaño de formulario relativo al .input-groupmismo y el contenido dentro cambiará de tamaño automáticamente, sin necesidad de repetir las clases de tamaño de control de 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>

Casillas de verificación y complementos de radio

Coloque cualquier casilla de verificación u opción de radio dentro del complemento de un 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

Los botones en los grupos de entrada son un poco diferentes y requieren un nivel adicional de anidamiento. En lugar de .input-group-addon, deberá usar .input-group-btnpara envolver los botones. Esto es necesario debido a los estilos de navegador predeterminados que no se pueden 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 -->

Botones con menús 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 -->

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

Múltiples botones

Si bien solo puede tener un complemento por lado, puede tener varios botones dentro de un solo archivo .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>

Los navegadores disponibles en Bootstrap tienen marcado compartido, comenzando con la .navclase base, así como estados compartidos. Cambia las clases de modificadores para cambiar entre cada estilo.

El uso de navegadores para paneles de pestañas requiere el complemento de pestañas de JavaScript

Para las pestañas con áreas que se pueden tabular, debe usar el complemento JavaScript de pestañas . El marcado también requerirá roleatributos adicionales y ARIA; consulte el marcado de ejemplo del complemento para obtener más detalles.

Hacer que los navs utilizados como navegación sean accesibles

Si está utilizando navs para proporcionar una barra de navegación, asegúrese de agregar un role="navigation"al contenedor principal más lógico del <ul>, o ajuste un <nav>elemento alrededor de toda la navegación. No agregue el rol en <ul>sí mismo, ya que esto evitaría que las tecnologías de asistencia lo anuncien como una lista real.

Pestañas

Nota la.nav-tabs clase requiere la .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 ese mismo HTML, pero use en su .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>

Las pastillas también son apilables verticalmente. Solo .nav-stackedagrega

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

Justificado

Cree fácilmente pestañas o píldoras del mismo ancho que sus padres en pantallas de más de 768 px con.nav-justified . En pantallas más pequeñas, los enlaces de navegación están apilados.

Actualmente no se admiten los enlaces de navegación de la barra de navegación justificados.

Safari y navegación justificada receptiva

A partir de la versión 9.1.2, Safari presenta un error en el que cambiar el tamaño de su navegador horizontalmente provoca errores de representación en la navegación justificada que se borran al actualizar. Este error también se muestra en el ejemplo de navegación justificada .

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

Enlaces deshabilitados

Para cualquier componente de navegación (pestañas o píldoras), agregue enlaces grises y sin efectos.disabled de desplazamiento .

La funcionalidad del enlace no se ve afectada

Esta clase solo cambiará la <a>apariencia del , no su funcionalidad. Use JavaScript personalizado para deshabilitar enlaces aquí.

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

Usar menús desplegables

Agregue menús desplegables con un poco de HTML adicional y el complemento JavaScript de menús desplegables .

Pestañas con menús 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>

Pastillas con menús 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>

Las barras de navegación son metacomponentes receptivos que sirven como encabezados de navegación para su aplicación o sitio. Comienzan contraídos (y se pueden alternar) en las vistas móviles y se vuelven horizontales a medida que aumenta el ancho de la ventana gráfica disponible.

Actualmente no se admiten los enlaces de navegación de la barra de navegación justificados.

Contenido desbordante

Dado que Bootstrap no sabe cuánto espacio necesita el contenido en su barra de navegación, es posible que tenga problemas con el ajuste del contenido en una segunda fila. Para resolver esto, puede:

Reduzca la cantidad o el ancho de los elementos de la barra de navegación.
Oculte ciertos elementos de la barra de navegación en ciertos tamaños de pantalla usando clases de utilidad receptivas .
Cambie el punto en el que su barra de navegación cambia entre el modo contraído y el modo horizontal. Personalice la @grid-float-breakpointvariable o agregue su propia consulta de medios.

Cambiar el punto de interrupción de la barra de navegación móvil contraído

La barra de navegación se contrae en su vista móvil vertical cuando la ventana gráfica es más angosta que @grid-float-breakpoint, y se expande a su vista no móvil horizontal cuando la ventana gráfica tiene al menos un @grid-float-breakpointancho. Ajuste esta variable en la fuente Less para controlar cuándo se contrae/expande la barra de navegación. El valor predeterminado es 768px(la pantalla "pequeña" o "tableta" más pequeña).

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

Reemplace la marca de la barra de navegación con su propia imagen cambiando el texto por un archivo <img>. Dado que .navbar-brandtiene su propio relleno y altura, es posible que deba anular algunos CSS según su imagen.

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

Coloque el contenido del formulario dentro .navbar-formpara lograr una alineación vertical adecuada y un comportamiento contraído en ventanas de visualización estrechas. Utilice las opciones de alineación para decidir dónde reside dentro del contenido de la barra de navegación.

Como aviso, .navbar-formcomparte gran parte de su código con .form-inlinevia mixin. Algunos controles de formulario, como los grupos de entrada, pueden requerir anchos fijos para mostrarse correctamente dentro de una 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>

Añade siempre etiquetas

Los lectores de pantalla tendrán problemas con sus formularios si no incluye una etiqueta para cada entrada. Para estos formularios en línea, puede ocultar las etiquetas usando la .sr-onlyclase. Existen otros métodos alternativos para proporcionar una etiqueta para las tecnologías de asistencia, como el aria-labelatributo o aria-labelledby. titleSi ninguno de estos está presente, los lectores de pantalla pueden recurrir al uso del placeholderatributo, si está presente, pero tenga en cuenta que placeholderno se recomienda el uso de como reemplazo de otros métodos de etiquetado.

Agregue la .navbar-btnclase a los <button>elementos que no residen en a <form>para centrarlos verticalmente en la barra de navegación.

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

Envuelva cadenas de texto en un elemento con .navbar-text, generalmente en una <p>etiqueta para un interlineado y color adecuados.

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

Para las personas que usan enlaces estándar que no están dentro del componente de navegación de la barra de navegación normal, use la .navbar-linkclase para agregar los colores adecuados para las opciones de 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>

Alinee enlaces de navegación, formularios, botones o texto mediante las clases de utilidad .navbar-lefto . .navbar-rightAmbas clases agregarán un CSS flotante en la dirección especificada. Por ejemplo, para alinear los enlaces de navegación, colóquelos en un lugar separado <ul>con la clase de utilidad respectiva aplicada.

Estas clases son versiones combinadas de .pull-lefty .pull-right, pero se enfocan en consultas de medios para facilitar el manejo de los componentes de la barra de navegación en todos los tamaños de dispositivos.

Agregue .navbar-fixed-tope incluya un .containero .container-fluidpara centrar y rellenar el contenido de la barra de navegación.

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

Requiere acolchado corporal

La barra de navegación fija se superpondrá a su otro contenido, a menos que lo agregue paddingen la parte superior del archivo <body>. Pruebe sus propios valores o use nuestro fragmento a continuación. Sugerencia: De forma predeterminada, la barra de navegación tiene una altura de 50 px.

body { padding-top: 70px; }

Asegúrese de incluir esto después del CSS básico de Bootstrap.

Agregue .navbar-fixed-bottome incluya un .containero .container-fluidpara centrar y rellenar el contenido de la barra de navegación.

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

Requiere acolchado corporal

La barra de navegación fija se superpondrá a su otro contenido, a menos que lo agregue paddingal final del archivo <body>. Pruebe sus propios valores o use nuestro fragmento a continuación. Sugerencia: De forma predeterminada, la barra de navegación tiene una altura de 50 px.

body { padding-bottom: 70px; }

Asegúrese de incluir esto después del CSS básico de Bootstrap.

Cree una barra de navegación de ancho completo que se desplace con la página agregando .navbar-static-tope incluyendo un .containero .container-fluidpara centrar y rellenar el contenido de la barra de navegación.

A diferencia de las .navbar-fixed-*clases, no necesita cambiar ningún relleno en el archivo body.

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

Modifique el aspecto de la barra de navegación agregando .navbar-inverse.

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

Migas de pan

Indica la ubicación de la página actual dentro de una jerarquía de navegación.

Los separadores se agregan automáticamente en CSS a través de :beforey content.

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

Paginación

Proporcione enlaces de paginación para su sitio o aplicación con el componente de paginación de varias páginas o la alternativa de buscapersonas más simple .

Paginación predeterminada

Paginación simple inspirada en Rdio, ideal para aplicaciones y resultados de búsqueda. El bloque grande es difícil de perder, fácilmente escalable y proporciona 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>

Etiquetado del componente de paginación

El componente de paginación debe incluirse en un <nav>elemento para identificarlo como una sección de navegación para lectores de pantalla y otras tecnologías de asistencia. Además, como es probable que una página ya tenga más de una de esas secciones de navegación (como la navegación principal en el encabezado o una barra de navegación lateral), es recomendable proporcionar una descripción aria-labelque <nav>refleje su propósito. Por ejemplo, si el componente de paginación se usa para navegar entre un conjunto de resultados de búsqueda, una etiqueta adecuada podría ser aria-label="Search results pages".

Estados inhabilitados y activos

Los enlaces son personalizables para diferentes circunstancias. Úselo .disabledpara enlaces en los que no se puede hacer clic y .activepara 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>

Le recomendamos que cambie los anclajes activos o deshabilitados por <span>, u omita el anclaje en el caso de las flechas anterior/siguiente, para eliminar la función de clic y conservar los 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>

Dimensionamiento

¿Te apetece una paginación más grande o más pequeña? Añadir .pagination-lgo .pagination-smpara tamaños adicionales.

<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

Vínculos rápidos anteriores y siguientes para implementaciones de paginación simples con marcas y estilos ligeros. Es genial para sitios simples como blogs o revistas.

Ejemplo predeterminado

De forma predeterminada, el buscapersonas centra los enlaces.

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

Enlaces alineados

Alternativamente, puede alinear cada enlace a los 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 deshabilitado opcional

Los enlaces de buscapersonas también usan la .disabledclase de utilidad general de la 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>

Ejemplo

Ejemplo de encabezado Nuevo

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

Variaciones disponibles

Agregue cualquiera de las clases de modificadores mencionadas a continuación para cambiar la apariencia de una etiqueta.

Predeterminado Primario Éxito Información Advertencia Peligro

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

¿Tienes toneladas de etiquetas?

Pueden surgir problemas de representación cuando tiene docenas de etiquetas en línea dentro de un contenedor estrecho, cada una con su propio inline-blockelemento (como un icono). La forma de evitar esto es establecer display: inline-block;. Para contexto y un ejemplo, vea #13219 .

Resalte fácilmente elementos nuevos o no leídos agregando <span class="badge">enlaces a, navegadores Bootstrap y más.

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

Cuando no hay elementos nuevos o no leídos, las insignias simplemente colapsarán (a través del :emptyselector de CSS) siempre que no haya contenido dentro.

Compatibilidad entre navegadores

Las insignias no se colapsarán automáticamente en Internet Explorer 8 porque no es compatible con el :emptyselector.

Se adapta a los estados de navegación activos

Se incluyen estilos incorporados para colocar insignias en estados activos en las navegaciones de pastillas.

<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 componente liviano y flexible que puede extender opcionalmente toda la ventana gráfica para mostrar contenido clave en su sitio.

¡Hola Mundo!

Esta es una unidad de héroe simple, un componente de estilo jumbotron simple para llamar la atención adicional sobre el contenido o la información destacados.

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

Para hacer el jumbotron de ancho completo y sin esquinas redondeadas, colóquelo fuera de todos los .containers y en su lugar agregue un .containerinterior.

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

Un shell simple para h1espaciar y segmentar adecuadamente secciones de contenido en una página. Puede utilizar el elemento h1predeterminado smallde , así como la mayoría de los demás componentes (con estilos adicionales).

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

Extienda el sistema de cuadrículas de Bootstrap con el componente de miniaturas para mostrar fácilmente cuadrículas de imágenes, videos, texto y más.

Si está buscando una presentación similar a Pinterest de miniaturas de diferentes alturas y/o anchos, deberá usar un complemento de terceros como Masonry , Isotope o Salvattore .

Ejemplo predeterminado

De forma predeterminada, las miniaturas de Bootstrap están diseñadas para mostrar imágenes vinculadas con un marcado mínimo requerido.

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

Contenido personalizado

Con un poco de marcado adicional, es posible agregar cualquier tipo de contenido HTML como encabezados, párrafos o botones en las miniaturas.

Etiqueta de 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 de 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 de 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 mensajes de retroalimentación contextuales para las acciones típicas de los usuarios con el puñado de mensajes de alerta disponibles y flexibles.

Ejemplos

Envuelva cualquier texto y un botón de descartar opcional en .alertuna de las cuatro clases contextuales (p. ej., .alert-success) para mensajes de alerta básicos.

Sin clase predeterminada

Las alertas no tienen clases predeterminadas, solo clases base y modificadoras. Una alerta gris predeterminada no tiene demasiado sentido, por lo que debe especificar un tipo a través de la clase contextual. Elija entre éxito, información, advertencia o peligro.

¡Bien hecho! Ha leído con éxito este importante mensaje de alerta.

¡Aviso! Esta alerta necesita su atención, pero no es muy importante.

¡Advertencia! Mejor compruébalo tú mismo, no te ves muy bien.

¡Oh, chasquido! Cambia algunas cosas e intenta enviarlo de nuevo.

<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

Aproveche cualquier alerta agregando un .alert-dismissiblebotón opcional y de cierre.

Requiere complemento de alerta de JavaScript

Para alertas descartables y en pleno funcionamiento, debe usar el complemento JavaScript de alertas .

¡Advertencia! Mejor compruébalo tú mismo, no te ves muy bien.

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

Garantice un comportamiento adecuado en todos los dispositivos

Asegúrese de utilizar el <button>elemento con el data-dismiss="alert"atributo de datos.

Enlaces en alertas

Use la .alert-linkclase de utilidad para proporcionar rápidamente enlaces de colores coincidentes dentro de cualquier alerta.

¡Bien hecho! Ha leído con éxito este importante mensaje de alerta .

¡Aviso! Esta alerta necesita su atención , pero no es muy importante.

¡Advertencia! Mejor compruébalo tú mismo, no te ves muy bien .

¡Oh, chasquido! Cambia algunas cosas e intenta enviarlo de nuevo.

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

Proporcione comentarios actualizados sobre el progreso de un flujo de trabajo o acción con barras de progreso simples pero flexibles.

Compatibilidad entre navegadores

Las barras de progreso usan transiciones y animaciones CSS3 para lograr algunos de sus efectos. Estas características no son compatibles con Internet Explorer 9 y anteriores o versiones anteriores de Firefox. Opera 12 no admite animaciones.

Compatibilidad con la política de seguridad de contenido (CSP)

Si su sitio web tiene una Política de seguridad de contenido (CSP) que no permite style-src 'unsafe-inline', entonces no podrá usar styleatributos en línea para establecer el ancho de la barra de progreso como se muestra en nuestros ejemplos a continuación. Los métodos alternativos para configurar los anchos que son compatibles con los CSP estrictos incluyen usar un poco de JavaScript personalizado (que establece element.style.width) o usar clases de CSS personalizadas.

Ejemplo 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

Elimine la clase <span>with .sr-onlyde la barra de progreso para mostrar un porcentaje 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 el texto de la etiqueta permanezca legible incluso para porcentajes bajos, considere agregar una min-widtha la 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 contextuales

Las barras de progreso usan algunas de las mismas clases de botones y alertas para lograr estilos uniformes.

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

Utiliza un degradado para crear un efecto de rayas. No disponible en IE9 e inferior.

<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

Agregue .activea .progress-bar-stripedpara animar las rayas de derecha a izquierda. No disponible en IE9 e inferior.

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

apilado

Coloque varias barras en el mismo .progresspara apilarlas.

<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 objetos abstractos para construir varios tipos de componentes (como comentarios de blog, tweets, etc.) que presentan una imagen alineada a la izquierda o a la derecha junto con contenido de texto.

Medios predeterminados

Los medios predeterminados muestran un objeto de medios (imágenes, video, audio) a la izquierda o derecha de un bloque de contenido.

Encabezado de medios

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.

Encabezado de medios

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.

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

Encabezado de medios

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.

Encabezado de medios

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>

Las clases .pull-lefty .pull-righttambién existen y se usaron anteriormente como parte del componente de medios, pero están obsoletas para ese uso a partir de la versión 3.3.0. Son aproximadamente equivalentes a .media-lefty .media-right, excepto que .media-rightdeben colocarse después de .media-bodyen el html.

Alineación de medios

Las imágenes u otros medios se pueden alinear en la parte superior, media o inferior. El valor predeterminado es la alineación superior.

Medios alineados en la 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 alineados al 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 alineados en la 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

Con un poco de marcado adicional, puede usar medios dentro de la lista (útil para hilos de comentarios o listas de artículos).

Encabezado de medios

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.

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

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

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

Los grupos de listas son un componente flexible y potente para mostrar no solo listas simples de elementos, sino también listas complejas con contenido personalizado.

Ejemplo básico

El grupo de lista más básico es simplemente una lista desordenada con elementos de lista y las clases adecuadas. Construir sobre él con las opciones que siguen, o su propio CSS según sea necesario.

Cras justo odio
Dapibus ac instalaciones en
morbi leo risus
Porta ac consectetur ac
Vestíbulo en 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

Agregue el componente de insignias a cualquier elemento del grupo de listas y se colocará automáticamente a la derecha.

14Cras justo odio
2Dapibus ac instalaciones en
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 los elementos del grupo de listas mediante el uso de etiquetas de anclaje en lugar de elementos de lista (eso también significa un padre <div>en lugar de un <ul>). No hay necesidad de padres individuales alrededor de cada elemento.

Cras justo odio Dapibus ac instalaciones en morbi leo risus Porta ac consectetur ac Vestíbulo en 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

Los elementos del grupo de lista pueden ser botones en lugar de elementos de lista (eso también significa un padre <div>en lugar de un <ul>). No hay necesidad de padres individuales alrededor de cada elemento. No utilice las .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 deshabilitados

Agregue .disableda a .list-group-itempara atenuarlo y que aparezca deshabilitado.

Cras justo odio Dapibus ac instalaciones en morbi leo risus Porta ac consectetur ac Vestíbulo en 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 contextuales

Use clases contextuales para aplicar estilo a los elementos de la lista, predeterminados o vinculados. También incluye .activeestado.

Dapibus ac instalaciones en
Cras sit amet nibh libero
Porta ac consectetur ac
Vestíbulo en eros

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

Contenido personalizado

Agregue casi cualquier HTML dentro, incluso para grupos de listas vinculadas como el que se muestra a continuación.

Encabezado de elemento de grupo de lista

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

Encabezado de elemento de grupo de lista

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

Encabezado de elemento de grupo de 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>

Si bien no siempre es necesario, a veces necesitas poner tu DOM en una caja. Para esas situaciones, pruebe el componente del panel.

Ejemplo básico

De forma predeterminada, todo lo .panelque se hace es aplicar un borde básico y relleno para contener algo de contenido.

Ejemplo de panel básico

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

Panel con encabezado

Agregue fácilmente un contenedor de encabezado a su panel con .panel-heading. También puede incluir cualquiera <h1>- <h6>con una .panel-titleclase para agregar un encabezado prediseñado. Sin embargo, los tamaños de fuente de <h1>- <h6>son anulados por .panel-heading.

Para colorear correctamente los enlaces, asegúrese de colocar los enlaces en los encabezados dentro de .panel-title.

Encabezado de panel sin título

Contenido del panel

Título del panel

Contenido del 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 pie de página

Ajustar botones o texto secundario en formato .panel-footer. Tenga en cuenta que los pies de página de los paneles no heredan colores ni bordes cuando se utilizan variaciones contextuales, ya que no están destinados a estar en primer plano.

Contenido del panel

Pie de página del panel

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

alternativas contextuales

Al igual que otros componentes, haga que un panel sea más significativo para un contexto particular agregando cualquiera de las clases de estado contextual.

Título del panel

Contenido del panel

Título del panel

Contenido del panel

Título del panel

Contenido del panel

Título del panel

Contenido del panel

Título del panel

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

Agregue cualquier elemento sin borde .tabledentro de un panel para obtener un diseño uniforme. Si hay un .panel-body, agregamos un borde adicional en la parte superior de la tabla para la separación.

Encabezado de panel

Parte del contenido del panel predeterminado aquí. Nulla vitae elit libero, un 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.

#	Primer nombre	Apellido	Nombre de usuario
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry	el pájaro	@gorjeo

<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 hay cuerpo del panel, el componente se mueve del encabezado del panel a la tabla sin interrupción.

Encabezado de panel

#	Primer nombre	Apellido	Nombre de usuario
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry	el pájaro	@gorjeo

<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

Incluya fácilmente grupos de listas de ancho completo dentro de cualquier panel.

Encabezado de panel

Parte del contenido del panel predeterminado aquí. Nulla vitae elit libero, un 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 instalaciones en
morbi leo risus
Porta ac consectetur ac
Vestíbulo en 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>

Permita que los navegadores determinen las dimensiones del video o la presentación de diapositivas en función del ancho del bloque que lo contiene mediante la creación de una proporción intrínseca que se escalará correctamente en cualquier dispositivo.

Las reglas se aplican directamente a los elementos <iframe>, <embed>, <video>y <object>; Opcionalmente, utilice una clase descendiente explícita .embed-responsive-itemcuando desee hacer coincidir el estilo de otros atributos.

¡Consejo profesional! No es necesario que lo incluya frameborder="0"en sus <iframe>correos electrónicos, ya que lo anulamos por usted.

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

Pozo predeterminado

Use el pozo como un efecto simple en un elemento para darle un efecto de inserción.

¡Mira, estoy en un pozo!

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

Clases opcionales

Controle el relleno y las esquinas redondeadas con dos clases de modificadores opcionales.

¡Mira, estoy en un pozo grande!

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

¡Mira, estoy en un pequeño pozo!

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

Componentes

Glificones

Glifos disponibles

Cómo utilizar

No mezclar con otros componentes.

Solo para uso en elementos vacíos.

Cambiar la ubicación de la fuente del icono

Iconos accesibles

Ejemplos

Listas deplegables

Ejemplo

Alineación

Puede requerir posicionamiento adicional

.pull-rightAlineación en desuso

Encabezados

Divisor

Elementos de menú deshabilitados

Grupos de botones

La información sobre herramientas y las ventanas emergentes en los grupos de botones requieren una configuración especial

Asegúrese de que sea correcto roley proporcione una etiqueta

Ejemplo básico

Barra de herramientas de botones

Dimensionamiento

Anidamiento

Variación vertical

Grupos de botones justificados

Manejo de fronteras

IE8 y fronteras

con <a>elementos

Enlaces que actúan como botones

con <button>elementos

Menús desplegables de botones

Dependencia del complemento

Menús desplegables de un solo botón

Menús desplegables de botones divididos

Dimensionamiento

variación de caída

Grupos de entrada

Solo <input>textos

La información sobre herramientas y las ventanas emergentes en los grupos de entrada requieren una configuración especial

No mezclar con otros componentes.

Añade siempre etiquetas

Ejemplo básico

Dimensionamiento

Casillas de verificación y complementos de radio

Complementos de botón

Botones con menús desplegables

Botones segmentados

Múltiples botones

Navegadores

El uso de navegadores para paneles de pestañas requiere el complemento de pestañas de JavaScript

Hacer que los navs utilizados como navegación sean accesibles

Pestañas

Pastillas

Justificado

Safari y navegación justificada receptiva

Enlaces deshabilitados

La funcionalidad del enlace no se ve afectada

Usar menús desplegables

Pestañas con menús desplegables

Pastillas con menús desplegables

barra de navegación

barra de navegación predeterminada

Contenido desbordante

Requiere complemento de JavaScript

Cambiar el punto de interrupción de la barra de navegación móvil contraído

Hacer que las barras de navegación sean accesibles

Imagen de marca

Formularios

Advertencias para dispositivos móviles

Añade siempre etiquetas

Botones

Uso específico del contexto

Texto

Enlaces que no son de navegación

Alineación de componentes

Alinear a la derecha varios componentes

fijo en la parte superior

Requiere acolchado corporal

Fijado al fondo

`.pull-right`Alineación en desuso

Asegúrese de que sea correcto `role`y proporcione una etiqueta

con `<a>`elementos

con `<button>`elementos

Solo `<input>`textos