Títulos

<h1>Todos os títulos HTML <h6>están dispoñibles.

h1. Título 1

h2. Título 2

h3. Título 3

h4. Título 4

h5. Título 5

h6. Título 6

Copia do corpo

O valor predeterminado global de Bootstrap font-sizeé 14px , cunha line-heightde 20px . Isto aplícase a <body>todos os parágrafos. Ademais, os <p>(parágrafos) reciben unha marxe inferior da metade da súa altura de liña (10px por defecto).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, is not commodo luctus, ninsi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, is not commodo luctus, ninsi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Copia do corpo principal

Fai que un parágrafo destaque engadindo .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class = "lead" > ... </p>

Construído con menos

A escala tipográfica baséase en dúas variables MENOS en variables.less : @baseFontSizee @baseLineHeight. O primeiro é o tamaño da fonte base empregado en todo e o segundo é a altura da liña base. Usamos esas variables e algunhas matemáticas sinxelas para crear as marxes, recheos e alturas de liña de todo o noso tipo e moito máis. Personalízaos e Bootstrap adáptase.

Énfase

Fai uso das etiquetas de énfase predeterminadas de HTML con estilos lixeiros.

`<small>`

Para quitar énfase en liña ou bloques de texto, use a etiqueta pequena.

Esta liña de texto está destinada a ser tratada como letra pequena.

<p> <small> Esta liña de texto está destinada a ser tratada como letra pequena. </small> </p>

Negriña

Para enfatizar un fragmento de texto cun grosor de letra máis pesado.

O seguinte fragmento de texto represéntase como texto en negra .

<strong> renderizado como texto en negra </strong>

Cursivas

Para enfatizar un fragmento de texto con cursiva.

O seguinte fragmento de texto represéntase como texto en cursiva .

<em> representado como texto en cursiva </em>

Aviso!Non dubides en usar <b>e <i>en HTML5. <b>está destinado a resaltar palabras ou frases sen transmitir importancia adicional, mentres que <i>é principalmente para voz, termos técnicos, etc.

Clases de aliñamento

Realiñe facilmente o texto aos compoñentes con clases de aliñamento de texto.

Texto aliñado á esquerda.

Texto aliñado ao centro.

Texto aliñado á dereita.

<p class = "text-left" > Texto aliñado á esquerda. </p> 
<p class = "text-center" > Texto aliñado ao centro. </p> 
<p class = "text-right" > Texto aliñado á dereita. </p>

Clases de énfase

Transmite significado a través da cor cun puñado de clases de utilidade de énfase.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, is non commodo luctus, nisi erat porttitor ligula.

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Abreviaturas

Implementación estilizada do <abbr>elemento HTML para abreviaturas e acrónimos para mostrar a versión ampliada ao pasar o cursor. As abreviaturas cun titleatributo teñen un bordo inferior de puntos claros e un cursor de axuda ao pasar o cursor, o que proporciona contexto adicional ao pasar o cursor.

`<abbr>`

Para o texto expandido ao pasar o rato longo dunha abreviatura, inclúa o titleatributo.

Unha abreviatura da palabra atributo é attr .

<abbr title = "atributo" > attr </abbr>

`<abbr class="initialism">`

Engadir .initialisma unha abreviatura para un tamaño de letra lixeiramente menor.

HTML é o mellor desde o pan rebanado.

<abbr title = "Linguaxe de marcado de hipertexto" class = "inicialismo" > HTML </abbr>

Enderezos

Presenta a información de contacto do antepasado máis próximo ou de todo o traballo.

`<address>`

Conserva o formato rematando todas as liñas con <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Nome completo
[email protected]

<enderezo>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "Teléfono" > P: </abbr> (123) 456-7890 
</enderezo>
 
<enderezo>
  <strong> Nome completo </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</enderezo>

Citas de bloque

Para citar bloques de contido doutra fonte dentro do seu documento.

Presuposto de bloque predeterminado

Envolve <blockquote>calquera HTML como cita. Para citas directas recomendamos un <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<cota de bloque>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
</blockquote>

Opcións de cotización en bloque

Cambios de estilo e contido para variacións sinxelas nunha cita estándar.

Nomear unha fonte

Engadir <small>etiqueta para identificar a fonte. Envolve o nome da obra de orixe en <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alguén famoso en Source Title

<cota de bloque>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  <small> Alguén famoso <cite title = "Source Title" > Título da fonte </cite></small> 
</blockquote>

Pantallas alternativas

Utilízase .pull-rightpara unha cita de bloque flotante e aliñada á dereita.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alguén famoso en Source Title

<blockquote class = "tirar cara á dereita" > 
  ...
</blockquote>

Listas

Sen orde

Unha lista de elementos nos que a orde non importa explícitamente.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie Lorem at Massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget portttitor Lorem

<ul>
  <li> ... </li>
</ul>

Ordenado

Unha lista de elementos nos que a orde importa explícitamente.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie Lorem at Massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget portttitor Lorem

<ol>
  <li> ... </li>
</ol>

Sen estilo

Elimina o recheo predeterminado list-stylee esquerdo nos elementos da lista (só fillos inmediatos).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie Lorem at Massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget portttitor Lorem

<ul class = "sen estilo" > 
  <li> ... </li>
</ul>

En liña

Coloca todos os elementos da lista nunha soa liña con inline-blockalgo de recheo.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "en liña" > 
  <li> ... </li>
</ul>

Descrición

Unha lista de termos coas súas descricións asociadas.

Listas de descricións: Unha lista de descricións é perfecta para definir termos.
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Descrición horizontal

Fai termos e descricións en <dl>liña xuntos.

Listas de descricións: Unha lista de descricións é perfecta para definir termos.
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod sempre eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class = "dl-horizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Aviso!As listas de descricións horizontais truncarán os termos que son demasiado longos para caber na corrección da columna esquerda text-overflow. Nas vistas máis estreitas, cambiarán ao deseño apilado predeterminado.

En liña

Envolve fragmentos de código en liña con <code>.

Por exemplo, <section>debería envolverse como en liña.

Por exemplo , <código> & lt ; sección & gt ;</ code > debe ser envolvente en liña .

Bloque básico

Use <pre>para varias liñas de código. Asegúrate de escapar de calquera corchete angular do código para unha representación correcta.

<p>Texto de mostra aquí...</p>

<pre>
  <p>Texto de mostra aquí...</p>
</pre>

Aviso!Asegúrese de manter o código dentro das <pre>etiquetas o máis preto posible da esquerda; renderizará todas as pestanas.

Opcionalmente, pode engadir a .pre-scrollableclase que establecerá unha altura máxima de 350 px e proporcionará unha barra de desprazamento do eixe Y.

Estilos predeterminados

Para un estilo básico (recheo lixeiro e só divisores horizontais) engade a clase base .tablea calquera <table>.

#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@twitter

<table class = "table" > 
  …
</táboa>

Clases optativas

Engade calquera das seguintes clases á .tableclase base.

`.table-striped`

Engade franxas de cebra a calquera fila da táboa a <tbody>través do :nth-childselector CSS (non dispoñible en IE7-8).

#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@twitter

<table class = "table table-striped" > 
  …
</táboa>

`.table-bordered`

Engade bordos e cantos redondeados á mesa.

#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
1	Marcos	Oto	@getbootstrap
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

<table class = "táboa con bordes de táboa" > 
  …
</táboa>

`.table-hover`

Activar un estado de paso nas filas da táboa dentro dun <tbody>.

#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

<table class = "paso da táboa da táboa" > 
  …
</táboa>

`.table-condensed`

Fai as mesas máis compactas cortando o recheo das celas á metade.

#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

<table class = "table table-condensed" > 
  …
</táboa>

Clases de filas opcionais

Use clases contextuais para colorear as filas da táboa.

Clase	Descrición
`.success`	Indica unha acción exitosa ou positiva.
`.error`	Indica unha acción perigosa ou potencialmente negativa.
`.warning`	Indica un aviso que pode necesitar atención.
`.info`	Usado como alternativa aos estilos predeterminados.

#	Produto	Pago recibido	Estado
1	TB - Mensual	01/04/2012	Aprobado
2	TB - Mensual	02/04/2012	Rexeitou
3	TB - Mensual	03/04/2012	Pendente
4	TB - Mensual	04/04/2012	Chama para confirmar

...
  < tr class = "éxito" >
    <td> 1 < /td>
    <td>TB - Mensual</ td >
    < td > 01/04/2012 < / td >
    <td>Aprobado</ td >
  </ tr >
...

Marcado de táboa admitido

Lista de elementos HTML de táboa admitidos e como deben usarse.

Etiquetar	Descrición
`<table>`	Elemento de envoltura para mostrar datos en formato tabular
`<thead>`	Elemento contenedor para filas de cabeceira da táboa ( `<tr>`) para etiquetar columnas da táboa
`<tbody>`	Elemento contenedor para as filas da táboa ( `<tr>`) no corpo da táboa
`<tr>`	Elemento contenedor para un conxunto de celas da táboa ( `<td>`ou `<th>`) que aparece nunha soa fila
`<td>`	Celda da táboa predeterminada
`<th>`	Cela especial da táboa para as etiquetas de columna (ou fila, dependendo do alcance e da ubicación).
`<caption>`	Descrición ou resumo do que contén a táboa, especialmente útil para lectores de pantalla

<táboa>
  <caption> ... </caption>
  <cabeza>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</táboa>

Estilos predeterminados

Os controis de formularios individuais reciben estilos, pero sen ningunha clase base requirida <form>nin grandes cambios no marcado. Resulta en etiquetas apiladas e aliñadas á esquerda na parte superior dos controis do formulario.

<formulario>
  <conxunto de campos>
    <legend> Lenda </legend>
    <label> Nome da etiqueta </label>
    <input type = "text" placeholder = "Escriba algo..." >  
    <span class = "help-block" > Exemplo de texto de axuda a nivel de bloque aquí. </span> 
    <label class = "caixa de verificación" > 
      <input type = "checkbox" > Comprobe-me 
    </label>
    <button type = "submit" class = "btn" > Enviar </button>  
  </fieldset>
</form>

Disposicións opcionais

Con Bootstrap inclúense tres deseños de formularios opcionais para casos de uso común.

Formulario de busca

Engádese .form-searchao formulario e .search-queryao <input>para unha entrada de texto extra redondeada.

<form class = "formulario-busca" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Busca </button>  
</form>

Formulario en liña

Engade .form-inlineetiquetas aliñadas á esquerda e controis de bloque en liña para un deseño compacto.

<form class = "formulario en liña" > 
  <input type = "text" class = "input-small" placeholder = "Correo electrónico" >   
  <input type = "contrasinal" class = "input-small" placeholder = "Contrasinal" >   
  <label class = "caixa de verificación" > 
    <input type = "checkbox" > Lémbrame 
  </label>
  <button type = "submit" class = "btn" > Iniciar sesión </button>  
</form>

Forma horizontal

Aliñar as etiquetas á dereita e flotalas cara á esquerda para que aparezan na mesma liña que os controis. Require a maioría dos cambios de marcado dun formulario predeterminado:

Engadir .form-horizontalao formulario
Envolve as etiquetas e os controis.control-group
Engadir .control-labelá etiqueta
Envolve todos os controis asociados .controlspara un aliñamento adecuado

<form class = "form-horizontal" > 
  <div class = "grupo de control" > 
    <label class = "control-label" for = "inputEmail" > Correo electrónico </label>  
    <div class = "controis" > 
      <input type = "text" id = "inputEmail" placeholder = "Correo electrónico" >   
    </div>
  </div>
  <div class = "grupo de control" > 
    <label class = "control-label" for = "inputPassword" > Contrasinal </label>  
    <div class = "controis" > 
      <input type = "contrasinal" id = "inputPassword" placeholder = "Contrasinal" >   
    </div>
  </div>
  <div class = "grupo de control" > 
    <div class = "controis" > 
      <label class = "caixa de verificación" > 
        <input type = "checkbox" > Lémbrame 
      </label>
      <button type = "submit" class = "btn" > Iniciar sesión </button>  
    </div>
  </div>
</form>

Controis de formulario admitidos

Exemplos de controis de formulario estándar admitidos nun deseño de formulario de exemplo.

Entradas

Control de formulario máis común, campos de entrada baseados en texto. Inclúe soporte para todos os tipos de HTML5: texto, contrasinal, datahora, datahora local, data, mes, hora, semana, número, correo electrónico, URL, busca, teléfono e cor.

Require o uso dun especificado typeen todo momento.

<input type = "text" placeholder = "Introducción de texto" >

Área de texto

Control de formulario que admite varias liñas de texto. Cambia rowso atributo segundo sexa necesario.

<textarea rows = "3" ></textarea>

Caixas de verificación e radios

As caixas de verificación son para seleccionar unha ou varias opcións nunha lista, mentres que as radios son para seleccionar unha opción de entre moitas.

Predeterminado (apilado)

<label class = "caixa de verificación" > 
  <input type = "checkbox" value = "" >  
  A primeira opción é isto e aquilo; asegúrate de incluír por que é xenial
</label>
 
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" marcada >     
  A primeira opción é isto e aquilo; asegúrate de incluír por que é xenial
</label>
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  A segunda opción pode ser outra cousa e se a selecciona anulará a opción un
</label>

Caixas de verificación en liña

Engade a .inlineclase a unha serie de caixas de verificación ou radios para que os controis aparezan na mesma liña.

<label class = "caixa de verificación en liña" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "caixa de verificación en liña" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "caixa de verificación en liña" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

Selecciona

Use a opción predeterminada ou especifique a multiple="multiple"para mostrar varias opcións á vez.

<seleccionar>
  <opción> 1 </opción>
  <opción> 2 </opción>
  <opción> 3 </opción>
  <opción> 4 </opción>
  <opción> 5 </opción>
</seleccionar>
 
<select multiple = "múltiple" > 
  <opción> 1 </opción>
  <opción> 2 </opción>
  <opción> 3 </opción>
  <opción> 4 </opción>
  <opción> 5 </opción>
</seleccionar>

Ampliación dos controis de formularios

Ademais dos controis do navegador existentes, Bootstrap inclúe outros compoñentes de formulario útiles.

Entradas adicionais e anexas

Engade texto ou botóns antes ou despois de calquera entrada baseada en texto. Teña en conta que selectaquí non se admiten elementos.

Opcións predeterminadas

Envolve un .add-one un inputcunha das dúas clases para antepoñer ou engadir texto a unha entrada.

<div class = "input-prepend" > 
  <span class = "complemento" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Nome de usuario" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "texto" >   
  <span class = "complemento" > , 00 </span> 
</div>

Combinado

Use ambas clases e dúas instancias de .add-onpara antepoñer e engadir unha entrada.

<div class = "input-prepend input-append" > 
  <span class = "complemento" > $ </span> 
  < clase de entrada = "span2"   id = "appendedPrependedInput " type = "text" > 
  <span class = "complemento" > , 00 </span> 
</div>

Botóns en lugar de texto

En lugar de <span>con texto, use a .btnpara anexar un botón (ou dous) a unha entrada.

<div class = "input-append" >
  <input class = "span2" id = "appendedInputButton "    type = "text" >
  <button class = "btn"   type = "button" > Vaia! </button>
</div>

< clase div = "input-append" >
  <input class = "span2" id = tipo " appendedInputButtons".    = "text" >
  <button class = "btn" type = "botón"   > Busca </button>
  <button class = "btn" type = "botón"   > Opcións </button>
</div>

Menú despregable de botóns

<div class = "entrada-anexo" >
  <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "menr desplegable" >  
      Acción
      <span class = "caret" ></span> 
    </button>
    <ul class = "menú desplegable" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "menr desplegable" >  
      Acción
      <span class = "caret" ></span> 
    </button>
    <ul class = "menú desplegable" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "text" >   
</div>

<div class = "input-prepend input-append" >
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "menr desplegable"  >
      Acción
      <span class = "caret" ></span> 
    </button>
    <ul class = "menú desplegable" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "texto" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "menr desplegable" >  
      Acción
      <span class = "caret" ></span> 
    </button>
    <ul class = "menú desplegable" > 
      ...
    </ul>
  </div>
</div>

Grupos desplegables segmentados

<formulario>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < tipo de entrada = "texto" > 
  </div>
  <div class = "input-append" > 
    < tipo de entrada = "texto" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Formulario de busca

<form class = "formulario-busca" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Busca </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Busca </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

Control de tamaño

Usa clases de tamaños relativos .input-largeou fai coincidir as túas entradas cos tamaños das columnas da grade mediante .span*clases.

Entradas a nivel de bloque

Fai que calquera <input>ou <textarea>elemento se comporte como un elemento a nivel de bloque.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Tallamento relativo

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Aviso!En versións futuras, iremos alterando o uso destas clases de entrada relativas para que coincidan co tamaño dos nosos botóns. Por exemplo, .input-largeaumentará o recheo e o tamaño da fonte dunha entrada.

Dimensionamento da reixa

Use .span1to .span12para entradas que coincidan cos mesmos tamaños das columnas da grella.

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</seleccionar>
<select class = "span2" > 
  ...
</seleccionar>
<select class = "span3" > 
  ...
</seleccionar>

Para varias entradas de grade por liña, use a .controls-rowclase modificadora para o espazamento adecuado . Fai flotar as entradas para contraer o espazo en branco, establece as marxes adecuadas e borra o flotante.

<div class = "controis" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controis fila de controis" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

Entradas non editables

Presenta os datos nun formulario que non se pode editar sen utilizar o marcado de formulario real.

<span class = "input-xlarge uneditable-input" > Algún valor aquí </span>

Forma accións

Finalizar un formulario cun grupo de accións (botóns). Cando se colocan dentro dun .form-actions, os botóns farán unha sangría automaticamente para aliñarse cos controis do formulario.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Gardar cambios </button>  
  <button type = "button" class = "btn" > Cancelar </button>  
</div>

Texto de axuda

Compatibilidade a nivel de bloque e en liña para o texto de axuda que aparece arredor dos controis do formulario.

Axuda en liña

<input type = "text" ><span class = "help-inline" > Texto de axuda en liña </span>

Bloquear axuda

<input type = "text" ><span class = "help-block" > Un bloque máis longo de texto de axuda que se divide nunha nova liña e pode estenderse máis aló dunha liña. </span>

Estados de control de formularios

Proporciona comentarios aos usuarios ou visitantes con estados básicos de comentarios sobre os controis de formularios e as etiquetas.

Foco de entrada

Eliminamos os outlineestilos predeterminados nalgúns controis de formulario e aplicamos un box-shadowno seu lugar para :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Isto está enfocado..." >

Entradas non válidas

Entradas de estilo mediante a funcionalidade predeterminada do navegador con :invalid. Especifique a type, engada o requiredatributo se o campo non é opcional e (se procede) especifique apattern .

Isto non está dispoñible nas versións de Internet Explorer 7-9 debido á falta de compatibilidade con pseudoselectores CSS.

<input class = "span3" type = "correo electrónico" necesario >

Entradas desactivadas

Engade o disabledatributo nunha entrada para evitar a entrada do usuario e activar un aspecto lixeiramente diferente.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "A entrada aquí desactivada..." desactivada >

Estados de validación

Bootstrap inclúe estilos de validación para mensaxes de erro, aviso, información e éxito. Para usalo, engade a clase adecuada ao .control-group.

<div class = "advertencia do grupo de control" > 
  <label class = "control-label" for = "inputWarning" > Entrada con aviso </label>  
  <div class = "controis" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Pode que algo saíse mal </span> 
  </div>
</div>
 
<div class = "erro do grupo de control" > 
  <label class = "control-label" for = "inputError" > Entrada con erro </label>  
  <div class = "controis" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Corrixa o erro </span> 
  </div>
</div>
 
<div class = "información do grupo de control" > 
  <label class = "control-label" for = "inputInfo" > Entrada con información </label>  
  <div class = "controis" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > O nome de usuario xa se tomou </span> 
  </div>
</div>
 
<div class = "éxito do grupo de control" > 
  <label class = "control-label" for = "inputSuccess" > Entrada con éxito </label>  
  <div class = "controis" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

Botóns predeterminados

Os estilos de botón pódense aplicar a calquera cousa coa .btnclase aplicada. Non obstante, normalmente quererás aplicar estes só a elementos <a>e <button>para obter a mellor representación.

Botón	clase=""	Descrición
	`btn`	Botón gris estándar con degradado
	`btn btn-primary`	Proporciona peso visual adicional e identifica a acción principal nun conxunto de botóns
	`btn btn-info`	Usado como alternativa aos estilos predeterminados
	`btn btn-success`	Indica unha acción exitosa ou positiva
	`btn btn-warning`	Indica que se debe tomar precaución con esta acción
	`btn btn-danger`	Indica unha acción perigosa ou potencialmente negativa
	`btn btn-inverse`	Botón gris escuro alternativo, non vinculado a unha acción ou uso semántico
	`btn btn-link`	Desenfatizar un botón facéndoo parecer unha ligazón mantendo o comportamento do botón

Compatibilidade entre navegadores

IE9 non recorta os degradados de fondo nas esquinas redondeadas, polo que o eliminamos. Relacionado, IE9 modifica os buttonelementos desactivados, convertendo o texto en gris cunha sombra de texto desagradable que non podemos corrixir.

Tamaños dos botóns

Queres botóns máis grandes ou pequenos? Engade .btn-large, .btn-small, ou .btn-minipara tamaños adicionais.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Botón grande </button>  
  <button class = "btn btn-large" type = "button" > Botón grande </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Botón predeterminado </button>  
  <button class = "btn" type = "button" > Botón predeterminado </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Botón pequeno </button>  
  <button class = "btn btn-small" type = "button" > Botón pequeno </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Mini botón </button>  
  <button class = "btn btn-mini" type = "button" > Mini botón </button>  
</p>

Engadindo .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > Botón de nivel de bloque </button>  
<button class = "btn btn-large btn-block" type = "button" > Botón de nivel de bloque </button>

Estado desactivado

Fai que os botóns parezan incliquábeis desfacendoos un 50 %.

Elemento de ancoraxe

Engade a .disabledclase aos <a>botóns.

Ligazón principal Ligazón

<a href = "#" class = "btn btn-large btn-primary disabled" > Ligazón principal </a>  
<a href = "#" class = "btn btn-large desactivado" > Ligazón </a>

Aviso!Aquí usamos .disabledcomo clase de utilidade, similar á .activeclase común, polo que non se require ningún prefixo. Ademais, esta clase é só para estética; debes usar JavaScript personalizado para desactivar as ligazóns aquí.

Elemento botón

Engade o disabledatributo aos <button>botóns.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Botón principal </button>   
<button type = "button" class = "btn btn-large" desactivado > Botón </button>

Unha clase, varias etiquetas

Use a .btnclase nun elemento <a>, <button>, ou <input>.

<a class = "btn" href = "" > Ligazón </a>  
<button class = "btn" type = "submit" > Botón </button>  
<input class = "btn" type = "button" value = "Entrada" >   
<input class = "btn" type = "submit" value = "Enviar" >

Como mellor práctica, intente facer coincidir o elemento para o seu contexto para garantir a representación coincidente entre navegadores. Se tes un input, utiliza un <input type="submit">para o teu botón.

Engade clases a un <img>elemento para peinar facilmente as imaxes en calquera proxecto.

<img src = "..." class = "img-redondeado" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

Aviso! .img-roundede .img-circlenon funcionan en IE7-8 por falta de border-radiussoporte.

Glifos de iconas

140 iconas en forma de sprite, dispoñibles en gris escuro (predeterminado) e branco, proporcionadas por Glyphicons .

icona-vidro
icona-música
busca de iconas
icona-sobre
icona-corazón
icona-estrela
icona-estrela-baleiro
icona-usuario
icona-película
icona-th-grande
icona-th
icona-th-lista
icona-ok
icona-eliminar
icona-ampliar
icon-zoom-out
icona desactivada
sinal-icona
icona-cog
icona-lixo
icona-casa
arquivo-icona
icona-tempo
icona-estrada
icona-descarga-alt
icona-descarga
carga de iconas
icona-box de entrada
icon-play-circle
icona-repetir
icon-refresh
icon-list-alt
icona-bloqueo
icona-bandeira
icona-auriculares
icon-volume-off
icona-baixa o volume
icona-subir volume
icona-qrcode
icona-código de barras
icona-etiqueta
etiquetas de iconas
libro de iconas
icona-marcador
icona-impresión
icona-cámara
icona-fonte
icona-negriña
icona-cursiva
icona-texto-altura
icon-text-width
icon-align-left
icon-align-center
icona-alinear-dereita
icon-align-justify
lista de iconas
icona-sangrado-esquerda
icona-sangrado-dereita
icon-facetime-video
imaxe-icona
icona-lapis
icona-mapa-marcador
axuste da icona
tinte de iconas
icona-editar
icon-share
icon-check
icona-mover
icona-paso-atrás
icona-retroceso rápido
icona cara atrás
xogo de iconas
icona-pausa
icona-parada
icona cara adiante
icona-avance rápido
icona-paso-adelante
icona-expulsar
icona-chevron-esquerda
icona-chevron-dereita
icona-máis-signo
icona-signo-menos
icona-eliminar-sinal
icona-sinal-ok
icona-sinal-pregunta
icona-sinal de información
icona-captura de pantalla
icona-eliminar-círculo
icona-ok-círculo
icona-ban-círculo
icona-frecha-esquerda
icona-frecha-dereita
icona-frecha-arriba
icona-frecha-abaixo
icon-share-alt
icon-size-full
icon-size-small
icon-plus
icona-menos
icona-asterisco
icona-signo-de-exclamación
icona-agasallo
icona-folla
icona-lume
icona-ollo aberto
icona-ollo-pecha
icona-sinal-de-advertencia
plano-icona
icona-calendario
icona-aleatoria
icona-comentario
icona-imán
icon-chevron-up
icon-chevron-down
icona-retweet
icona-carro da compra
icona-carpeta-pechar
icona-carpeta-aberto
icon-size-vertical
icon-size-horizontal
icona-hdd
icona-bulchorn
icona-campá
icono-certificado
icona-pulgar cara arriba
icona-polgares abaixo
icona-man-dereita
icona-man-esquerda
icona-man arriba
icona-man abaixo
icona-círculo-frecha-dereita
icona-círculo-frecha-esquerda
icona-círculo-frecha-arriba
icona-círculo-frecha abaixo
icona-globo
chave inglesa
iconas-tarefas
icona-filtro
icona-maletín
icona-pantalla completa

Atribución de glifos

Os Halflings de Glyphicons normalmente non están dispoñibles de forma gratuíta, pero un acordo entre Bootstrap e os creadores de Glyphicons fíxoo posible sen ningún custo para vostedes como desenvolvedores. Como agradecemento, pedímosche que inclúas unha ligazón opcional a Glyphicons sempre que sexa posible.

Como empregar

Todas as iconas requiren unha <i>etiqueta cunha clase única, co prefixo icon-. Para usalo, coloque o seguinte código en calquera lugar:

<i class = "busca de iconas" ></i>

Tamén hai estilos dispoñibles para iconas invertidas (brancas), preparadas cunha clase adicional. Aplicaremos esta clase específicamente nos estados activos e de navegación para as ligazóns de navegación e menú despregable.

<i class = "icona-busca icona-branca" ></i>

Aviso!Cando uses cadeas de texto ao lado, como nos botóns ou nas ligazóns de navegación, asegúrate de deixar un espazo despois da <i>etiqueta para un espazo adecuado.

Exemplos de iconas

Utilízaos en botóns, grupos de botóns para unha barra de ferramentas, navegación ou entradas de formularios antepostas.

Botóns

Grupo de botóns nunha barra de ferramentas de botóns

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

Menú despregable nun grupo de botóns

Usuario

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Usuario </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "menú desplegable" > 
    <li><a href = "#" ><i class = "icona-lapis" ></i> Editar </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Eliminar </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Prohibición </a></li>  
    <li class = "divisor" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Facer administrador </a></li>  
  </ul>
</div>

Tamaños dos botóns

Estrela Estrela Estrela

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Estrela </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Estrela </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Estrela </a>

Navegación

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Inicio </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Biblioteca </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Aplicacións </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Varios </a></li>  
</ul>

Campos de formulario

<div class = "grupo de control" > 
  <label class = "control-label" for = "inputIcon" > Enderezo de correo electrónico </label>  
  <div class = "controis" > 
    <div class = "input-prepend" > 
      <span class = "complemento" ><i class = "icona-sobre" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "texto" >   
    </div>
  </div>
</div>

Tipografía

Títulos

h1. Título 1

h2. Título 2

h3. Título 3

h4. Título 4

h5. Título 5

h6. Título 6

Copia do corpo

Copia do corpo principal

Construído con menos

Énfase

<small>

Negriña

Cursivas

Clases de aliñamento

Clases de énfase

Abreviaturas

<abbr>

<abbr class="initialism">

Enderezos

<address>

Citas de bloque

Presuposto de bloque predeterminado

Opcións de cotización en bloque

Nomear unha fonte

Pantallas alternativas

Listas

Sen orde

Ordenado

Sen estilo

En liña

Descrición

Descrición horizontal

Código

En liña

Bloque básico

Táboas

Estilos predeterminados

Clases optativas

.table-striped

.table-bordered

.table-hover

.table-condensed

Clases de filas opcionais

Marcado de táboa admitido

Formularios

Estilos predeterminados

Disposicións opcionais

Formulario de busca

Formulario en liña

Forma horizontal

Controis de formulario admitidos

Entradas

Área de texto

Caixas de verificación e radios

Predeterminado (apilado)

Caixas de verificación en liña

Selecciona

Ampliación dos controis de formularios

Entradas adicionais e anexas

Opcións predeterminadas

Combinado

Botóns en lugar de texto

Menú despregable de botóns

Grupos desplegables segmentados

Formulario de busca

Control de tamaño

Entradas a nivel de bloque

Tallamento relativo

Dimensionamento da reixa

Entradas non editables

Forma accións

Texto de axuda

Axuda en liña

Bloquear axuda

Estados de control de formularios

Foco de entrada

Entradas non válidas

Entradas desactivadas

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`