Compoñentes

Decenas de compoñentes reutilizables están integrados en Bootstrap para proporcionar navegación, alertas, popovers e moito máis.

Grupos de botóns

Use grupos de botóns para unir varios botóns xuntos como un compoñente composto. Constrúeos cunha serie de <a>ou <button>elementos.

Mellores prácticas

Recomendamos as seguintes pautas para usar grupos de botóns e barras de ferramentas:

  • Use sempre o mesmo elemento nun único grupo de botóns <a>ou <button>.
  • Non mesture botóns de cores diferentes no mesmo grupo de botóns.
  • Use iconas ademais do texto ou en lugar do texto, pero asegúrese de incluír o texto alternativo e do título cando corresponda.

Os grupos de botóns relacionados con menús despregables (ver máis abaixo) deberían chamarse por separado e incluír sempre un cursor despregable para indicar o comportamento previsto.

Exemplo predeterminado

Así é como busca o HTML para un grupo de botóns estándar construído con botóns de etiqueta de ancoraxe:

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

Exemplo de barra de ferramentas

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>

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.

Obter o javascript »

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.

Menú despregable de botóns

Exemplo de marcado

Semellante a un grupo de botóns, o noso marcado usa o marcado de botóns normal, pero con un puñado de engadidos para refinar o estilo e admitir o complemento jQuery de Bootstrap.

  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 de botóns funcionan en calquera tamaño. o tamaño dos teus botóns é .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

Visión xeral e exemplos

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.

Tallas

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "menú desplegable tirar á dereita" >
  4. <!-- ligazóns do menú despregable -->
  5. </ul>
  6. </div>

Exemplo de marcado

Ampliamos os menús despregables de botóns normais para proporcionar unha segunda acción de botón que funciona como un disparador de menú despregable separado.

  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>

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 de páxinas múltiples

Cando usar

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.

Ligazóns de páxinas con estado

As ligazóns son personalizables e funcionan en varias circunstancias coa clase correcta. .disabledpara ligazóns non clicables e .activepara páxina actual.

Aliñación flexible

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

Exemplos

O compoñente de paxinación predeterminado é flexible e funciona en varias variacións.

Marcado

Envolto nun <div>, a paxinación é só un <ul>.

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

Buscapersonas Para enlaces rápidos anteriores e seguintes

Sobre o buscapersonas

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.

Estado opcional desactivado

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

Exemplo predeterminado

Por defecto, o buscapersonas centra as ligazóns.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Anterior </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Seguinte </a>
  7. </li>
  8. </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>
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>

Sobre

As insignias son compoñentes pequenos e sinxelos para mostrar un indicador ou un reconto dalgún tipo. Atópanse habitualmente en clientes de correo electrónico como Mail.app ou en aplicacións móbiles para notificacións push.

Clases dispoñibles

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>

Unidade heroe

Bootstrap ofrece un compoñente lixeiro e flexible chamado unidade heroe para mostrar o contido do teu sitio. Funciona ben en sitios de marketing e contido pesado.

Marcado

Envolve o teu contido nun divlike así:

  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>

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

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

  • 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

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

O 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 = "span3" >
  3. <a href = "#" class = "miniatura" >
  4. <img src = "https://placehold.it/260x180" 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 = "span3" >
  3. <div class = "miniatura" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Etiqueta en miniatura </h5>
  6. <p> Lenda de miniatura aquí mesmo... </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.

Valores predeterminados lixeiros

Clase base reescrita

Con Bootstrap 2, simplificamos a clase base: .alerten lugar de .alert-message. Tamén reducimos o marcado mínimo necesario: non <p>é necesario por defecto, só o exterior <div>.

Mensaxe de alerta única

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.


Vai xenial con javascript

Bootstrap inclúe un excelente complemento de jQuery que admite mensaxes de alerta, o que fai que descartalos sexa rápido e sinxelo.

Obter o complemento »

Alertas de exemplo

Envolve a túa mensaxe e unha icona de peche opcional nun div cunha clase sinxela.

Aviso! É mellor que te comprobes, non tes demasiado bo aspecto.
  1. <div class = "alerta" >
  2. <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>

Aviso! Os dispositivos iOS requiren unha href="#"para a eliminación de alertas. Asegúrate de incluílo e o atributo de datos para as iconas de peche de ancoraxe. 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.

Estende facilmente a mensaxe de alerta estándar con dúas clases opcionais: .alert-blockpara máis controis de recheo e texto e .alert-headingpara un título coincidente.

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. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > 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"
  3. estilo = " ancho : 60 %; " ></div>
  4. </div>

Raias

Usa un degradado para crear un efecto de raias (sen IE).

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

Animado

Toma o exemplo con raias e anímao (sen IE).

  1. <div class = "progreso con franxas de progreso
  2. activo" >
  3. <div class = "bar"
  4. estilo = " ancho : 40 %; " ></div>
  5. </div>

Opcións e soporte do navegador

Cores adicionais

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

Barras de raias

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

Comportamento

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 .activeclase, as túas .progress-stripedbarras de progreso animarán as franxas de esquerda a dereita.

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.

Opera e IE non admiten animacións neste momento.

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>

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="#" para os eventos de clic se prefire usar unha áncora.

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