Decenas de compoñentes reutilizables construídos para ofrecer navegación, alertas, popovers e moito máis.
Menú contextual conmutable para mostrar listas de ligazóns. Feito interactivo co complemento javascript despregable .
- <ul class = "menú desplegable" role = "menú" aria-labelledby = "menú desplegable" >
- <li><a tabindex = "-1" href = "#" > Acción </a></li>
- <li><a tabindex = "-1" href = "#" > Outra acción </a></li>
- <li><a tabindex = "-1" href = "#" > Aquí hai outra cousa </a></li>
- <li class = "divisor" ></li>
- <li><a tabindex = "-1" href = "#" > Ligazón separada </a></li>
- </ul>
Mirando só o menú despregable, aquí está o HTML necesario. Debes envolver o disparador do menú despregable e o menú despregable dentro .dropdown
de , ou noutro elemento que declare position: relative;
. Despois só crea o menú.
- <div class = "menú desplegable" >
- <!-- Ligazón ou botón para alternar o menú despregable -->
- <ul class = "menú desplegable" role = "menú" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#" > Acción </a></li>
- <li><a tabindex = "-1" href = "#" > Outra acción </a></li>
- <li><a tabindex = "-1" href = "#" > Aquí hai outra cousa </a></li>
- <li class = "divisor" ></li>
- <li><a tabindex = "-1" href = "#" > Ligazón separada </a></li>
- </ul>
- </div>
Aliñar os menús á dereita e engadir niveis adicionais de menú despregable.
Engadir .pull-right
ao .dropdown-menu
aliñar á dereita o menú despregable.
- <ul class = "menú desplegable pull-right" role = "menú" aria-labelledby = "dLabel" >
- ...
- </ul>
Engade un nivel adicional de menús despregables, que aparecen ao pasar o cursor como os de OS X, con algunhas simples adicións de marcas. Engadir .dropdown-submenu
a calquera li
nun menú despregable existente para o estilo automático.
- <ul class = "menú desplegable" role = "menú" aria-labelledby = "dLabel" >
- ...
- <li class = "submenú desplegable" >
- <a tabindex = "-1" href = "#" > Máis opcións </a>
- <ul class = "menú desplegable" >
- ...
- </ul>
- </li>
- </ul>
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.
- <div class = "paxinación" >
- <ul>
- <li><a href = "#" > Anterior </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 = "#" > Seguinte </a></li>
- </ul>
- </div>
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.
- <div class = "paxinación" >
- <ul>
- <li class = "disabled" ><a href = "#" > Anterior </a></li>
- <li class = "active" ><a href = "#" > 1 </a></li>
- ...
- </ul>
- </div>
Engade unha das dúas clases opcionais para cambiar o aliñamento das ligazóns de paxinación: .pagination-centered
e .pagination-right
.
- <div class = "paxinación centrada na paxinación" >
- ...
- </div>
- <div class = "paxinación paxinación-dereita" >
- ...
- </div>
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.
- <ul class = "pager" >
- <li><a href = "#" > Anterior </a></li>
- <li><a href = "#" > Seguinte </a></li>
- </ul>
Alternativamente, pode aliñar cada ligazón aos lados:
- <ul class = "pager" >
- <li class = "anterior" >
- <a href = "#" > ← Máis vello </a>
- </li>
- <li class = "seguinte" >
- <a href = "#" > Máis recente → </a>
- </li>
- </ul>
As ligazóns de paginación tamén usan a .disabled
clase de utilidade xeral da paginación.
- <ul class = "pager" >
- <li class = "anterior desactivado" >
- <a href = "#" > ← Máis vello </a>
- </li>
- ...
- </ul>
Etiquetas | Marcado |
---|---|
Por defecto | <span class="label">Default</span> |
Éxito | <span class="label label-success">Success</span> |
Aviso | <span class="label label-warning">Warning</span> |
Importante | <span class="label label-important">Important</span> |
Información | <span class="label label-info">Info</span> |
inverso | <span class="label label-inverse">Inverse</span> |
Nome | Exemplo | Marcado |
---|---|---|
Por defecto | 1 | <span class="badge">1</span> |
Éxito | 2 | <span class="badge badge-success">2</span> |
Aviso | 4 | <span class="badge badge-warning">4</span> |
Importante | 6 | <span class="badge badge-important">6</span> |
Información | 8 | <span class="badge badge-info">8</span> |
inverso | 10 | <span class="badge badge-inverse">10</span> |
Un compoñente lixeiro e flexible para mostrar o contido clave do teu sitio. Funciona ben en sitios de marketing e contido pesado.
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 = "unidade heroe" >
- <h1> Título </h1>
- <p> Lema </p>
- <p>
- <a class = "btn btn-primary btn-large" >
- Aprender máis
- </a>
- </p>
- </div>
Un shell sinxelo para h1
espaciar e segmentar adecuadamente seccións de contido nunha páxina. Pode utilizar o elemento h1
predeterminado small
, así como a maioría dos outros compoñentes (con estilos adicionais).
- <div class = "cabeceira da páxina" >
- <h1> Exemplo de cabeceira da páxina </h1>
- </div>
De xeito predeterminado, as miniaturas de Bootstrap están deseñadas para mostrar as imaxes vinculadas cun marcado mínimo necesario.
Cun pouco de marcado adicional, é posible engadir calquera tipo de contido HTML como títulos, parágrafos ou botóns nas miniaturas.
As miniaturas (anteriormente .media-grid
ata a versión 1.4) son excelentes para cuadrículas de fotos ou vídeos, resultados de busca de imaxes, produtos de venda polo miúdo, carteiras e moito máis. Poden ser ligazóns ou contido estático.
O marcado de miniaturas é sinxelo: un ul
con calquera número de li
elementos é todo o que se require. Tamén é súper flexible, xa que permite que calquera tipo de contido teña un pouco máis de marcado para envolver o teu contido.
Por último, o compoñente de miniaturas usa clases de sistemas de grade existentes, como .span2
ou .span3
para controlar as dimensións das miniaturas.
Como se mencionou anteriormente, o marcado necesario para as miniaturas é lixeiro e sinxelo. Aquí tes unha ollada á configuración predeterminada para as imaxes ligadas :
- <ul class = "miniaturas" >
- <li class = "span4" >
- <a href = "#" class = "miniatura" >
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </li>
- ...
- </ul>
Para o contido HTML personalizado en miniaturas, o marcado cambia lixeiramente. Para permitir o contido de nivel de bloque en calquera lugar, cambiamos <a>
por un <div>
similar:
- <ul class = "miniaturas" >
- <li class = "span4" >
- <div class = "miniatura" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> Etiqueta en miniatura </h3>
- <p> Lenda de miniatura... </p>
- </div>
- </li>
- ...
- </ul>
Explora todas as túas opcións coas distintas clases de cuadrícula dispoñibles para ti. Tamén podes mesturar e combinar diferentes tamaños.
Envolve calquera texto e un botón de exclusión opcional .alert
para obter unha mensaxe básica de alerta de aviso.
- <div class = "alerta" >
- <button type = "button" class = "close" data-dismiss = "alerta" > × </button>
- <strong> Aviso! </strong> O mellor que che faga a ti mesmo, non tes un aspecto moi bo.
- </div>
Os navegadores Mobile Safari e Mobile Opera, ademais do data-dismiss="alert"
atributo, requiren un href="#"
para a eliminación de alertas ao usar unha <a>
etiqueta.
- <a href = "#" class = "close" data-dismiss = "alerta" > × </button>
Alternativamente, pode usar un <button>
elemento co atributo de datos, o que optamos por facer para os nosos documentos. Cando uses <button>
, debes incluír type="button"
ou os teus formularios poden non enviarse.
- <button type = "button" class = "close" data-dismiss = "alerta" > × </button>
Use o complemento de alertas jQuery para despedir alertas de forma rápida e sinxela.
Para mensaxes máis longas, engade .alert-block
.
É mellor que te comprobes, non tes demasiado bo aspecto. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "bloqueo de alertas de alerta" >
- <button type = "button" class = "close" data-dismiss = "alerta" > × </button>
- <h4> Aviso! </h4>
- O mellor que te comprobe, non estás...
- </div>
Engade clases opcionais para cambiar a connotación dunha alerta.
- <div class = "erro de alerta de alerta" >
- ...
- </div>
- <div class = "alerta de éxito-alerta" >
- ...
- </div>
- <div class = "información de alerta de alerta" >
- ...
- </div>
Barra de progreso predeterminada cun gradiente vertical.
- <div class = "progreso" >
- <div class = "bar" style = " ancho : 60 %; " ></div>
- </div>
Usa un degradado para crear un efecto de raias. Non dispoñible en IE7-8.
- <div class = "progress progress-striped" >
- <div class = "bar" style = " ancho : 20 %; " ></div>
- </div>
Engadir .active
a .progress-striped
para animar as raias de dereita a esquerda. Non dispoñible en todas as versións de IE.
- <div class = "progress progress-striped activo" >
- <div class = "bar" style = " ancho : 40 %; " ></div>
- </div>
Coloca varias barras no mesmo .progress
para apilalas.
- <div class = "progreso" >
- <div class = "bar bar-success" style = " ancho : 35 %; " ></div>
- <div class = "bar bar-warning" style = " ancho : 20 %; " ></div>
- <div class = "bar bar-danger" style = " ancho : 10 %; " ></div>
- </div>
As barras de progreso usan algúns dos mesmos botóns e clases de alerta para estilos consistentes.
- <div class = "información do progreso do progreso" >
- <div class = "bar" style = " ancho : 20 % " ></div>
- </div>
- <div class = "progreso progreso-éxito" >
- <div class = "bar" style = " ancho : 40 % " ></div>
- </div>
- <div class = "aviso de progreso de progreso" >
- <div class = "bar" style = " ancho : 60 % " ></div>
- </div>
- <div class = "progreso progreso-perigo" >
- <div class = "bar" style = " ancho : 80 % " ></div>
- </div>
Semellante ás cores sólidas, temos varias barras de progreso con raias.
- <div class = "progress progress-info progress-striped" >
- <div class = "bar" style = " ancho : 20 % " ></div>
- </div>
- <div class = "progreso progreso-éxito progreso-striped" >
- <div class = "bar" style = " ancho : 40 % " ></div>
- </div>
- <div class = "progreso progreso-advertencia progreso-striped" >
- <div class = "bar" style = " ancho : 60 % " ></div>
- </div>
- <div class = "progress progress-danger progress-striped" >
- <div class = "bar" style = " ancho : 80 % " ></div>
- </div>
As barras de progreso usan degradados, transicións e animacións CSS3 para conseguir todos os seus efectos. Estas funcións non son compatibles con IE7-9 ou versións anteriores de Firefox.
As versións anteriores a Internet Explorer 10 e Opera 12 non admiten animacións.
Use o pozo como un efecto sinxelo sobre un elemento para darlle un efecto de inserción.
- <div class = "ben" >
- ...
- </div>
Controla o recheo e as esquinas redondeadas con dúas clases de modificadores opcionais.
- <div class = "ben ben grande" >
- ...
- </div>
- <div class = "ben ben pequeno" >
- ...
- </div>
Usa a icona de peche xenérico para descartar contido como modais e alertas.
- <button class = "pechar" > × </button>
iOS devices require an href="#" for click events if you rather use an anchor.
- <a class="close" href="#">×</a>
Simple, focused classes for small display or behavior tweaks.
Float an element left
- class="pull-left"
- .pull-left {
- float: left;
- }
Float an element right
- class="pull-right"
- .pull-right {
- float: right;
- }
Change an element's color to #999
- class="muted"
- .muted {
- color: #999;
- }
Clear the float
on any element
- class="clearfix"
- .clearfix {
- *zoom: 1;
- &:before,
- &:after {
- display: table;
- content: "";
- }
- &:after {
- clear: both;
- }
- }