Glificones

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.

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

Listas deplegables

Menú contextual conmutable para mostrar listas de enlaces. Hecho interactivo con el complemento de JavaScript desplegable .

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>

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.

Puede requerir posicionamiento adicional

Los menús desplegables se colocan automáticamente a través de CSS dentro del flujo normal del documento. Esto significa que los padres pueden recortar los menús desplegables con ciertas overflowpropiedades o aparecer fuera de los límites de la ventana gráfica. Aborde estos problemas por su cuenta a medida que surjan.

.pull-rightAlineación en desuso

A partir de v3.1.0, hemos dejado .pull-rightde usar los menús desplegables. Para alinear un menú a la derecha, utilice .dropdown-menu-right. Los componentes de navegación alineados a la derecha en la barra de navegación usan una versión mixta de esta clase para alinear automáticamente el menú. Para anularlo, utilice .dropdown-menu-left.

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

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>

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>

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>

Grupos de botones

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

Barra de herramientas de botones

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.

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

Menús desplegables de botones

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>

Grupos de entrada

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.

@

@ejemplo.com

ps .00

https://ejemplo.com/usuarios/
<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>

Navegadores

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.

Tenga en cuenta que la .nav-tabsclase 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>

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>

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>

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>

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>

barra de navegación

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:

  1. Reduzca la cantidad o el ancho de los elementos de la barra de navegación.
  2. Oculte ciertos elementos de la barra de navegación en ciertos tamaños de pantalla usando clases de utilidad receptivas .
  3. 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.

Requiere complemento de JavaScript

Si JavaScript está deshabilitado y la ventana gráfica es lo suficientemente estrecha como para que la barra de navegación se colapse, será imposible expandir la barra de navegación y ver el contenido dentro de la.navbar-collapse .

La barra de navegación receptiva requiere que se incluya el complemento de colapso en su versión de Bootstrap.

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

Hacer que las barras de navegación sean accesibles

Asegúrese de usar un <nav>elemento o, si usa un elemento más genérico como un <div>, agregue un role="navigation"a cada barra de navegación para identificarla explícitamente como una región de referencia para los usuarios de tecnologías de asistencia.

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

Advertencias para dispositivos móviles

Hay algunas advertencias con respecto al uso de controles de formulario dentro de elementos fijos en dispositivos móviles. Consulte nuestros documentos de soporte del navegador para obtener más información.

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>

Uso específico del contexto

Al igual que las clases de botones estándar , .navbar-btnse pueden usar en elementos <a>y <input>. Sin embargo, .navbar-btnni las clases de botones estándar deben usarse en <a>elementos dentro de .navbar-nav.

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.

Alinear a la derecha varios componentes

Las barras de navegación actualmente tienen una limitación con múltiples .navbar-rightclases. Para espaciar adecuadamente el contenido, usamos un margen negativo en el último .navbar-rightelemento. Cuando hay varios elementos que usan esa clase, estos márgenes no funcionan según lo previsto.

Revisaremos esto cuando podamos reescribir ese componente en v4.

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>

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>

Etiquetas

Ejemplo

Ejemplo de encabezado Nuevo

Ejemplo de encabezado Nuevo

Ejemplo de encabezado Nuevo

Ejemplo de encabezado Nuevo

Ejemplo de encabezado Nuevo
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 .

Insignias

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

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

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

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>

jumbotron

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>

Encabezado de página

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>

Miniaturas

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.

100%x200

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

100%x200

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

100%x200

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>

Alertas

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.

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

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

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

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Barras de progreso

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.

60% completo
<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.

40% Completado (éxito)
20% completo
60% completo (advertencia)
80% completo (peligro)
<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.

40% Completado (éxito)
20% completo
60% completo (advertencia)
80% completo (peligro)
<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.

45% completo
<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.

35% Completado (éxito)
20% completo (advertencia)
10% completo (peligro)
<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>

objeto multimedia

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>

Grupo de lista

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.

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

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

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

Paneles

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>

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

incrustación receptiva

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>

pozos

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>