Componentes
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.
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.
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.
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.
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>
.
Las clases de iconos solo deben usarse en elementos que no contienen contenido de texto y no tienen elementos secundarios.
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:
@icon-font-path
y/o @icon-font-name
en los archivos Less de origen.url()
rutas en el CSS compilado.Utilice la opción que mejor se adapte a su configuración de desarrollo específica.
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-only
clase.
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-label
atributo en el propio control.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Ú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-only
texto 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>
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 .dropdown
de 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 .dropup
al 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-right
a .dropdown-menu
para alinear a la derecha el menú desplegable.
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 overflow
propiedades o aparecer fuera de los límites de la ventana gráfica. Aborde estos problemas por su cuenta a medida que surjan.
.pull-right
Alineación en desusoA partir de v3.1.0, hemos dejado .pull-right
de 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 .disabled
a un <li>
en el menú desplegable para deshabilitar el enlace.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
Agrupe una serie de botones en una sola línea con el grupo de botones. Agregue el comportamiento opcional de estilo de casilla de verificación y radio de JavaScript con nuestro complemento de botones .
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).
role
y proporcione una etiquetaPara que las tecnologías de asistencia, como los lectores de pantalla, transmitan que una serie de botones está agrupada, role
se 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 role
atributo correcto. En los ejemplos proporcionados aquí, usamos , pero también se pueden usar aria-label
alternativas como .aria-labelledby
Envuelve una serie de botones .btn
con .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Combine conjuntos de <div class="btn-group">
en a <div class="btn-toolbar">
para componentes más complejos.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
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>
Coloque una .btn-group
dentro de otra .btn-group
cuando 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>
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>
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.
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: -1px
se utiliza para apilar los bordes en lugar de eliminarlos. Sin embargo, margin
no funciona con display: table-cell
. Como resultado, dependiendo de sus personalizaciones de Bootstrap, es posible que desee eliminar o volver a colorear los bordes.
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.
<a>
elementosSimplemente envuelva una serie de .btn
s en .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
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"
.
<button>
elementosPara usar grupos de botones justificados con <button>
elementos, debe envolver cada botón en un grupo de botones . La mayoría de los navegadores no aplican correctamente nuestro CSS para la justificación de los <button>
elementos, pero dado que admitimos menús desplegables de botones, podemos solucionarlo.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Use cualquier botón para activar un menú desplegable colocándolo dentro de .btn-group
y proporcionando el marcado de menú adecuado.
Los menús desplegables de botones requieren que el complemento desplegable se incluya en su versión de Bootstrap.
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>
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>
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>
Active los menús desplegables sobre los elementos al agregarlos .dropup
al padre.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Amplíe los controles de formulario agregando texto o botones antes, después o en ambos lados de cualquier archivo <input>
. Úselo .input-group
con .input-group-addon
o .input-group-btn
para anteponer o agregar elementos a un solo archivo .form-control
.
<input>
textosEvite 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 rows
atributo no se respetará en algunos casos.
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 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.
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-only
clase o el uso de , , aria-label
o aria-labelledby
atributo ) 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-describedby
title
placeholder
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-addon
o .input-group-btn
) en un solo lado.
No admitimos múltiples controles de formulario en un solo grupo de entrada.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
Agregue las clases de tamaño de formulario relativo al .input-group
mismo 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>
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 -->
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-btn
para 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 -->
<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 -->
<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>
Si bien solo puede tener un complemento por lado, puede tener varios botones dentro de un solo archivo .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
Los navegadores disponibles en Bootstrap tienen marcado compartido, comenzando con la .nav
clase base, así como estados compartidos. Cambia las clases de modificadores para cambiar entre cada estilo.
Tenga en cuenta que la .nav-tabs
clase requiere la .nav
clase 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-pills
lugar:
<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-stacked
agrega
<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.
<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 .
<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 .
<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>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Las barras de navegación son metacomponentes receptivos que sirven como encabezados de navegación para su aplicación o sitio. Comienzan contraídos (y se pueden alternar) en las vistas móviles y se vuelven horizontales a medida que aumenta el ancho de la ventana gráfica disponible.
Actualmente no se admiten los enlaces de navegación de la barra de navegación justificados.
<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-brand
tiene 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-form
para 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-form
comparte gran parte de su código con .form-inline
via 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>
Agregue la .navbar-btn
clase a los <button>
elementos que no residen en a <form>
para centrarlos verticalmente en la barra de navegación.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Envuelva cadenas de texto en un elemento con .navbar-text
, generalmente en una <p>
etiqueta para un interlineado y color adecuados.
<p class="navbar-text">Signed in as Mark Otto</p>
Para las personas que usan enlaces estándar que no están dentro del componente de navegación de la barra de navegación normal, use la .navbar-link
clase 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-left
o . .navbar-right
Ambas 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-left
y .pull-right
, pero se enfocan en consultas de medios para facilitar el manejo de los componentes de la barra de navegación en todos los tamaños de dispositivos.
Agregue .navbar-fixed-top
e incluya un .container
o .container-fluid
para centrar y rellenar el contenido de la barra de navegación.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Agregue .navbar-fixed-bottom
e incluya un .container
o .container-fluid
para centrar y rellenar el contenido de la barra de navegación.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Cree una barra de navegación de ancho completo que se desplace con la página agregando .navbar-static-top
e incluyendo un .container
o .container-fluid
para 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>
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 :before
y content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
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 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">«</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">»</span>
</a>
</li>
</ul>
</nav>
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-label
que <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"
.
Los enlaces son personalizables para diferentes circunstancias. Úselo .disabled
para enlaces en los que no se puede hacer clic y .active
para indicar la página actual.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</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">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
¿Te apetece una paginación más grande o más pequeña? Añadir .pagination-lg
o .pagination-sm
para 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>
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.
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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Los enlaces de buscapersonas también usan la .disabled
clase de utilidad general de la paginación.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Agregue cualquiera de las clases de modificadores mencionadas a continuación para cambiar la apariencia de una etiqueta.
<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>
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-block
elemento (como un icono). La forma de evitar esto es establecer display: inline-block;
. Para contexto y un ejemplo, vea #13219 .
Resalte fácilmente elementos nuevos o no leídos agregando <span class="badge">
enlaces a, navegadores Bootstrap y más.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Cuando no hay elementos nuevos o no leídos, las insignias simplemente colapsarán (a través del :empty
selector de CSS) siempre que no haya contenido dentro.
Las insignias no se colapsarán automáticamente en Internet Explorer 8 porque no es compatible con el :empty
selector.
Se incluyen estilos incorporados para colocar insignias en estados activos en las navegaciones de pastillas.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
Un componente liviano y flexible que puede extender opcionalmente toda la ventana gráfica para mostrar contenido clave en su sitio.
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.
<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 .container
s y en su lugar agregue un .container
interior.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Un shell simple para h1
espaciar y segmentar adecuadamente secciones de contenido en una página. Puede utilizar el elemento h1
predeterminado small
de , así como la mayoría de los demás componentes (con estilos adicionales).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Extienda el sistema de cuadrículas de Bootstrap con el componente de miniaturas para mostrar fácilmente cuadrículas de imágenes, videos, texto y más.
Si está buscando una presentación similar a Pinterest de miniaturas de diferentes alturas y/o anchos, deberá usar un complemento de terceros como Masonry , Isotope o Salvattore .
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>
Con un poco de marcado adicional, es posible agregar cualquier tipo de contenido HTML como encabezados, párrafos o botones en las miniaturas.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
Proporcione mensajes de retroalimentación contextuales para las acciones típicas de los usuarios con el puñado de mensajes de alerta disponibles y flexibles.
Envuelva cualquier texto y un botón de descartar opcional en .alert
una de las cuatro clases contextuales (p. ej., .alert-success
) para mensajes de alerta básicos.
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>
Aproveche cualquier alerta agregando un .alert-dismissible
botón opcional y de cierre.
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">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Asegúrese de utilizar el <button>
elemento con el data-dismiss="alert"
atributo de datos.
Use la .alert-link
clase 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>
Proporcione comentarios actualizados sobre el progreso de un flujo de trabajo o acción con barras de progreso simples pero flexibles.
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.
Si su sitio web tiene una Política de seguridad de contenido (CSP) que no permite style-src 'unsafe-inline'
, entonces no podrá usar style
atributos 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.
Barra de progreso predeterminada.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
Elimine la clase <span>
with .sr-only
de la barra de progreso para mostrar un porcentaje visible.
<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-width
a la barra de progreso.
<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>
Las barras de progreso usan algunas de las mismas clases de botones y alertas para lograr estilos uniformes.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Utiliza un degradado para crear un efecto de rayas. No disponible en IE9 e inferior.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Agregue .active
a .progress-bar-striped
para animar las rayas de derecha a izquierda. No disponible en IE9 e inferior.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
Coloque varias barras en el mismo .progress
para apilarlas.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Estilos de objetos abstractos para construir varios tipos de componentes (como comentarios de blog, tweets, etc.) que presentan una imagen alineada a la izquierda o a la derecha junto con contenido de texto.
Los medios predeterminados muestran un objeto de medios (imágenes, video, audio) a la izquierda o derecha de un bloque de contenido.
<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-left
y .pull-right
tambié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-left
y .media-right
, excepto que .media-right
deben colocarse después de .media-body
en el html.
Las imágenes u otros medios se pueden alinear en la parte superior, media o inferior. El valor predeterminado es la alineación 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.
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.
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>
Con un poco de marcado adicional, puede usar medios dentro de la lista (útil para hilos de comentarios o listas de artículos).
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
Los grupos de listas son un componente flexible y potente para mostrar no solo listas simples de elementos, sino también listas complejas con contenido personalizado.
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.
<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>
Agregue el componente de insignias a cualquier elemento del grupo de listas y se colocará automáticamente a la derecha.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
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>
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 .btn
clases 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>
Agregue .disabled
a a .list-group-item
para 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>
Use clases contextuales para aplicar estilo a los elementos de la lista, predeterminados o vinculados. También incluye .active
estado.
<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>
Agregue casi cualquier HTML dentro, incluso para grupos de listas vinculadas como el que se muestra a continuación.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
Si bien no siempre es necesario, a veces necesitas poner tu DOM en una caja. Para esas situaciones, pruebe el componente del panel.
De forma predeterminada, todo lo .panel
que se hace es aplicar un borde básico y relleno para contener algo de contenido.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Agregue fácilmente un contenedor de encabezado a su panel con .panel-heading
. También puede incluir cualquiera <h1>
- <h6>
con una .panel-title
clase 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
.
<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.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
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.
<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>
Agregue cualquier elemento sin borde .table
dentro 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.
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.
# | 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>
Incluya fácilmente grupos de listas de ancho completo dentro de cualquier 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.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Permita que los navegadores determinen las dimensiones del video o la presentación de diapositivas en función del ancho del bloque que lo contiene mediante la creación de una proporción intrínseca que se escalará correctamente en cualquier dispositivo.
Las reglas se aplican directamente a los elementos <iframe>
, <embed>
, <video>
y <object>
; Opcionalmente, utilice una clase descendiente explícita .embed-responsive-item
cuando 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>
Use el pozo como un efecto simple en un elemento para darle un efecto de inserción.
<div class="well">...</div>
Controle el relleno y las esquinas redondeadas con dos clases de modificadores opcionales.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>