Compoñentes
Máis dunha ducia de compoñentes reutilizables construídos para proporcionar iconografía, menús despregables, grupos de entrada, navegación, alertas e moito máis.
Máis dunha ducia de compoñentes reutilizables construídos para proporcionar iconografía, menús despregables, grupos de entrada, navegación, alertas e moito máis.
Inclúe máis de 250 glifos en formato de fonte do conxunto Glyphicon Halflings. Os Halflings Glyphicons normalmente non están dispoñibles gratuitamente, pero o seu creador púxoos dispoñibles para Bootstrap de xeito gratuíto. Como agradecemento, só pedimos que inclúas unha ligazón a Glyphicons sempre que sexa posible.
Por razóns de rendemento, todas as iconas requiren unha clase base e unha clase de iconas individual. Para usalo, coloca o seguinte código en calquera lugar. Asegúrate de deixar un espazo entre a icona e o texto para o recheo adecuado.
As clases de iconas non se poden combinar directamente con outros compoñentes. Non deben usarse xunto con outras clases no mesmo elemento. En vez diso, engade un aniñado <span>
e aplique as clases de iconas ao <span>
.
As clases de iconas só deben usarse en elementos que non conteñen contido de texto e non teñan elementos fillos.
Bootstrap asume que os ficheiros de fonte de iconas estarán no ../fonts/
directorio, en relación aos ficheiros CSS compilados. Mover ou renomear eses ficheiros de fonte significa actualizar o CSS dunha das tres formas:
@icon-font-path
e/ou @icon-font-name
nos ficheiros de Less fonte.url()
camiños no CSS compilado.Use a opción que mellor se adapte á súa configuración de desenvolvemento específica.
As versións modernas das tecnoloxías de asistencia anunciarán contido xerado en CSS, así como caracteres Unicode específicos. Para evitar saídas non desexadas e confusas nos lectores de pantalla (especialmente cando as iconas se usan exclusivamente para decoración), ocultámolas co aria-hidden="true"
atributo.
Se estás a usar unha icona para transmitir significado (en lugar de só como elemento decorativo), asegúrate de que este significado tamén se transmita ás tecnoloxías de asistencia; por exemplo, inclúe contido adicional, oculto visualmente coa .sr-only
clase.
Se estás a crear controis sen outro texto (como un <button>
que só contén unha icona), sempre debes proporcionar contido alternativo para identificar o propósito do control, para que teña sentido para os usuarios de tecnoloxías de asistencia. Neste caso, pode engadir un aria-label
atributo no propio control.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Utilízaos en botóns, grupos de botóns para unha barra de ferramentas, navegación ou entradas de formularios antepostas.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Unha icona que se usa nunha alerta para indicar que se trata dunha mensaxe de erro, con .sr-only
texto adicional para transmitir esta suxestión aos usuarios de tecnoloxí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 ligazóns. Feito interactivo co complemento de JavaScript desplegable .
Envolve o disparador do menú despregable e o menú despregable dentro .dropdown
de , ou noutro elemento que declare position: relative;
. A continuación, engade o HTML do menú.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Os menús despregables pódense cambiar para expandirse cara arriba (en lugar de para abaixo) engadindo .dropup
ao pai.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
De xeito predeterminado, un menú despregable sitúase automaticamente ao 100 % desde a parte superior e ao lado esquerdo do seu pai. Engadir .dropdown-menu-right
ao .dropdown-menu
aliñar á dereita o menú despregable.
Os menús despregables colócanse automaticamente mediante CSS dentro do fluxo normal do documento. Isto significa que os pais con certas propiedades poden recortar os menús despregables overflow
ou aparecer fóra dos límites da ventana gráfica. Resolve estes problemas pola túa conta a medida que xurdan.
.pull-right
Aliñación obsoleta.pull-right
A partir da versión 3.1.0, os menús despregables quedaron en desuso . Para aliñar á dereita un menú, use .dropdown-menu-right
. Os compoñentes de navegación aliñados á dereita na barra de navegación usan unha versión mixin desta clase para aliñar automaticamente o menú. Para anulalo, use .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Engade unha cabeceira para etiquetar seccións de accións en calquera menú despregable.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Engade un divisor para separar series de ligazóns nun menú despregable.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Engadir .disabled
a un <li>
no menú despregable para desactivar a ligazón.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
Agrupe unha serie de botóns nunha única liña co grupo de botóns. Engade a radio de JavaScript opcional e o comportamento do estilo de caixa de verificación co noso complemento de botóns .
Cando utilices información sobre ferramentas ou popovers en elementos dentro dun .btn-group
, terás que especificar a opción container: 'body'
para evitar efectos secundarios non desexados (como que o elemento se faga máis ancho e/ou perda as súas esquinas redondeadas cando se activa a información emerxente ou popover).
role
e proporcionar unha etiquetaPara que as tecnoloxías de asistencia, como os lectores de pantalla, transmitan que se agrupan unha serie de botóns, é role
necesario proporcionar un atributo adecuado. Para os grupos de botóns, isto sería role="group"
, mentres que as barras de ferramentas deberían ter un role="toolbar"
.
Unha excepción son os grupos que só conteñen un só control (por exemplo, os grupos de botóns xustificados con <button>
elementos) ou un menú despregable.
Ademais, os grupos e as barras de ferramentas deberían ter unha etiqueta explícita, xa que a maioría das tecnoloxías de asistencia non os anunciarán, a pesar da presenza do role
atributo correcto. Nos exemplos proporcionados aquí, usamos , pero tamén se poden usar aria-label
alternativas como .aria-labelledby
Envolve unha serie de botóns .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>
Combina conxuntos de <div class="btn-group">
para <div class="btn-toolbar">
os compoñentes máis complexos.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
En lugar de aplicar clases de tamaño de botón a cada botón dun grupo, só tes que engadir .btn-group-*
a cada un .btn-group
, incluso cando anidan varios grupos.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
Coloque un .btn-group
dentro doutro .btn-group
cando quere menús despregables mesturados cunha serie de botóns.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Fai que un conxunto de botóns aparezan apilados verticalmente en lugar de horizontal. Aquí non se admiten os menús despregables dos botóns divididos.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Fai un grupo de botóns que se estendan en tamaños iguais para abarcar todo o ancho do seu pai. Tamén funciona con menús despregables de botóns dentro do grupo de botóns.
Debido ao HTML e CSS específicos usados para xustificar botóns (é dicir display: table-cell
, ), os bordos entre eles duplícanse. Nos grupos de botóns normais, margin-left: -1px
úsase para apilar os bordos en lugar de eliminalos. Non obstante, margin
non funciona con display: table-cell
. Como resultado, dependendo das súas personalizacións para Bootstrap, pode querer eliminar ou volver colorear os bordos.
Internet Explorer 8 non representa os bordos dos botóns dun grupo de botóns xustificado, xa se estea activado <a>
ou <button>
elementos. Para evitar isto, envolve cada botón noutro .btn-group
.
Consulte #12476 para obter máis información.
<a>
elementosSimplemente envolve unha serie de .btn
s en .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Se os <a>
elementos se usan para actuar como botóns, activando a funcionalidade na páxina, en lugar de navegar a outro documento ou sección da páxina actual, tamén se lles debería dar un role="button"
.
<button>
elementosPara usar grupos de botóns xustificados con <button>
elementos, debes envolver cada botón nun grupo de botóns . A maioría dos navegadores non aplican correctamente o noso CSS para xustificar os <button>
elementos, pero xa que admitimos menús despregables de botóns, podemos solucionar isto.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Use calquera botón para activar un menú despregable colocándoo dentro dun .btn-group
e proporcionando a marca de menú adecuada.
Os menús despregables de botóns requiren que se inclúa o complemento do menú despregable na túa versión de Bootstrap.
Converte un botón nun menú despregable con algúns cambios básicos de marcado.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Do mesmo xeito, cree menú despregable de botón dividido cos mesmos cambios de marcado, só cun botón separado.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Os menús despregables de botóns funcionan con botóns de todos os tamaños.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Activa os menús despregables enriba dos elementos engadindo .dropup
ao pai.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Amplía os controis do formulario engadindo texto ou botóns antes, despois ou a ambos os dous lados de calquera formato baseado en texto <input>
. Utilízase .input-group
con .input-group-addon
ou .input-group-btn
para antepoñer ou engadir elementos a un único .form-control
.
<input>
Só textualEvite usar <select>
elementos aquí, xa que non se poden definir completamente nos navegadores WebKit.
Evite usar <textarea>
elementos aquí xa rows
que nalgúns casos non se respectarán os seus atributos.
Cando se usan ferramentas ou popovers en elementos dentro dun.input-group
, terás que especificar a opción container: 'body'
para evitar efectos secundarios non desexados (como que o elemento se faga máis ancho e/ou perda as súas esquinas redondeadas cando se activa a información emerxente ou popover).
Non mesture grupos de formularios ou clases de columnas de grade directamente con grupos de entrada. En vez diso, aniñe o grupo de entrada dentro do grupo de formularios ou do elemento relacionado coa grade.
Os lectores de pantalla terán problemas cos teus formularios se non inclúes unha etiqueta para cada entrada. Para estes grupos de entrada, asegúrate de que calquera etiqueta ou funcionalidade adicional se transmita ás tecnoloxías de asistencia.
A técnica exacta que se utilizará (elementos visibles <label>
, <label>
elementos ocultos mediante a .sr-only
clase ou uso do atributo aria-label
, aria-labelledby
, aria-describedby
, title
ou placeholder
) e a información adicional que se debe transmitir variará dependendo do tipo exacto de widget de interface que esteas a implementar. Os exemplos desta sección proporcionan algúns enfoques suxeridos e específicos para cada caso.
Coloque un complemento ou botón a cada lado dunha entrada. Tamén pode colocar un a ambos os dous lados dunha entrada.
Non admitimos varios complementos ( .input-group-addon
ou .input-group-btn
) nun só lado.
Non admitimos varios controis de formulario nun só grupo de entrada.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
Engade as clases relativas de tamaño do formulario ao .input-group
propio e os contidos dentro redimensionaranse automaticamente, sen necesidade de repetir as clases de tamaño de control do formulario en cada elemento.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
Coloque calquera caixa de verificación ou opción de radio dentro do complemento dun grupo de entrada en lugar de texto.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Os botóns dos grupos de entrada son un pouco diferentes e requiren un nivel adicional de aniñación. En lugar de .input-group-addon
, terás que usar .input-group-btn
para envolver os botóns. Isto é necesario debido aos estilos de navegador predeterminados que non se poden anular.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<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>
Aínda que só podes ter un complemento por lado, podes ter varios botóns dentro dun só .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
Os navegadores dispoñibles en Bootstrap teñen marcado compartido, comezando pola .nav
clase base, así como estados compartidos. Cambia as clases modificadoras para cambiar entre cada estilo.
Teña en conta que a .nav-tabs
clase require a .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 o mesmo HTML, pero use no seu .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>
As pílulas tamén son apilables verticalmente. Só engade .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Fai facilmente as pestanas ou as pílulas do mesmo ancho do seu pai en pantallas de máis de 768 píxeles con .nav-justified
. Nas pantallas máis pequenas, as ligazóns de navegación están apiladas.
Actualmente non se admiten as ligazóns de navegación da barra de navegación xustificadas.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Para calquera compoñente de navegación (pestañas ou pílulas), engade ligazóns grises e sen efectos.disabled
de paso .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Engade menús despregables cun HTML extra e o complemento de JavaScript para menús despregables .
<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>
As barras de navegación son metacomponentes sensibles que serven como cabeceiras de navegación para a súa aplicación ou sitio. Comezan contraídos (e pódense alternar) nas vistas móbiles e vólvense horizontais a medida que aumenta o ancho da xanela dispoñible.
Actualmente non se admiten as ligazóns de navegación da barra de navegación xustificadas.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Substitúe a marca da barra de navegación pola súa propia imaxe cambiando o texto por un <img>
. Dado .navbar-brand
que ten o seu propio recheo e altura, é posible que teñas que anular algúns CSS dependendo da túa imaxe.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
Coloca o contido do formulario dentro .navbar-form
para un aliñamento vertical adecuado e un comportamento contraído en ventás estreitas. Use as opcións de aliñamento para decidir onde reside dentro do contido da barra de navegación.
Como aviso, .navbar-form
comparte gran parte do seu código .form-inline
mediante mixin. Algúns controis de formulario, como os grupos de entrada, poden requirir que os anchos fixos se mostren correctamente nunha barra de navegación.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Engade a .navbar-btn
clase aos <button>
elementos que non residen nun <form>
para centralos verticalmente na barra de navegación.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Envolve as cadeas de texto nun elemento con .navbar-text
, xeralmente nunha <p>
etiqueta para a interlineado e a cor adecuadas.
<p class="navbar-text">Signed in as Mark Otto</p>
Para as persoas que usan ligazóns estándar que non están dentro do compoñente de navegación da barra de navegación normal, use a .navbar-link
clase para engadir as cores adecuadas para as opcións da barra de navegación predeterminada e inversa.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Aliñar ligazóns de navegación, formularios, botóns ou texto, utilizando as clases de utilidade .navbar-left
ou . .navbar-right
Ambas clases engadirán un flotante CSS na dirección especificada. Por exemplo, para aliñar as ligazóns de navegación, colócaas nun separado <ul>
coa clase de utilidade respectiva aplicada.
Estas clases son versións mixtas de .pull-left
e .pull-right
, pero están destinadas a consultas multimedia para facilitar o manexo dos compoñentes da barra de navegación en todos os tamaños de dispositivos.
Engade .navbar-fixed-top
e inclúa un .container
ou .container-fluid
ao contido da barra de navegación para centrar e pad.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Engade .navbar-fixed-bottom
e inclúa un .container
ou .container-fluid
ao contido da barra de navegación para centrar e pad.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Crea unha barra de navegación de ancho completo que se desprace coa páxina engadindo .navbar-static-top
e incluíndo un .container
ou .container-fluid
para centrar e rellenar o contido da barra de navegación.
A diferenza das .navbar-fixed-*
clases, non necesitas cambiar ningún recheo no body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Modifique o aspecto da barra de navegación engadindo .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Indique a localización da páxina actual dentro dunha xerarquía de navegación.
Os separadores engádense automaticamente en CSS mediante :before
e content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Proporciona ligazóns de paxinación para o teu sitio ou aplicación co compoñente de paxinación de varias páxinas ou a alternativa de paginación máis sinxela .
Paxinación sinxela inspirada en Rdio, ideal para aplicacións e resultados de busca. O bloque grande é difícil de perder, facilmente escalable e ofrece grandes áreas de clic.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</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>
O compoñente de paxinación debe estar envolto nun <nav>
elemento para identificalo como unha sección de navegación para lectores de pantalla e outras tecnoloxías de asistencia. Ademais, como é probable que unha páxina teña xa máis dunha sección de navegación deste tipo (como a navegación principal na cabeceira ou a navegación na barra lateral), é recomendable proporcionar unha descripción que reflicta aria-label
o <nav>
seu propósito. Por exemplo, se o compoñente de paxinación se usa para navegar entre un conxunto de resultados de busca, unha etiqueta adecuada podería ser aria-label="Search results pages"
.
As ligazóns son personalizables para diferentes circunstancias. Utilízao .disabled
para ligazóns que non se pode facer clic e .active
para indicar a páxina 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>
Recomendamos que cambie as áncoras activas ou desactivadas por <span>
, ou omita a áncora no caso das frechas anteriores ou seguintes, para eliminar a función de clic mantendo os estilos previstos.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Queres unha paxinación máis grande ou máis pequena? Engadir .pagination-lg
ou .pagination-sm
para tamaños adicionais.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
Ligazóns anteriores e seguintes rápidas para implementacións de paxinación sinxelas con marcas e estilos lixeiros. É ideal para sitios sinxelos como blogs ou revistas.
Por defecto, o buscapersonas centra as ligazóns.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Alternativamente, pode aliñar cada ligazón aos 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>
As ligazóns de paginación tamén usan a .disabled
clase de utilidade xeral da 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>
Engade calquera das clases modificadoras mencionadas a continuación para cambiar o aspecto dunha 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>
Os problemas de renderización poden xurdir cando tes decenas de etiquetas en liña nun recipiente estreito, cada unha contén o seu propio inline-block
elemento (como unha icona). O xeito de evitar isto é a configuración display: inline-block;
. Para o contexto e un exemplo, consulte #13219 .
Resalte facilmente elementos novos ou non lidos engadindo un <span class="badge">
ás ligazóns, navegacións Bootstrap e moito máis.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Cando non haxa elementos novos ou sen ler, as insignias simplemente colapsarán (a través do :empty
selector de CSS) sempre que non exista contido.
As insignias non se colapsarán automaticamente en Internet Explorer 8 porque carece de compatibilidade co :empty
selector.
Inclúense estilos integrados para colocar distintivos en estados activos nas navegacións de pílulas.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
Un compoñente lixeiro e flexible que, opcionalmente, pode ampliar toda a ventana gráfica para mostrar o contido clave do teu sitio.
Esta é unha unidade de heroe sinxela, un simple compoñente de estilo jumbotron para chamar máis atención ao contido ou información destacados.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
Para que o jumbotron teña o ancho total e sen esquinas redondeadas, colócao fóra de todos os .container
s e, no seu lugar, engade un .container
dentro.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Un shell sinxelo para h1
espaciar e segmentar adecuadamente seccións de contido nunha páxina. Pode utilizar o elemento h1
predeterminado de ' small
, así como a maioría dos outros compoñentes (con estilos adicionais).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Estende o sistema de grade de Bootstrap co compoñente de miniaturas para mostrar facilmente cuadrículas de imaxes, vídeos, texto e moito máis.
Se estás a buscar unha presentación de miniaturas tipo Pinterest de diferentes alturas e/ou anchos, terás que usar un complemento de terceiros como Masonry , Isotope ou Salvattore .
De xeito predeterminado, as miniaturas de Bootstrap están deseñadas para mostrar as imaxes vinculadas cun marcado mínimo necesario.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Cun pouco de marcado adicional, é posible engadir calquera tipo de contido HTML como títulos, parágrafos ou botóns nas 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 mensaxes de comentarios contextuais para as accións típicas dos usuarios cun puñado de mensaxes de alerta dispoñibles e flexibles.
Envolve calquera texto e un botón de exclusión opcional .alert
nunha das catro clases contextuais (por exemplo, .alert-success
) para as mensaxes de alerta básicas.
As alertas non teñen clases predeterminadas, só clases base e modificadora. Unha alerta gris predeterminada non ten demasiado sentido, polo que tes que especificar un tipo mediante unha clase contextual. Escolle entre éxito, información, aviso ou perigo.
<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>
Constrúe calquera alerta engadindo un .alert-dismissible
botón opcional e pechar.
Para que as alertas non sexan totalmente funcionales, debes usar o 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úrate de usar o <button>
elemento co data-dismiss="alert"
atributo data.
Use a .alert-link
clase de utilidade para proporcionar rapidamente ligazóns de cores coincidentes en calquera 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>
Proporciona comentarios actualizados sobre o progreso dun fluxo de traballo ou acción con barras de progreso sinxelas pero flexibles.
As barras de progreso usan transicións e animacións CSS3 para conseguir algúns dos seus efectos. Estas funcións non son compatibles con Internet Explorer 9 e anteriores, nin con versións anteriores de Firefox. Opera 12 non admite animacións.
Se o teu sitio web ten unha Política de seguranza de contido (CSP) que non permite style-src 'unsafe-inline'
, non poderás utilizar style
atributos en liña para establecer o ancho das barras de progreso como se mostra nos nosos exemplos a continuación. Os métodos alternativos para configurar os anchos que son compatibles con CSP estritos inclúen usar un pouco de JavaScript personalizado (que establece element.style.width
) ou usar clases CSS personalizadas.
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>
Elimina a clase <span>
with .sr-only
da barra de progreso para mostrar unha porcentaxe 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 o texto da etiqueta permanece lexible mesmo en porcentaxes baixas, considere engadir un min-width
á 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>
As barras de progreso usan algúns dos mesmos botóns e clases de alerta para estilos consistentes.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Usa un degradado para crear un efecto de raias. Non dispoñible en IE9 e abaixo.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Engadir .active
a .progress-bar-striped
para animar as raias de dereita a esquerda. Non dispoñible en IE9 e abaixo.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
Coloca varias barras no mesmo .progress
para apilalas.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Estilos de obxectos abstractos para construír varios tipos de compoñentes (como comentarios de blog, chíos, etc.) que presentan unha imaxe aliñada á esquerda ou á dereita xunto con contido textual.
O medio predeterminado mostra un obxecto multimedia (imaxes, vídeo, audio) á esquerda ou á dereita dun bloque de contido.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
As clases .pull-left
e .pull-right
tamén existen e usáronse anteriormente como parte do compoñente multimedia, pero están en desuso para ese uso a partir da versión 3.3.0. Son aproximadamente equivalentes a .media-left
e .media-right
, excepto que .media-right
deberían colocarse despois do .media-body
no html.
As imaxes ou outros medios pódense aliñar arriba, no medio ou abaixo. O valor predeterminado está aliñado na parte superior.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
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>
Cun pouco de marcado extra, podes usar a lista de medios dentro (útil para os fíos de comentarios ou as listas de artigos).
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
Os grupos de listas son un compoñente flexible e poderoso para mostrar non só listas simples de elementos, senón tamén complexas con contido personalizado.
O grupo de listas máis básico é simplemente unha lista sen ordenar con elementos de lista e as clases adecuadas. Constrúeo coas opcións que seguen ou o teu propio CSS segundo sexa necesario.
<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>
Engade o compoñente de insignias a calquera elemento do grupo da lista e situarase automaticamente á dereita.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Vincule os elementos do grupo da lista usando etiquetas de ancoraxe en lugar de elementos da lista (iso tamén significa un pai <div>
en lugar de un <ul>
). Non hai necesidade de pais individuais arredor de cada elemento.
<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>
Os elementos do grupo da lista poden ser botóns en lugar de elementos da lista (iso tamén significa un pai <div>
en lugar de un <ul>
). Non hai necesidade de pais individuais arredor de cada elemento. Non use as .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>
Engádeo .disabled
a a .list-group-item
para que apareza desactivado.
<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 contextuais para dar estilo aos elementos da lista, predeterminados ou vinculados. Tamén inclúe .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>
Engade case calquera HTML dentro, mesmo para grupos de listas vinculadas como o seguinte.
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>
Aínda que non sempre é necesario, ás veces necesitas poñer o teu DOM nunha caixa. Para esas situacións, proba o compoñente do panel.
Por defecto, todo o .panel
que fai é aplicar un bordo básico e un recheo para conter algún contido.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Engade facilmente un recipiente de título ao teu panel con .panel-heading
. Tamén pode incluír calquera <h1>
- <h6>
cunha .panel-title
clase para engadir un título predefinido. Non obstante, os tamaños de letra de <h1>
- <h6>
son substituídos por .panel-heading
.
Para colorear correctamente as ligazóns, asegúrate de colocar as ligazóns nos títulos dentro de .panel-title
.
<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>
Axustar botóns ou texto secundario en .panel-footer
. Teña en conta que os pés de páxina dos paneis non herdan cores e bordos cando se usan variacións contextuais xa que non están destinados a estar en primeiro plano.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Do mesmo xeito que outros compoñentes, fai facilmente un panel máis significativo para un contexto particular engadindo calquera das clases de estado contextuais.
<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>
Engade calquera que non teña bordes .table
dentro dun panel para un deseño perfecto. Se hai un .panel-body
, engadimos un bordo extra na parte superior da táboa para a separación.
Algún contido do panel predeterminado aquí. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | Nome | Apelido | Nome de usuario |
---|---|---|---|
1 | Marcos | Oto | @mdo |
2 | Xacobe | Thornton | @graxas |
3 | Larry | o paxaro |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Se non hai corpo do panel, o compoñente móvese da cabeceira do panel á táboa sen interrupción.
# | Nome | Apelido | Nome de usuario |
---|---|---|---|
1 | Marcos | Oto | @mdo |
2 | Xacobe | Thornton | @graxas |
3 | Larry | o paxaro |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Inclúe facilmente grupos de listas de ancho completo dentro de calquera panel.
Algún contido do panel predeterminado aquí. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Permite aos navegadores determinar as dimensións do vídeo ou da presentación de diapositivas en función da anchura do bloque que o contén creando unha relación intrínseca que se escalará correctamente en calquera dispositivo.
As regras aplícanse directamente aos elementos <iframe>
, <embed>
, <video>
, e <object>
; opcionalmente use unha clase descendente explícita .embed-responsive-item
cando quere facer coincidir o estilo doutros atributos.
Pro-Tip! Non é necesario que inclúas frameborder="0"
nas túas <iframe>
s xa que o anulamos por ti.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Use o pozo como un efecto sinxelo sobre un elemento para darlle un efecto de inserción.
<div class="well">...</div>
Controla o recheo e as esquinas redondeadas con dúas clases de modificadores opcionais.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>