Más de una docena de componentes reutilizables creados para proporcionar iconografía, menús desplegables, grupos de entrada, navegación, alertas y mucho más.
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 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.
Ejemplos
Úselos en botones, grupos de botones para una barra de herramientas, navegación o entradas de formulario antepuestas.
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.
Error:Introduzca una dirección de correo electrónico válida
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ú.
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.
Encabezados
Agregue un encabezado para etiquetar secciones de acciones en cualquier menú desplegable.
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.
Barra de herramientas de botones
Combine conjuntos de <div class="btn-group">en a <div class="btn-toolbar">para componentes más complejos.
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.
Anidamiento
Coloque una .btn-groupdentro de otra .btn-groupcuando desee que los menús desplegables se mezclen con una serie de botones.
Haga que un conjunto de botones aparezcan apilados verticalmente en lugar de horizontalmente. Los menús desplegables de botones divididos no son compatibles aquí.
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 .
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.
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.
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.
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.
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.
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.
Botones con menús desplegables
Botones segmentados
Múltiples botones
Si bien solo puede tener un complemento por lado, puede tener varios botones dentro de un solo archivo .input-group-btn.
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.
Pestañas
Tenga en cuenta que la .nav-tabsclase requiere la .navclase base.
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 .
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.
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.
Imagen de marca
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.
Formularios
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.
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.
Botones
Agregue la .navbar-btnclase a los <button>elementos que no residen en a <form>para centrarlos verticalmente en la barra de navegación.
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.
Texto
Envuelva cadenas de texto en un elemento con .navbar-text, generalmente en una <p>etiqueta para un interlineado y color adecuados.
Enlaces que no son de navegación
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.
Alineación de componentes
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.
fijo en la parte superior
Agregue .navbar-fixed-tope incluya un .containero .container-fluidpara centrar y rellenar el contenido de la barra de navegación.
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.
Asegúrese de incluir esto después del CSS básico de Bootstrap.
Fijado al fondo
Agregue .navbar-fixed-bottome incluya un .containero .container-fluidpara centrar y rellenar el contenido de la barra de navegación.
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.
Asegúrese de incluir esto después del CSS básico de Bootstrap.
tapa estática
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.
barra de navegación invertida
Modifique el aspecto de la barra de navegación agregando .navbar-inverse.
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.
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.
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.
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.
Dimensionamiento
¿Te apetece una paginación más grande o más pequeña? Añadir .pagination-lgo .pagination-smpara tamaños adicionales.
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.
Enlaces alineados
Alternativamente, puede alinear cada enlace a los lados:
Estado deshabilitado opcional
Los enlaces de buscapersonas también usan la .disabledclase de utilidad general de la paginación.
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
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
¿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.
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.
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.
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.
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).
Encabezado de página de ejemplo Subtexto para encabezado
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.
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.
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.
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.
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.
Alertas descartables
Aproveche cualquier alerta agregando un .alert-dismissiblebotón opcional y de cierre.
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
con etiqueta
Elimine la clase <span>with .sr-onlyde la barra de progreso para mostrar un porcentaje visible.
60%
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%
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)
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)
Animado
Agregue .activea .progress-bar-stripedpara animar las rayas de derecha a izquierda. No disponible en IE9 e inferior.
45% completo
apilado
Coloque varias barras en el mismo .progresspara apilarlas.
35% Completado (éxito)
20% completo (advertencia)
10% completo (peligro)
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.
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.
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.
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
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
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.
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í.
elementos deshabilitados
Agregue .disableda a .list-group-itempara atenuarlo y que aparezca deshabilitado.
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
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
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
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
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
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
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
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.
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!
Clases opcionales
Controle el relleno y las esquinas redondeadas con dos clases de modificadores opcionales.