Compoñentes

Decenas de compoñentes reutilizables construídos para ofrecer navegación, alertas, popovers e moito máis.

Exemplos

Dúas opcións básicas, xunto con dúas variacións máis específicas.

Grupo de botón único

Envolve unha serie de botóns .btncon .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Esquerda </button>
  3. <button class = "btn" > Medio </button>
  4. <button class = "btn" > Dereita </button>
  5. </div>

Múltiples grupos de botóns

Combina conxuntos de <div class="btn-group">para <div class="btn-toolbar">os compoñentes máis complexos.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Grupos de botóns verticais

Fai que un conxunto de botóns aparezan apilados verticalmente en lugar de horizontal.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

Caixa de verificación e sabores de radio

Os grupos de botóns tamén poden funcionar como radios, onde só un botón pode estar activo, ou caixas de verificación, onde pode estar activo calquera número de botóns. Consulta os documentos de JavaScript para iso.

Menú despregable en grupos de botóns

Aviso!Os botóns con menú despregable deben estar envoltos individualmente .btn-groupdentro dunha .btn-toolbarpara a representación correcta.

Visión xeral e exemplos

Use calquera botón para activar un menú despregable colocándoo dentro dun .btn-groupe proporcionando a marca de menú adecuada.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Acción
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "menú desplegable" >
  7. <!-- ligazóns do menú despregable -->
  8. </ul>
  9. </div>

Funciona con todos os tamaños de botóns

Os menús despregables dos botóns funcionan en calquera tamaño: .btn-large, .btn-small, ou .btn-mini.

Require JavaScript

Os menús despregables de botóns requiren o complemento Bootstrap para funcionar.

Nalgúns casos, como os móbiles, os menús despregables estenderanse fóra da ventana gráfica. Debe resolver o aliñamento manualmente ou con JavaScript personalizado.


Dividir menú despregable de botóns

Partindo dos estilos e marcas do grupo de botóns, podemos crear facilmente un botón dividido. Os botóns de división presentan unha acción estándar á esquerda e un menú despregable á dereita con ligazóns contextuais.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Acción </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "menr desplegable" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "menú desplegable" >
  7. <!-- ligazóns do menú despregable -->
  8. </ul>
  9. </div>

Tallas

Use as clases de botóns adicionais .btn-mini, .btn-smallou .btn-largepara o tamaño.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Acción </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "menr desplegable" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "menú desplegable" >
  7. <!-- ligazóns do menú despregable -->
  8. </ul>
  9. </div>

Menús desplegables

Os menús despregables tamén se poden cambiar de abaixo cara arriba engadindo unha única clase ao pai inmediato de .dropdown-menu. Voltará a dirección do .caretmenú e cambiará a posición do propio menú para moverse de abaixo cara arriba en lugar de de arriba abaixo.

  1. <div class = "eliminación do grupo btn" >
  2. <button class = "btn" > Despegar </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "menr desplegable" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "menú desplegable" >
  7. <!-- ligazóns do menú despregable -->
  8. </ul>
  9. </div>

Paxinación estándar

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.

  1. <div class = "paxinación" >
  2. <ul>
  3. <li><a href = "#" > Anterior </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > Seguinte </a></li>
  10. </ul>
  11. </div>

Opcións

Estados activos e desactivados

As ligazóns son personalizables para diferentes circunstancias. Utilízao .disabledpara ligazóns que non se pode facer clic e .activepara indicar a páxina actual.

  1. <div class = "paxinación" >
  2. <ul>
  3. <li class = "desactivado" ><a href = "#" > « </a></li>
  4. <li class = "active" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Opcionalmente, pode intercambiar áncoras activas ou desactivadas por tramos para eliminar a función de clic mantendo os estilos previstos.

  1. <div class = "paxinación" >
  2. <ul>
  3. <li class = "desactivado" ><span> « </span></li>
  4. <li class = "activo" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Tallas

Queres unha paxinación máis grande ou máis pequena? Engade .pagination-large, .pagination-small, ou .pagination-minipara tamaños adicionais.

  1. <div class = "paxinación paxinación-grande" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "paxinación" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "paxinación paxinación-pequena" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "paxinación paginación-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Aliñación

Engade unha das dúas clases opcionais para cambiar o aliñamento das ligazóns de paxinación: .pagination-centerede .pagination-right.

  1. <div class = "paxinación centrada na paxinación" >
  2. ...
  3. </div>
  1. <div class = "paxinación paxinación-dereita" >
  2. ...
  3. </div>

Buscapersonas

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.

Exemplo predeterminado

Por defecto, o buscapersonas centra as ligazóns.

  1. <ul class = "pager" >
  2. <li><a href = "#" > Anterior </a></li>
  3. <li><a href = "#" > Seguinte </a></li>
  4. </ul>

Ligazóns aliñadas

Alternativamente, pode aliñar cada ligazón aos lados:

  1. <ul class = "pager" >
  2. <li class = "anterior" >
  3. <a href = "#" > Máis vello </a>
  4. </li>
  5. <li class = "seguinte" >
  6. <a href = "#" > Máis recente → </a>
  7. </li>
  8. </ul>

Estado opcional desactivado

As ligazóns de paginación tamén usan a .disabledclase de utilidade xeral da paginación.

  1. <ul class = "pager" >
  2. <li class = "anterior desactivado" >
  3. <a href = "#" > Máis vello </a>
  4. </li>
  5. ...
  6. </ul>

Etiquetas

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>

Insignias

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>

Facilmente plegable

Para facilitar a implementación, as etiquetas e distintivos simplemente colapsarán (a través do :emptyselector de CSS) cando non exista contido.

Unidade heroe

Un compoñente lixeiro e flexible para mostrar o contido clave do teu sitio. Funciona ben en sitios de marketing e contido pesado.

Ola, mundo!

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.

Aprender máis

  1. <div class = "unidade heroe" >
  2. <h1> Título </h1>
  3. <p> Lema </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Aprender máis
  7. </a>
  8. </p>
  9. </div>

Cabeceira da páxina

Un shell sinxelo para h1espaciar e segmentar adecuadamente seccións de contido nunha páxina. Pode utilizar o elemento h1predeterminado smallde , así como a maioría dos outros compoñentes (con estilos adicionais).

  1. <div class = "cabeceira da páxina" >
  2. <h1> Exemplo de cabeceira da páxina <small> Subtexto para a cabeceira </small></h1>
  3. </div>

Miniaturas predeterminadas

De xeito predeterminado, as miniaturas de Bootstrap están deseñadas para mostrar as imaxes vinculadas cun marcado mínimo necesario.

Altamente personalizable

Cun pouco de marcado adicional, é posible engadir calquera tipo de contido HTML como títulos, parágrafos ou botóns nas miniaturas.

  • 300 x 200

    Etiqueta en miniatura

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Acción Acción

  • 300 x 200

    Etiqueta en miniatura

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Acción Acción

  • 300 x 200

    Etiqueta en miniatura

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Acción Acción

Por que usar miniaturas

As miniaturas (anteriormente .media-gridata 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.

Marcado sinxelo e flexible

O marcado de miniaturas é sinxelo: un ulcon calquera número de lielementos é 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.

Usa tamaños de columna de grade

Por último, o compoñente de miniaturas usa clases de sistemas de grade existentes, como .span2ou .span3para controlar as dimensións das miniaturas.

Marcado

Como se mencionou anteriormente, o marcado necesario para as miniaturas é lixeiro e sinxelo. Aquí tes unha ollada á configuración predeterminada para as imaxes ligadas :

  1. <ul class = "miniaturas" >
  2. <li class = "span4" >
  3. <a href = "#" class = "miniatura" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "miniaturas" >
  2. <li class = "span4" >
  3. <div class = "miniatura" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Etiqueta en miniatura </h3>
  6. <p> Lenda de miniatura... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Máis exemplos

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.

Alerta predeterminada

Envolve calquera texto e un botón de exclusión opcional .alertpara obter unha mensaxe básica de alerta de aviso.

Aviso! É mellor que te comprobes, non tes demasiado bo aspecto.
  1. <div class = "alerta" >
  2. <button type = "button" class = "close" data-dismiss = "alerta" > × </button>
  3. <strong> Aviso! </strong> O mellor que che faga a ti mesmo, non tes un aspecto moi bo.
  4. </div>

Botóns de exclusión

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.

  1. <a href = "#" class = "close" data-dismiss = "alerta" > × </a>

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.

  1. <button type = "button" class = "close" data-dismiss = "alerta" > × </button>

Ignorar alertas mediante JavaScript

Use o complemento de alertas jQuery para despedir alertas de forma rápida e sinxela.


Opcións

Para mensaxes máis longas, engade .alert-block.

Aviso!

É 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.

  1. <div class = "bloqueo de alertas de alerta" >
  2. <button type = "button" class = "close" data-dismiss = "alerta" > × </button>
  3. <h4> Aviso! </h4>
  4. O mellor que te verifiques, non estás...
  5. </div>

Alternativas contextuais

Engade clases opcionais para cambiar a connotación dunha alerta.

Erro ou perigo

¡Oh! Cambia algunhas cousas e tenta enviar de novo.
  1. <div class = "erro de alerta de alerta" >
  2. ...
  3. </div>

Éxito

Ben feito! Leu correctamente esta importante mensaxe de alerta.
  1. <div class = "alerta de éxito-alerta" >
  2. ...
  3. </div>

Información

Aviso! Esta alerta precisa da túa atención, pero non é moi importante.
  1. <div class = "información de alerta de alerta" >
  2. ...
  3. </div>

Exemplos e marcado

Básico

Barra de progreso predeterminada cun gradiente vertical.

  1. <div class = "progreso" >
  2. <div class = "bar" style = " ancho : 60 %; " ></div>
  3. </div>

Raias

Usa un degradado para crear un efecto de raias. Non dispoñible en IE7-8.

  1. <div class = "progress progress-striped" >
  2. <div class = "bar" style = " ancho : 20 %; " ></div>
  3. </div>

Animado

Engadir .activea .progress-stripedpara animar as raias de dereita a esquerda. Non dispoñible en todas as versións de IE.

  1. <div class = "progress progress-striped activo" >
  2. <div class = "bar" style = " ancho : 40 %; " ></div>
  3. </div>

Apilados

Coloca varias barras no mesmo .progresspara apilalas.

  1. <div class = "progreso" >
  2. <div class = "bar bar-success" style = " ancho : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " ancho : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " ancho : 10 %; " ></div>
  5. </div>

Opcións

Cores adicionais

As barras de progreso usan algúns dos mesmos botóns e clases de alerta para estilos consistentes.

  1. <div class = "información do progreso do progreso" >
  2. <div class = "bar" style = " ancho : 20 % " ></div>
  3. </div>
  4. <div class = "progreso progreso-éxito" >
  5. <div class = "bar" style = " ancho : 40 % " ></div>
  6. </div>
  7. <div class = "aviso de progreso de progreso" >
  8. <div class = "bar" style = " ancho : 60 % " ></div>
  9. </div>
  10. <div class = "progreso progreso-perigo" >
  11. <div class = "bar" style = " ancho : 80 % " ></div>
  12. </div>

Barras de raias

Semellante ás cores sólidas, temos varias barras de progreso con raias.

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " ancho : 20 % " ></div>
  3. </div>
  4. <div class = "progreso progreso-éxito progreso-striped" >
  5. <div class = "bar" style = " ancho : 40 % " ></div>
  6. </div>
  7. <div class = "progreso progreso-advertencia progreso-striped" >
  8. <div class = "bar" style = " ancho : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div class = "bar" style = " ancho : 80 % " ></div>
  12. </div>

Soporte de navegador

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.

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.

Exemplo predeterminado

Os medios predeterminados permiten facer flotar un obxecto multimedia (imaxes, vídeo, audio) á esquerda ou á dereita dun bloque de contido.

64x64

Título multimedia

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.
64x64

Título multimedia

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.
64x64

Título multimedia

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.
  1. <div class = "medios" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Título multimedia </h4>
  7. ...
  8.  
  9. <!-- Obxecto multimedia anidado -->
  10. <div class = "medios" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Lista de medios

Cun pouco de marcado extra, podes usar a lista de medios dentro (útil para os fíos de comentarios ou as listas de artigos).

  • 64x64

    Título multimedia

    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.

    64x64

    Título multimedia anidado

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Título multimedia anidado

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Título multimedia anidado

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Título multimedia

    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.
  1. <ul class = "lista de medios" >
  2. <li class = "medios" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Título multimedia </h4>
  8. ...
  9.  
  10. <!-- Obxecto multimedia anidado -->
  11. <div class = "medios" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Pozos

Use o pozo como un efecto sinxelo sobre un elemento para darlle un efecto de inserción.

Mira, estou nun pozo!
  1. <div class = "ben" >
  2. ...
  3. </div>

Clases optativas

Controla o recheo e as esquinas redondeadas con dúas clases de modificadores opcionais.

Mira, estou nun pozo!
  1. <div class = "ben ben grande" >
  2. ...
  3. </div>
Mira, estou nun pozo!
  1. <div class = "ben ben pequeno" >
  2. ...
  3. </div>

Pechar icona

Usa a icona de peche xenérico para descartar contido como modais e alertas.

  1. <button class = "pechar" > × </button>

Os dispositivos iOS requiren un href="#"evento de clic se prefire usar unha áncora.

  1. <a class = "close" href = "#" > × </a>

Clases auxiliares

Clases sinxelas e centradas para pequenos axustes de visualización ou comportamento.

.tirar-esquerda

Flota un elemento á esquerda

  1. class = "tirar á esquerda"
  1. . tirar - esquerda {
  2. flotar : esquerda ;
  3. }

.tirar á dereita

Flota un elemento cara á dereita

  1. class = "tirar á dereita"
  1. . tirar - dereita {
  2. flotar : dereita ;
  3. }

.mutado

Cambia a cor dun elemento a#999

  1. class = "silenciado"
  1. . silenciado {
  2. cor : #999;
  3. }

.clearfix

Limpar floatcalquera elemento

  1. class = "clearfix"
  1. . clearfix {
  2. * zoom : 1 ;
  3. &: antes ,
  4. &: despois de {
  5. visualización : táboa ;
  6. contido : "" ;
  7. }
  8. &: despois de {
  9. claro : ambos ;
  10. }
  11. }