Decenas de compoñentes reutilizables están integrados en Bootstrap para proporcionar navegación, alertas, popovers e moito máis.
Paxinación ultra simplista e de estilo minimalista 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.
As ligazóns son personalizables e funcionan en varias circunstancias coa clase correcta. .disabled
para ligazóns non clicables e .active
para páxina actual.
Engade calquera das dúas clases opcionais para cambiar o aliñamento das ligazóns de paxinación: .pagination-centered
e .pagination-right
.
O compoñente de paxinación predeterminado é flexible e funciona en varias variacións.
Envolto nun <div>
, a paxinación é só un <ul>
.
- <div class = "paxinación" >
- <ul>
- <li><a href = "#" > Anterior </a></li>
- <li class = "activo" >
- <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>
O compoñente paginador é un conxunto de ligazóns para implementacións de paxinación sinxelas con marcas lixeiras e estilos aínda máis claros. É 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>
Etiquetas | Marcado |
---|---|
Por defecto | <span class="label">Default</span> |
Novo | <span class="label label-success">New</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> |
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 = "span3" >
- <a href = "#" class = "miniatura" >
- <img src = "https://placehold.it/260x180" 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 = "span3" >
- <div class = "miniatura" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Etiqueta en miniatura </h5>
- <p> Lenda de miniatura aquí mesmo... </p>
- </div>
- </li>
- ...
- </ul>
Con Bootstrap 2, simplificamos a clase base: .alert
en lugar de .alert-message
. Tamén reducimos o marcado mínimo requirido: non <p>
se require por defecto, só o outter <div>
.
Para un compoñente máis duradeiro e con menos código, eliminamos o aspecto diferenciador das alertas de bloqueo, as mensaxes que veñen con máis recheo e normalmente máis texto. A clase tamén cambiou a .alert-block
.
Bootstrap inclúe un excelente complemento de jQuery que admite mensaxes de alerta, o que fai que descartalos sexa rápido e sinxelo.
Envolve a túa mensaxe e unha icona de peche opcional nun div cunha clase sinxela.
- <div class = "alerta" >
- <a class = "pechar" > × </a>
- <strong> Aviso! </strong> O mellor que che faga a ti mesmo, non tes un aspecto moi bo.
- </div>
Estende facilmente a mensaxe de alerta estándar con dúas clases opcionais: .alert-block
para máis controis de recheo e texto e .alert-heading
para un título coincidente.
É 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" >
- <a class = "pechar" > × </a>
- <h4 class = "alert-heading" > Aviso! </h4>
- O mellor que te verifiques, non estás...
- </div>
- <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"
- estilo = " ancho : 60 %; " ></div>
- </div>
Usa un degradado para crear un efecto de raias.
- <div class = "información do progreso do progreso
- con franxas de progreso" >
- <div class = "bar"
- estilo = " ancho : 20 %; " ></div>
- </div>
Toma o exemplo de raias e anímao.
- <div class = "progreso progreso-perigo
- activo con franxas de progreso" >
- <div class = "bar"
- estilo = " ancho : 40 %; " ></div>
- </div>
As barras de progreso utilizan algúns dos mesmos nomes de clases como botóns e alertas para un estilo similar.
.progress-info
.progress-success
.progress-danger
Alternativamente, pode personalizar os ficheiros LESS e tirar as súas propias cores e tamaños.
As barras de progreso usan transicións CSS3, polo que se axusta dinámicamente o ancho mediante javascript, cambiará o tamaño sen problemas.
Se usas a .active
clase, as túas .progress-striped
barras de progreso animarán as franxas de esquerda a dereita.
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-8 ou versións anteriores de Firefox.
Opera non admite animacións neste momento.
Use o pozo como un efecto sinxelo sobre un elemento para darlle un efecto de inserción.
- <div class = "ben" >
- ...
- </div>
Usa a icona de peche xenérico para descartar contido como modais e alertas.
- <a class = "pechar" > × </a>