Exemplo

Menú contextual conmutable para mostrar listas de ligazóns. Feito interactivo co complemento de JavaScript desplegable .

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

Marcado

Mirando só o menú despregable, aquí está o HTML necesario. Debes envolver o disparador do menú despregable e o menú despregable dentro .dropdownde , 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>

Opcións

Aliñar os menús á dereita e engadir niveis adicionais de menú despregable.

Alineación dos menús

Engadir .pull-rightao .dropdown-menualiñar á dereita o menú despregable.

<ul class = "menú desplegable pull-right" role = "menú" aria-labelledby = "dLabel" >   
  ...
</ul>

Opcións de menú desactivadas

Engadir .disableda un <li>no menú despregable para desactivar a ligazón.

<ul class = "menú desplegable" role = "menú" aria-labelledby = "menú desplegable" >   
  <li><a tabindex = "-1" href = "#" > Ligazón normal </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Ligazón desactivada </a></li>   
  <li><a tabindex = "-1" href = "#" > Outra ligazón </a></li>  
</ul>

Submenús nos despregables

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-submenua calquera linun menú despregable existente para o estilo automático.

Por defecto

Dropup

Submenú esquerdo

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

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.

<div class = "btn-group" > 
  <button class = "btn" > Esquerda </button> 
  <button class = "btn" > Medio </button> 
  <button class = "btn" > Dereita </button> 
</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.

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Grupos de botóns verticais

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

<div class = "btn-group btn-group-vertical" > 
  ...
</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.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Acción
    <span class = "caret" ></span> 
  </a>
  <ul class = "menú desplegable" > 
    <!-- ligazóns do menú despregable -->
  </ul>
</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.

<div class = "btn-group" > 
  <button class = "btn" > Acción </button> 
  <button class = "btn dropdown-toggle" data-toggle = "menr desplegable" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menú desplegable" > 
    <!-- ligazóns do menú despregable -->
  </ul>
</div>

Tallas

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Acción </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "menr desplegable" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menú desplegable" > 
    <!-- ligazóns do menú despregable -->
  </ul>
</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.

<div class = "eliminación do grupo btn" > 
  <button class = "btn" > Despegar </button> 
  <button class = "btn dropdown-toggle" data-toggle = "menr desplegable" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menú desplegable" > 
    <!-- ligazóns do menú despregable -->
  </ul>
</div>

Valores predeterminados lixeiros Mesmo marcado, clases diferentes

Todos os compoñentes de navegación aquí (pestanas, pílulas e listas) comparten o mesmo marcado base e estilos a través da .navclase.

Fichas básicas

Toma unha <ul>ligazón regular e engade .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "activo" > 
    <a href = "#" > Inicio </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pastillas básicas

Tome o mesmo HTML, pero use no seu .nav-pillslugar:

<ul class = "nav nav-pills" > 
  <li class = "activo" > 
    <a href = "#" > Inicio </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Estado desactivado

Para calquera compoñente de navegación (pestanas, pílulas ou lista), engade as .disabledligazóns grises e sen efectos de paso . As ligazóns seguirán facendo clic, non obstante, a menos que elimines o hrefatributo. Alternativamente, pode implementar JavaScript personalizado para evitar eses clics.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Inicio </a></li>  
  ...
</ul>

Aliñación de compoñentes

Para aliñar as ligazóns de navegación, use as clases de utilidade .pull-leftou . .pull-rightAmbas clases engadirán un flotante CSS na dirección especificada.

Apilable

Como as pestanas e as pílulas son horizontais por defecto, só tes que engadir unha segunda clase, .nav-stacked, para que aparezan apiladas verticalmente.

Fichas apiladas

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Pastillas apiladas

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Despregables

Engade menús despregables cun HTML extra e o complemento JavaScript para menús despregables .

Pestanas con menú despregable

<ul class = "nav nav-tabs" > 
  <li class = "menú desplegable" > 
    <a class = "alternar desplegable" 
       data-toggle = "menús desplegable"
       href = "#" >
        Despregar menú
        <b class = "caret" ></b> 
      </a>
    <ul class = "menú desplegable" > 
      <!-- ligazóns -->
    </ul>
  </li>
</ul>

Pastillas con menú despregable

<ul class = "nav nav-pills" > 
  <li class = "menú desplegable" > 
    <a class = "alternar desplegable" 
       data-toggle = "menús desplegable"
       href = "#" >
        Despregar menú
        <b class = "caret" ></b> 
      </a>
    <ul class = "menú desplegable" > 
      <!-- ligazóns -->
    </ul>
  </li>
</ul>

Listas de navegación

Un xeito sinxelo e sinxelo de crear grupos de ligazóns de navegación con cabeceiras opcionais. Utilízanse mellor en barras laterais como o Finder en OS X.

Exemplo de lista de navegación

Colle unha lista de ligazóns e engade class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Cabeceira da lista </li> 
  <li class = "active" ><a href = "#" > Inicio </a></li>  
  <li><a href = "#" > Biblioteca </a></li> 
  ...
</ul>

NotaPara aniñar nunha lista de navegación, inclúa class="nav nav-list"en calquera <ul>.

Separadores horizontais

Engade un divisor horizontal creando un elemento de lista baleiro coa clase .divider, así:

<ul class = "nav nav-list" > 
  ...
  <li class = "divisor" ></li> 
  ...
</ul>

Navegación con tabulacións

Da vida ás túas pestanas cun sinxelo complemento para alternar entre contidos mediante pestanas. Bootstrap integra pestanas con tabulacións en catro estilos: superior (predeterminado), dereita, inferior e esquerda.

Exemplo tabulable

Para que as pestanas sexan tabulables, cree un .tab-paneID único para cada pestana e engádeas en formato .tab-content.

Estou na Sección 1.

Ola, estou na Sección 2.

Que tal rapaza, esta é a Sección 3.

<div class = "tabbable" > <!-- Só é necesario para as pestanas esquerda/dereita -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Sección 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Sección 2 </a></li>  
  </ul>
  <div class = "contido da pestana" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Estou na Sección 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Ola, estou na Sección 2. </p>
    </div>
  </div>
</div>

Desvanecerse nas pestanas

Para que as pestanas se desvanezan, engade .fadea cada unha .tab-pane.

Require o complemento jQuery

Todas as pestanas con tabulacións están alimentadas polo noso complemento lixeiro jQuery. Lea máis sobre como dar vida ás pestanas con pestanas na páxina de documentos de JavaScript .

Tabulable en calquera dirección

Pestanas na parte inferior

Cambia a orde do HTML e engade unha clase para poñer pestanas na parte inferior.

Estou na Sección A.

Ola, estou na Sección B.

Que tal rapaza, esta é a sección C.

<div class = "pestanas con tabulacións abaixo" > 
  <div class = "contido da pestana" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Pestanas á esquerda

Cambia a clase para poñer as pestanas á esquerda.

Estou na Sección A.

Ola, estou na Sección B.

Que tal rapaza, esta é a sección C.

<div class = "tabulacións á esquerda" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "contido da pestana" > 
    ...
  </div>
</div>

Pestanas á dereita

Cambia a clase para poñer as pestanas á dereita.

Estou na Sección A.

Ola, estou na Sección B.

Que tal rapaza, esta é a sección C.

<div class = "tabulacións á dereita" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "contido da pestana" > 
    ...
  </div>
</div>

Barra de navegación básica

Para comezar, as barras de navegación son estáticas (non están fixadas na parte superior) e inclúen soporte para o nome do proxecto e a navegación básica. Coloque un en calquera lugar dentro dun .container, que define o ancho do seu sitio e contido.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Título </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Inicio </a></li>  
      <li><a href = "#" > Ligazón </a></li> 
      <li><a href = "#" > Ligazón </a></li> 
    </ul>
  </div>
</div>

Compoñentes da barra de navegación

Marca

Unha ligazón sinxela para mostrar o nome da túa marca ou proxecto só require unha etiqueta de referencia.

<a class = "brand" href = "#" > Nome do proxecto </a>

Ligazóns de navegación

Os elementos de navegación son sinxelos de engadir mediante listas non ordenadas.

<ul class = "nav" > 
  <li class = "activo" > 
    <a href = "#" > Inicio </a> 
  </li>
  <li><a href = "#" > Ligazón </a></li> 
  <li><a href = "#" > Ligazón </a></li> 
</ul>

Podes engadir facilmente divisores ás túas ligazóns de navegación cun elemento de lista baleiro e unha clase sinxela. Só ten que engadir isto entre ligazóns:

<ul class = "nav" > 
  ...
  <li class = "divisor-vertical" ></li> 
  ...
</ul>

Formularios

Para colocar e colocar correctamente un formulario dentro da barra de navegación, engade as clases adecuadas como se mostra a continuación. Para un formulario predeterminado, inclúa .navbar-forme .pull-leftou .pull-rightpara aliñalo correctamente.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Enviar </button>  
</form>

Formulario de busca

Para obter un formulario de busca máis personalizado, engade .navbar-searchá entrada forme .search-queryá entrada de estilos especializados na barra de navegación.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Buscar" >   
</form>

Aliñación de compoñentes

Aliña as ligazóns de navegación, o formulario de busca ou o texto, utiliza as clases de utilidade .pull-leftou . .pull-rightAmbas clases engadirán un flotante CSS na dirección especificada.

Usando menú despregable

Engade menú despregable e despregable ao navegador cun pouco de marcado e o complemento de JavaScript para menú despregable .

<ul class = "nav" > 
  <li class = "menú desplegable" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "menús desplegable" >   
      Conta
      <b class = "caret" ></b> 
    </a>
    <ul class = "menú desplegable" > 
      ...
    </ul>
  </li>
</ul>

Visita a documentación despregable de JavaScript para obter máis marcas e información sobre como chamar aos menús despregables.

Texto

Envolve as cadeas de texto nun elemento con .navbar-text, xeralmente nunha <p>etiqueta para a interlineado e a cor adecuadas.

Variacións de visualización opcionais

Corrixe a barra de navegación na parte superior ou inferior da ventana gráfica cunha clase adicional no div máis externo, .navbar.

Fixado na parte superior

Engade .navbar-fixed-tope recorda ter en conta a área oculta debaixo dela engadindo polo menos 40px paddingao ficheiro <body>. Asegúrate de engadir isto despois do CSS Bootstrap básico e antes do CSS de resposta opcional.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

Fixo ao fondo

Engadir .navbar-fixed-bottomno seu lugar.

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

Barra de navegación superior estática

Engadindo .navbar-static-top. A diferenza da .navbar-fixed-topclase, non necesitas cambiar ningún recheo no body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

Barra de navegación sensible

Para implementar unha barra de navegación sensible contraída, envolve o contido da súa barra de navegación nun div que contén .nav-collapse.collapse, e engade o botón de alternancia da barra de navegación, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "contedor" > 
 
      <!-- .btn-navbar úsase como conmutador para o contido contraído da barra de navegación -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Asegúrate de deixar a marca aí fóra se queres que se mostre -->
      <a class = "brand" href = "#" > Nome do proxecto </a>  
 
      <!-- Todo o que queres oculto a 940 píxeles ou menos, colócao aquí -->
      <div class = "colapso de navegación-colapso" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Aviso! A barra de navegación sensible require o complemento de contraer e o ficheiro CSS de Bootstrap sensible .

Variación invertida

Modifique o aspecto da barra de navegación engadindo .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Exemplos

Móstrase un único exemplo xa que se pode mostrar en varias páxinas.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Inicio </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Biblioteca </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Datos </li> 
</ul>

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.

<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 = "#" > 5 </a></li> 
    <li><a href = "#" > Seguinte </a></li> 
  </ul>
</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.

<div class = "paxinación" > 
  <ul>
    <li class = "desactivado" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

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

<div class = "paxinación" > 
  <ul>
    <li class = "desactivado" ><span> « </span></li> 
    <li class = "activo" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Tallas

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

<div class = "paxinación paxinación-grande" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paxinación" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paxinación paxinación-pequena" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paxinación paginación-mini" > 
  <ul>
    ...
  </ul>
</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.

<div class = "paxinación centrada na paxinación" > 
  ...
</div>

<div class = "paxinación paxinación-dereita" > 
  ...
</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.

<ul class = "pager" > 
  <li><a href = "#" > Anterior </a></li> 
  <li><a href = "#" > Seguinte </a></li> 
</ul>

Ligazóns aliñadas

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>

Estado opcional desactivado

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

<ul class = "pager" > 
  <li class = "anterior desactivado" > 
    <a href = "#" > ← Máis vello </a> 
  </li>
  ...
</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

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

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

<div class = "cabeceira da páxina" > 
  <h1> Exemplo de cabeceira da páxina <small> Subtexto para a cabeceira </small></h1>
</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
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 :

<ul class = "miniaturas" > 
  <li class = "span4" > 
    <a href = "#" class = "miniatura" >  
      <img data-src = "holder.js/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 data-src = "holder.js/300x200" alt = "" >  
      <h3> Etiqueta en miniatura </h3>
      <p> Lenda de miniatura... </p>
    </div>
  </li>
  ...
</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.

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

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.

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

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

<div class = "bloqueo de alertas de alerta" > 
  <button type = "button" class = "close" data-dismiss = "alerta" > × </button>   
  <h4> Aviso! </h4>
  O mellor que te verifiques, non estás...
</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.

<div class = "erro de alerta de alerta" > 
  ...
</div>

Éxito

Ben feito! Leu correctamente esta importante mensaxe de alerta.

<div class = "alerta de éxito-alerta" > 
  ...
</div>

Información

Aviso! Esta alerta precisa da túa atención, pero non é moi importante.

<div class = "información de alerta de alerta" > 
  ...
</div>

Exemplos e marcado

Básico

Barra de progreso predeterminada cun gradiente vertical.

<div class = "progreso" > 
  <div class = "bar" style = " ancho : 60 %; " ></div>   
</div>

Raias

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>

Animado

Engadir .activea .progress-stripedpara 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>

Apilados

Coloca varias barras no mesmo .progresspara 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>

Opcións

Cores adicionais

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>

Barras de raias

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>

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.

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.

Título multimedia

<div class = "medios" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Título multimedia </h4> 
    ...
 
    <!-- Obxecto multimedia anidado -->
    <div class = "medios" > 
      ...
    </div>
  </div>
</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).

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.

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.

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.

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

<ul class = "lista de medios" > 
  <li class = "medios" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Título multimedia </h4> 
      ...
 
      <!-- Obxecto multimedia anidado -->
      <div class = "medios" > 
        ...
     </div>
    </div>
  </li>
</ul>

Pozos

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

Mira, estou nun pozo!

<div class = "ben" > 
  ...
</div>

Clases optativas

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

Mira, estou nun pozo!

<div class = "ben ben grande" > 
  ...
</div>

Mira, estou nun pozo!

<div class = "ben ben pequeno" > 
  ...
</div>

Pechar icona

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

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

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

<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

class = "tirar á esquerda"

. tirar - esquerda {
  flotar : esquerda ;
}

.tirar á dereita

Flota un elemento cara á dereita

class = "tirar á dereita"

. tirar - dereita {
  flotar : dereita ;
}

.mutado

Cambia a cor dun elemento a#999

class = "silenciado"

. silenciado {
  cor : #999; 
}

.clearfix

Limpar floatcalquera elemento

class = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: antes ,
  &: despois de {
    visualización : táboa ;
    contido : "" ; 
  }
  &: despois de {
    claro : ambos ;
  }
}

Menús desplegables

Exemplo

Marcado

Opcións

Alineación dos menús

Opcións de menú desactivadas

Submenús nos despregables

Grupos de botóns

Exemplos

Grupo de botón único

Múltiples grupos de botóns

Grupos de botóns verticais

Caixa de verificación e sabores de radio

Menú despregable en grupos de botóns

Menús desplegables de botóns

Visión xeral e exemplos

Funciona con todos os tamaños de botóns

Require JavaScript

Dividir menú despregable de botóns

Tallas

Menús desplegables

Navegación: fichas, pílulas e listas

Valores predeterminados lixeiros Mesmo marcado, clases diferentes

Fichas básicas

Pastillas básicas

Estado desactivado

Aliñación de compoñentes

Apilable

Fichas apiladas

Pastillas apiladas

Despregables

Pestanas con menú despregable

Pastillas con menú despregable

Listas de navegación

Exemplo de lista de navegación

Separadores horizontais

Navegación con tabulacións

Exemplo tabulable

Desvanecerse nas pestanas

Require o complemento jQuery

Tabulable en calquera dirección

Pestanas na parte inferior

Pestanas á esquerda

Pestanas á dereita

Barra de navegación

Barra de navegación básica

Compoñentes da barra de navegación

Marca

Ligazóns de navegación

Formularios

Formulario de busca

Aliñación de compoñentes

Usando menú despregable

Texto

Variacións de visualización opcionais

Fixado na parte superior

Fixo ao fondo

Barra de navegación superior estática

Barra de navegación sensible

Variación invertida

Migas de pan

Exemplos

Paginación Dúas opcións para consultar o contido

Paxinación estándar

Opcións

Estados activos e desactivados

Tallas

Aliñación

Buscapersonas

Exemplo predeterminado

Ligazóns aliñadas

Estado opcional desactivado

Etiquetas e distintivos

Etiquetas

Insignias

Facilmente plegable

Compoñentes tipográficos

Unidade heroe

Ola, mundo!

Cabeceira da páxina