Oreja

CSS básico

Elementos HTML fundamentales diseñados y mejorados con clases extensibles.

¡Aviso! Estos documentos son para v2.3.2, que ya no es oficialmente compatible. ¡Mira la última versión de Bootstrap!

Tipografía

encabezados

Todos los encabezados HTML, <h1>hasta <h6>están disponibles.

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

El valor predeterminado global de Bootstrap font-sizees 14px , con un valor line-heightde 20px . Esto se aplica a los <body>y todos los párrafos. Además, <p>(los párrafos) reciben un margen inferior de la mitad de su altura de línea (10 px 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, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

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

<p> ... </p>

Texto principal del cuerpo

Haga que un párrafo se destaque agregando .lead.

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

<p clase = "cliente potencial" > ... </p>

Construido con menos

La escala tipográfica se basa en dos variables LESS en variables.less : @baseFontSizey @baseLineHeight. El primero es el tamaño de fuente base utilizado en todo el texto y el segundo es la altura de línea base. Usamos esas variables y algunas matemáticas simples para crear los márgenes, rellenos y alturas de línea de todo nuestro tipo y más. Personalízalos y Bootstrap se adapta.

Énfasis

Utilice las etiquetas de énfasis predeterminadas de HTML con estilos ligeros.

<small>

Para quitar énfasis en líneas o bloques de texto, use la etiqueta pequeña.

Esta línea de texto debe tratarse como letra pequeña.

<p> <pequeño> Esta línea de texto debe tratarse como letra pequeña. </pequeño> </p>

Audaz

Para enfatizar un fragmento de texto con una fuente de mayor peso.

El siguiente fragmento de texto se muestra en negrita .

<strong> representado como texto en negrita </strong>

Cursiva

Para enfatizar un fragmento de texto con cursiva.

El siguiente fragmento de texto se muestra en cursiva .

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

¡Aviso!Siéntase libre de usar <b>y <i>en HTML5. <b>está destinado a resaltar palabras o frases sin transmitir una importancia adicional, mientras que <i>es principalmente para voz, términos técnicos, etc.

Clases de alineación

Realinee fácilmente el texto a los componentes con clases de alineación de texto.

Texto alineado a la izquierda.

Texto alineado al centro.

Texto alineado a la derecha.

  1. <p class = "text-left" > Texto alineado a la izquierda. </p> 
  2. <p class = "text-center" > Texto alineado al centro. </p> 
  3. <p class = "text-right" > Texto alineado a la derecha. </p>

Clases de énfasis

Transmita significado a través del color con un puñado de clases de utilidad de énfasis.

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, est non commodo luctus, nisi erat porttitor ligula.

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

abreviaturas

Implementación estilizada del <abbr>elemento HTML para abreviaturas y acrónimos para mostrar la versión ampliada al pasar el mouse. Las abreviaturas con un titleatributo tienen un borde inferior de puntos claros y un cursor de ayuda al pasar el mouse, lo que proporciona contexto adicional al pasar el mouse.

<abbr>

Para texto expandido sobre una abreviatura prolongada, incluya el titleatributo.

Una abreviatura de la palabra atributo es attr .

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

<abbr class="initialism">

Agregue .initialisma una abreviatura para un tamaño de fuente ligeramente más pequeño.

HTML es lo mejor desde el pan rebanado.

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

direcciones

Presente la información de contacto del antepasado más cercano o de todo el trabajo.

<address>

Preserve el formato terminando todas las líneas con <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 Teléfono
: (123) 456-7890
Nombre completo
[email protected] 
  1. <dirección>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Teléfono" > P: </abbr> (123) 456-7890 
  6. </dirección>
  7.  
  8. <dirección>
  9.   <strong> Nombre completo </strong><br>
  10.   <a href = "mailto:#" > primero.ú[email protected] </a> 
  11. </dirección>

cotizaciones en bloque

Para citar bloques de contenido de otra fuente dentro de su documento.

Cita en bloque predeterminada

Envuelva <blockquote>cualquier HTML como la cita. Para citas directas recomendamos un <p>.

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

  1. <cita en bloque>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero posuere erat a ante. </p>
  3. </blockquote>

Opciones de cotización en bloque

Cambios de estilo y contenido para variaciones simples en una cita en bloque estándar.

Nombrar una fuente

Agregue <small>una etiqueta para identificar la fuente. Envuelva el nombre del trabajo fuente en <cite>.

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

Alguien famoso en Título fuente 
  1. <cita en bloque>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero posuere erat a ante. </p>
  3.   <small> Alguien famoso <cite title = "Título de la fuente" > Título de la fuente </cite></small> 
  4. </blockquote>

Pantallas alternativas

Úselo .pull-rightpara una cita en bloque flotante alineada a la derecha.

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

Alguien famoso en Título fuente 
  1. <blockquote class = "tirar a la derecha" > 
  2.   ...
  3. </blockquote>

Liza

desordenado

Una lista de artículos en los que el orden no importa explícitamente.

  • Lorem ipsum dolor siéntate amet
  • Consectetur adipiscing elit
  • entero molestie lorem en massa
  • Facilisis en aliquet pretium nisl
  • nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat en
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Ordenado

Una lista de elementos en los que el orden sí importa explícitamente.

  1. Lorem ipsum dolor siéntate amet
  2. Consectetur adipiscing elit
  3. entero molestie lorem en massa
  4. Facilisis en aliquet pretium nisl
  5. nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

sin estilo

Elimine el list-stylerelleno predeterminado y a la izquierda en los elementos de la lista (solo elementos secundarios inmediatos).

  • Lorem ipsum dolor siéntate amet
  • Consectetur adipiscing elit
  • entero molestie lorem en massa
  • Facilisis en aliquet pretium nisl
  • nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat en
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "sin estilo" > 
  2.   <li> ... </li>
  3. </ul>

En línea

Coloque todos los elementos de la lista en una sola línea con inline-blockun ligero relleno.

  • lorem ipsum
  • Phasellus iaculis
  • Voluntad nulla
  1. < clase ul = "en línea" > 
  2.   <li> ... </li>
  3. </ul>

Descripción

Una lista de términos con sus descripciones asociadas.

Listas de descripción
Una lista de descripción es perfecta para definir términos.
eusmod
Vestibulum id ligula porta felis euismod semper 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. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Descripción horizontal

Haga términos y descripciones <dl>alineados uno al lado del otro.

Listas de descripción
Una lista de descripción es perfecta para definir términos.
eusmod
Vestibulum id ligula porta felis euismod semper 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. 
  1. < clase dl = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

¡Aviso!Las listas de descripciones horizontales truncarán los términos que son demasiado largos para caber en la corrección de la columna izquierda text-overflow. En ventanas gráficas más estrechas, cambiarán al diseño apilado predeterminado.

Código

En línea

Envuelva fragmentos de código en línea con <code>.

Por ejemplo, <section>debe envolverse como en línea. 
  1. Por ejemplo , <código> & lt ; La sección & gt ; </ code > debe ajustarse como en línea .

Bloque básico

Úselo <pre>para varias líneas de código. Asegúrese de escapar de los corchetes angulares en el código para una representación adecuada.

<p>Texto de muestra aquí...</p>
  1. <antes>
  2.   <p>Texto de muestra aquí...</p>
  3. </pre>

¡Aviso!Asegúrese de mantener el código dentro <pre>de las etiquetas lo más cerca posible a la izquierda; renderizará todas las pestañas.

Opcionalmente, puede agregar la .pre-scrollableclase que establecerá una altura máxima de 350 px y proporcionará una barra de desplazamiento del eje y.

Mesas

Estilos predeterminados

Para un estilo básico (relleno ligero y solo divisores horizontales), agregue la clase base .tablea cualquier archivo <table>.

# Primer nombre Apellido Nombre de usuario
1 Marca Otón @mdo
2 jacob Thornton @grasa
3 larry el pájaro @gorjeo 
  1. < clase de tabla = "tabla" > 
  2.   …
  3. </tabla>

Clases opcionales

Agregue cualquiera de las siguientes clases a la .tableclase base.

.table-striped

Agrega rayas de cebra a cualquier fila de la tabla dentro del selector CSS (no disponible en IE7-8) <tbody>.:nth-child

# Primer nombre Apellido Nombre de usuario
1 Marca Otón @mdo
2 jacob Thornton @grasa
3 larry el pájaro @gorjeo 
  1. < clase de tabla = "tabla tabla-rayada" > 
  2.   …
  3. </tabla>

.table-bordered

Agregue bordes y esquinas redondeadas a la mesa.

# Primer nombre Apellido Nombre de usuario
1 Marca Otón @mdo
Marca Otón @getbootstrap
2 jacob Thornton @grasa
3 larry el pájaro @gorjeo 
  1. < clase de tabla = "tabla con borde de tabla" > 
  2.   …
  3. </tabla>

.table-hover

Habilite un estado de desplazamiento en las filas de la tabla dentro de un archivo <tbody>.

# Primer nombre Apellido Nombre de usuario
1 Marca Otón @mdo
2 jacob Thornton @grasa
3 larry el pájaro @gorjeo 
  1. < clase de tabla = "tabla-sobremesa" > 
  2.   …
  3. </tabla>

.table-condensed

Hace que las mesas sean más compactas cortando el relleno de celdas por la mitad.

# Primer nombre Apellido Nombre de usuario
1 Marca Otón @mdo
2 jacob Thornton @grasa
3 larry el pájaro @gorjeo 
  1. < clase de tabla = "tabla tabla-condensada" > 
  2.   …
  3. </tabla>

Clases de fila opcionales

Use clases contextuales para colorear las filas de la tabla.

Clase Descripción
.success Indica una acción exitosa o positiva.
.error Indica una acción peligrosa o potencialmente negativa.
.warning Indica una advertencia que podría necesitar atención.
.info Se utiliza como alternativa a los estilos predeterminados.
# Producto Pago tomado Estado
1 Tuberculosis - Mensual 01/04/2012 Aprobado
2 Tuberculosis - Mensual 02/04/2012 Rechazado
3 Tuberculosis - Mensual 04/03/2012 Pendiente
4 Tuberculosis - Mensual 04/04/2012 Llama para confirmar 
  1. ...
  2.   < tr clase = "éxito" >
  3.     <td> 1 < /td>
  4.     <td>TB - Mensual</ td >
  5.     < td > 04/01/2012 < / td >
  6.     <td>Aprobado</ td >
  7.   </ tr >
  8. ...

Marcado de tabla admitido

Lista de elementos HTML de tabla admitidos y cómo deben usarse.

Etiqueta Descripción
<table> Elemento envolvente para mostrar datos en formato tabular
<thead> Elemento contenedor para filas de encabezado de tabla ( <tr>) para etiquetar columnas de tabla
<tbody> Elemento contenedor para filas de tabla ( <tr>) en el cuerpo de la tabla
<tr> Elemento contenedor para un conjunto de celdas de tabla ( <td>o <th>) que aparece en una sola fila
<td> Celda de tabla predeterminada
<th> Celda de tabla especial para etiquetas de columna (o fila, según el alcance y la ubicación)
<caption> Descripción o resumen de lo que contiene la tabla, especialmente útil para lectores de pantalla 
  1. <tabla>
  2.   <título> ... </título>
  3.   <cabeza>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </tabla>

formularios

Estilos predeterminados

Los controles de formulario individuales reciben estilo, pero sin ninguna clase base requerida en el <form>marcado o grandes cambios. Da como resultado etiquetas apiladas y alineadas a la izquierda sobre los controles de formulario.

Leyenda Ejemplo de texto de ayuda a nivel de bloque aquí. 
  1. <formulario>
  2.   <conjunto de campos>
  3.     <leyenda> Leyenda </leyenda>
  4.     <etiqueta> Nombre de la etiqueta </etiqueta>
  5.     < tipo de entrada = "texto" marcador de posición = "Escriba algo…" >  
  6.     <span class = "help-block" > Ejemplo de texto de ayuda a nivel de bloque aquí. </span> 
  7.     < clase de etiqueta = "casilla de verificación" > 
  8.       < tipo de entrada = "casilla de verificación" > Mírame 
  9.     </etiqueta>
  10.     < tipo de botón = "enviar" clase = "btn" > Enviar </botón>  
  11.   </conjunto de campos>
  12. </formulario>

Diseños opcionales

Bootstrap incluye tres diseños de formulario opcionales para casos de uso común.

Formulario de búsqueda

Agregue .form-searchal formulario y .search-queryal <input>para una entrada de texto extra redondeada.

  1. < clase de formulario = "búsqueda de formulario" > 
  2.   < tipo de entrada = "texto" clase = "consulta de búsqueda de medio de entrada" >  
  3.   < tipo de botón = "enviar" clase = "btn" > Buscar </botón>  
  4. </formulario>

formulario en línea

Agregue .form-inlineetiquetas alineadas a la izquierda y controles de bloque en línea para un diseño compacto.

  1. < clase de formulario = "formulario en línea" > 
  2.   < tipo de entrada = "texto" clase = "entrada pequeña" marcador de posición = "Correo electrónico" >   
  3.   < tipo de entrada = "contraseña" clase = "entrada pequeña" marcador de posición = "Contraseña" >   
  4.   < clase de etiqueta = "casilla de verificación" > 
  5.     < tipo de entrada = "casilla de verificación" > Recuérdame 
  6.   </etiqueta>
  7.   < tipo de botón = "enviar" clase = "btn" > Iniciar sesión </botón>  
  8. </formulario>

forma horizontal

Alinee las etiquetas a la derecha y hágalas flotar hacia la izquierda para que aparezcan en la misma línea que los controles. Requiere la mayoría de los cambios de marcado de un formulario predeterminado:

  • Agregar .form-horizontalal formulario
  • Envuelva etiquetas y controles en.control-group
  • Agregar .control-labela la etiqueta
  • Envuelva cualquier control asociado .controlspara una alineación adecuada
  1. < clase de formulario = "formulario-horizontal" > 
  2.   <div clase = "grupo de control" > 
  3.     <label class = "control-label" for = "inputEmail" > Correo electrónico </label>  
  4.     < clase div = "controles" > 
  5.       < tipo de entrada = "texto" id = "correo electrónico de entrada" marcador de posición = "Correo electrónico" >   
  6.     </div>
  7.   </div>
  8.   <div clase = "grupo de control" > 
  9.     <label class = "control-label" for = "inputPassword" > Contraseña </label>  
  10.     < clase div = "controles" > 
  11.       < tipo de entrada = "contraseña" id = "contraseña de entrada" marcador de posición = "Contraseña" >   
  12.     </div>
  13.   </div>
  14.   <div clase = "grupo de control" > 
  15.     < clase div = "controles" > 
  16.       < clase de etiqueta = "casilla de verificación" > 
  17.         < tipo de entrada = "casilla de verificación" > Recuérdame 
  18.       </etiqueta>
  19.       < tipo de botón = "enviar" clase = "btn" > Iniciar sesión </botón>  
  20.     </div>
  21.   </div>
  22. </formulario>

Controles de formulario admitidos

Ejemplos de controles de formulario estándar admitidos en un diseño de formulario de ejemplo.

Entradas

Control de formulario más común, campos de entrada basados ​​en texto. Incluye soporte para todos los tipos de HTML5: texto, contraseña, fecha y hora, fecha y hora local, fecha, mes, hora, semana, número, correo electrónico, URL, búsqueda, teléfono y color.

Requiere el uso de un especificado typeen todo momento.

  1. < tipo de entrada = "texto" marcador de posición = "Entrada de texto" >

área de texto

Control de formulario que admite varias líneas de texto. Cambie rowsel atributo según sea necesario.

  1. < filas del área de texto = "3" ></área de texto>

Casillas de verificación y radios

Las casillas de verificación son para seleccionar una o varias opciones en una lista, mientras que las radios son para seleccionar una opción de muchas.

Predeterminado (apilado)


  1. < clase de etiqueta = "casilla de verificación" > 
  2.   < tipo de entrada = "casilla de verificación" valor = "" >  
  3.   Opción uno es esto y eso ---- asegúrate de incluir por qué es bueno
  4. </etiqueta>
  5.  
  6. < clase de etiqueta = "radio" > 
  7.   < tipo de entrada = "radio" nombre = "opcionesRadios" id = "opcionesRadios1" valor = "opción1" marcada >     
  8.   Opción uno es esto y eso ---- asegúrate de incluir por qué es bueno
  9. </etiqueta>
  10. < clase de etiqueta = "radio" > 
  11.   < tipo de entrada = "radio" nombre = "opcionesRadios" id = "opcionesRadios2" valor = "opción2" >    
  12.   La opción dos puede ser otra cosa y seleccionarla anulará la selección de la opción uno
  13. </etiqueta>

Casillas de verificación en línea

Agregue la .inlineclase a una serie de casillas de verificación o radios para que los controles aparezcan en la misma línea.

  1. < clase de etiqueta = "casilla de verificación en línea" > 
  2.   < tipo de entrada = "casilla de verificación" id = "inlineCheckbox1" valor = "opción1" > 1   
  3. </etiqueta>
  4. < clase de etiqueta = "casilla de verificación en línea" > 
  5.   < tipo de entrada = "casilla de verificación" id = "inlineCheckbox2" valor = "opción2" > 2   
  6. </etiqueta>
  7. < clase de etiqueta = "casilla de verificación en línea" > 
  8.   < tipo de entrada = "casilla de verificación" id = "inlineCheckbox3" valor = "opción3" > 3   
  9. </etiqueta>

Selecciona

Utilice la opción predeterminada o especifique una multiple="multiple"para mostrar varias opciones a la vez.


  1. <seleccionar>
  2.   <opción> 1 </opción>
  3.   <opción> 2 </opción>
  4.   <opción> 3 </opción>
  5.   <opción> 4 </opción>
  6.   <opción> 5 </opción>
  7. </seleccionar>
  8.  
  9. <seleccione múltiple = "múltiple" > 
  10.   <opción> 1 </opción>
  11.   <opción> 2 </opción>
  12.   <opción> 3 </opción>
  13.   <opción> 4 </opción>
  14.   <opción> 5 </opción>
  15. </seleccionar>

Ampliación de controles de formulario

Además de los controles de navegador existentes, Bootstrap incluye otros componentes de formulario útiles.

Entradas antepuestas y añadidas

Agregue texto o botones antes o después de cualquier entrada basada en texto. Tenga en cuenta que selectlos elementos no son compatibles aquí.

Opciones predeterminadas

Envuelva an .add-ony an inputcon una de dos clases para anteponer o agregar texto a una entrada.

@

.00 
  1. < clase div = "entrada-prefijo" > 
  2.   <span class = "complemento" > @ </span> 
  3.   < clase de entrada = "span2" id = "entrada antepuesta" tipo = "texto" marcador de posición = "Nombre de usuario" >    
  4. </div>
  5. < clase div = "entrada-añadir" > 
  6.   < clase de entrada = "span2" id = "entrada adjunta" tipo = "texto" >   
  7.   <span class = "complemento" > .00 </span> 
  8. </div>

Conjunto

Use ambas clases y dos instancias de .add-onpara anteponer y agregar una entrada.

ps .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "complemento" > $ </span> 
  3.   < clase de entrada = "span2" id = "entradaPrependedAnexada " tipo = "texto" >   
  4.   <span class = "complemento" > .00 </span> 
  5. </div>

Botones en lugar de texto

En lugar de <span>con texto, use a .btnpara adjuntar un botón (o dos) a una entrada.

  1. < clase div = "entrada-añadir" > 
  2.   < clase de entrada = "span2" id = "appendedInputButton " tipo = "texto" >   
  3.   < clase de botón = "btn" tipo = "botón" > ¡Adelante! </botón>  
  4. </div>
  1. < clase div = "entrada-añadir" > 
  2.   < clase de entrada = "span2" id = "botones de entrada adjuntos " tipo = "texto" >   
  3.   <botón clase = "btn" tipo = "botón" > Buscar </botón>  
  4.   <button class = "btn" type = "button" > Opciones </button>  
  5. </div>

Menús desplegables de botones

  1. < clase div = "entrada-añadir" > 
  2.   < clase de entrada = "span2" id = "botón desplegable adjunto" tipo = "texto" >   
  3.   < clase div = "grupo-btn" > 
  4.     < clase de botón = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       Acción
  6.       <span clase = "intercalación" ></span> 
  7.     </botón>
  8.     <ul clase = "menú desplegable" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. < clase div = "entrada-prefijo" > 
  2.   < clase div = "grupo-btn" > 
  3.     < clase de botón = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Acción
  5.       <span clase = "intercalación" ></span> 
  6.     </botón>
  7.     <ul clase = "menú desplegable" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   < clase de entrada = "span2" id = "botón desplegable antepuesto " tipo = "texto" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   < clase div = "grupo-btn" > 
  3.     < clase de botón = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Acción
  5.       <span clase = "intercalación" ></span> 
  6.     </botón>
  7.     <ul clase = "menú desplegable" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "texto" >   
  12.   < clase div = "grupo-btn" > 
  13.     < clase de botón = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       Acción
  15.       <span clase = "intercalación" ></span> 
  16.     </botón>
  17.     <ul clase = "menú desplegable" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Grupos desplegables segmentados

  1. <formulario>
  2.   < clase div = "entrada-prefijo" > 
  3.     <div clase = "grupo-btn" > ... </div> 
  4.     < tipo de entrada = "texto" > 
  5.   </div>
  6.   < clase div = "entrada-añadir" > 
  7.     < tipo de entrada = "texto" > 
  8.     <div clase = "grupo-btn" > ... </div> 
  9.   </div>
  10. </formulario>

Formulario de búsqueda

  1. < clase de formulario = "búsqueda de formulario" > 
  2.   < clase div = "entrada-añadir" > 
  3.     < tipo de entrada = "texto" clase = "span2 búsqueda-consulta" >  
  4.     < tipo de botón = "enviar" clase = "btn" > Buscar </botón>  
  5.   </div>
  6.   < clase div = "entrada-prefijo" > 
  7.     < tipo de botón = "enviar" clase = "btn" > Buscar </botón>  
  8.     < tipo de entrada = "texto" clase = "span2 búsqueda-consulta" >  
  9.   </div>
  10. </formulario>

Dimensionamiento de controles

Use clases de tamaño relativo como .input-largeo haga coincidir sus entradas con los tamaños de columna de la cuadrícula usando .span*clases.

Entradas de nivel de bloque

Haga que cualquier elemento <input>o <textarea>se comporte como un elemento de nivel de bloque.

  1. < clase de entrada = "nivel de bloque de entrada" tipo = "texto" marcador de posición = ".nivel de bloque de entrada" >

Tamaño relativo

  1. < clase de entrada = "input-mini" tipo = "texto" marcador de posición = ".input-mini" >   
  2. < clase de entrada = "entrada pequeña" tipo = "texto" marcador de posición = ".entrada pequeña" >   
  3. < clase de entrada = "medio de entrada" tipo = "texto" marcador de posición = ".medio de entrada" >   
  4. < clase de entrada = "entrada grande" tipo = "texto" marcador de posición = ".entrada grande" >   
  5. < clase de entrada = "entrada-extragrande" tipo = "texto" marcador de posición = ".entrada-extragrande" >   
  6. < clase de entrada = "entrada-xxlarge" tipo = "texto" marcador de posición = ".input-xxlarge" >

¡Aviso!En versiones futuras, modificaremos el uso de estas clases de entrada relativas para que coincidan con los tamaños de nuestros botones. Por ejemplo, .input-largeaumentará el relleno y el tamaño de fuente de una entrada.

Tamaño de cuadrícula

Úselo .span1para .span12entradas que coincidan con los mismos tamaños de las columnas de la cuadrícula.

  1. < clase de entrada = "span1" tipo = "texto" marcador de posición = ".span1" >   
  2. < clase de entrada = "span2" tipo = "texto" marcador de posición = ".span2" >   
  3. < clase de entrada = "span3" tipo = "texto" marcador de posición = ".span3" >   
  4. <seleccione clase = "span1" > 
  5.   ...
  6. </seleccionar>
  7. <seleccione clase = "span2" > 
  8.   ...
  9. </seleccionar>
  10. <seleccione clase = "span3" > 
  11.   ...
  12. </seleccionar>

Para múltiples entradas de cuadrícula por línea, use la .controls-rowclase de modificador para el espaciado adecuado . Hace flotar las entradas para colapsar el espacio en blanco, establece los márgenes adecuados y borra el flotador.

  1. < clase div = "controles" > 
  2.   < clase de entrada = "span5" tipo = "texto" marcador de posición = ".span5" >   
  3. </div>
  4. <div clase = "controles controles-fila" > 
  5.   < clase de entrada = "span4" tipo = "texto" marcador de posición = ".span4" >   
  6.   < clase de entrada = "span1" tipo = "texto" marcador de posición = ".span1" >   
  7. </div>
  8. ...

Entradas no editables

Presente los datos en un formulario que no se pueda editar sin usar el marcado de formulario real.

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

Acciones de formulario

Termina un formulario con un grupo de acciones (botones). Cuando se colocan dentro de un .form-actions, los botones se sangrarán automáticamente para alinearse con los controles del formulario.

  1. < clase div = "acciones de formulario" > 
  2.   < tipo de botón = "enviar" clase = "btn btn-primary" > Guardar cambios </button>  
  3.   < tipo de botón = "botón" clase = "btn" > Cancelar </botón>  
  4. </div>

Texto de ayuda

Compatibilidad en línea y a nivel de bloque para el texto de ayuda que aparece alrededor de los controles de formulario.

ayuda en línea

Texto de ayuda en línea 
  1. <input type = "text" ><span class = "help-inline" > Texto de ayuda en línea </span>

Bloquear ayuda

Un bloque más largo de texto de ayuda que se divide en una nueva línea y puede extenderse más allá de una línea. 
  1. <input type = "text" ><span class = "help-block" > Un bloque más largo de texto de ayuda que se divide en una nueva línea y puede extenderse más allá de una línea. </span>

Estados de control de formulario

Proporcione comentarios a los usuarios o visitantes con estados de comentarios básicos sobre controles y etiquetas de formulario.

Foco de entrada

Eliminamos los outlineestilos predeterminados en algunos controles de formulario y aplicamos un box-shadowen su lugar para :focus.

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

Entradas inválidas

Estilice las entradas a través de la funcionalidad predeterminada del navegador con :invalid. Especifique un type, agregue el requiredatributo si el campo no es opcional y (si corresponde) especifique un pattern.

Esto no está disponible en las versiones de Internet Explorer 7-9 debido a la falta de compatibilidad con los pseudoselectores de CSS.

  1. < clase de entrada = "span3" tipo = "correo electrónico" requerido >

Entradas deshabilitadas

Agregue el disabledatributo en una entrada para evitar la entrada del usuario y activar una apariencia ligeramente diferente.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Entrada deshabilitada aquí..." disabled >

Estados de validación

Bootstrap incluye estilos de validación para mensajes de error, advertencia, información y éxito. Para usar, agregue la clase apropiada al entorno .control-group.

Algo puede haber salido mal
Por favor, corrija el error.
Se toma el nombre de usuario
¡Guau! 
  1. <div class = "advertencia de grupo de control" > 
  2.   <label class = "control-label" for = "inputWarning" > Entrada con advertencia </label>  
  3.   < clase div = "controles" > 
  4.     < tipo de entrada = "texto" id = "advertencia de entrada" >  
  5.     <span class = "help-inline" > Algo puede haber salido mal </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "error de grupo de control" > 
  10.   <label class = "control-label" for = "inputError" > Entrada con error </label>  
  11.   < clase div = "controles" > 
  12.     < tipo de entrada = "texto" id = "error de entrada" >  
  13.     <span class = "help-inline" > Corrija el error </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "información del grupo de control" > 
  18.   <label class = "control-label" for = "inputInfo" > Entrada con información </label>  
  19.   < clase div = "controles" > 
  20.     < tipo de entrada = "texto" id = "información de entrada" >  
  21.     <span class = "help-inline" > El nombre de usuario ya está en uso </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "éxito del grupo de control" > 
  26.   <label class = "control-label" for = "inputSuccess" > Entrada con éxito </label>  
  27.   < clase div = "controles" > 
  28.     < tipo de entrada = "texto" id = "inputSuccess" >  
  29.     <span class = "help-inline" > ¡Guau! </span> 
  30.   </div>
  31. </div>

Botones

Botones predeterminados

Los estilos de botón se pueden aplicar a cualquier cosa con la .btnclase aplicada. Sin embargo, por lo general querrá aplicarlos solo a elementos <a>y <button>para obtener la mejor representación.

Botón clase="" Descripción
btn Botón gris estándar con degradado
btn btn-primary Proporciona peso visual adicional e identifica la acción principal en un conjunto de botones
btn btn-info Se utiliza como alternativa a los estilos predeterminados.
btn btn-success Indica una acción exitosa o positiva.
btn btn-warning Indica que se debe tener precaución con esta acción.
btn btn-danger Indica una acción peligrosa o potencialmente negativa
btn btn-inverse Botón gris oscuro alternativo, no vinculado a una acción o uso semántico
btn btn-link Reduzca el énfasis de un botón haciéndolo parecer un enlace mientras mantiene el comportamiento del botón

Compatibilidad entre navegadores

IE9 no recorta los gradientes de fondo en las esquinas redondeadas, por lo que lo eliminamos. Relacionado, IE9 bloquea los buttonelementos deshabilitados, lo que hace que el texto sea gris con una sombra de texto desagradable que no podemos arreglar.

Tamaños de botones

¿Te apetece botones más grandes o más pequeños? Agregue .btn-large, .btn-smallo .btn-minipara tamaños adicionales.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Botón grande </button>  
  3.   <button class = "btn btn-large" type = "button" > Botón grande </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Botón predeterminado </button>  
  7.   <button class = "btn" type = "button" > Botón predeterminado </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Botón pequeño </button>  
  11.   <button class = "btn btn-small" type = "button" > Botón pequeño </button>  
  12. </p>
  13. <p>
  14.   < clase de botón = "btn btn-mini btn-primary" type = "botón" > Mini botón </button>  
  15.   < clase de botón = "btn btn-mini" tipo = "botón" > Minibotón </botón>  
  16. </p>

Cree botones de nivel de bloque, aquellos que abarcan todo el ancho de un padre, agregando .btn-block.

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

Estado deshabilitado

Haz que los botones parezcan imposibles de hacer clic al atenuarlos un 50 %.

Elemento de anclaje

Agregue la .disabledclase a los <a>botones.

Enlace principal Enlace 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Enlace principal </a>  
  2. <a href = "#" class = "btn btn-large disabled" > Enlace </a>

¡Aviso!Usamos .disabledcomo una clase de utilidad aquí, similar a la .activeclase común, por lo que no se requiere prefijo. Además, esta clase es solo para estética; debe usar JavaScript personalizado para deshabilitar los enlaces aquí.

Elemento de botón

Agregue el disabledatributo a los <button>botones.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Botón principal </button>   
  2. < tipo de botón = "botón" clase = "btn btn-grande" deshabilitado > Botón </botón>

Una clase, varias etiquetas

Utilice la .btnclase en un elemento <a>, <button>o <input>.

Enlace 
  1. <a class = "btn" href = "" > Enlace </a>  
  2. <botón clase = "btn" tipo = "enviar" > Botón </botón>  
  3. < clase de entrada = "btn" tipo = "botón" valor = "Entrada" >   
  4. < clase de entrada = "btn" tipo = "enviar" valor = "Enviar" >

Como práctica recomendada, intente hacer coincidir el elemento con su contexto para garantizar que coincida la representación entre navegadores. Si tiene un input, use un <input type="submit">para su botón.

Imágenes

Agregue clases a un <img>elemento para diseñar imágenes fácilmente en cualquier proyecto.

140x140 140x140 140x140 
  1. <img src = "..." clase = "img-redondeado" >  
  2. <img src = "..." clase = "img-círculo" >  
  3. <img src = "..." clase = "img-polaroid" >

¡Aviso! .img-roundedy .img-circleno funcionan en IE7-8 debido a la falta de border-radiussoporte.

Iconos de Glyphicons

Glifos de icono

140 iconos en forma de sprite, disponibles en gris oscuro (predeterminado) y blanco, proporcionados por Glyphicons .

  • icono de vidrio
  • icono-musica
  • icono-búsqueda
  • icono-sobre
  • icono-corazon
  • icono-estrella
  • icono-estrella-vacío
  • icono-usuario
  • icono de la película
  • icono-th-grande
  • icono-th
  • icono-th-list
  • icono-ok
  • icono-eliminar
  • icono-zoom-in
  • icono-zoom-out
  • icono desactivado
  • icono-señal
  • icono-cog
  • icono-basura
  • icono-casa
  • icono-archivo
  • icono-tiempo
  • icono-carretera
  • icono-descargar-alt
  • icono-descargar
  • subir iconos
  • icono-bandeja de entrada
  • icon-play-circle
  • icono-repetir
  • icono-actualizar
  • icono-lista-alt
  • bloqueo de icono
  • icono-bandera
  • icono-auriculares
  • icono-volumen-apagado
  • icono-volumen-abajo
  • icono-volumen-arriba
  • icono-qrcode
  • icono-código de barras
  • etiqueta-icono
  • etiquetas-icono
  • icono-libro
  • icono-marcador
  • icono de impresión
  • icono-camara
  • icono-fuente
  • icono-negrita
  • icono-cursiva
  • icono-texto-altura
  • icono-texto-ancho
  • icono-alinear-izquierda
  • icono-alinear-centro
  • icono-alinear-derecha
  • icono-alinear-justificar
  • lista de iconos
  • icono-sangría-izquierda
  • icono-sangría-derecha
  • icono-facetime-video
  • icono-imagen
  • icono-lapiz
  • icono-mapa-marcador
  • ajuste de icono
  • icono-tinte
  • icono-editar
  • icono-compartir
  • verificación de icono
  • icono-mover
  • icono-paso-hacia atrás
  • icono-retroceso rápido
  • icono-hacia atrás
  • juego de iconos
  • icono-pausa
  • parada de icono
  • icono-adelante
  • icono de avance rápido
  • icono-paso-adelante
  • icono-expulsar
  • icono-chevron-izquierda
  • icono-chevron-derecha
  • icono-más-signo
  • icono-signo-menos
  • icono-eliminar-firmar
  • icono-ok-signo
  • icono-pregunta-signo
  • icono-info-signo
  • icono-captura de pantalla
  • icono-eliminar-círculo
  • icono-ok-círculo
  • icono-prohibición-círculo
  • icono-flecha-izquierda
  • icono-flecha-derecha
  • icono-flecha-arriba
  • icono-flecha-abajo
  • icono-compartir-alt
  • icono-cambiar-tamaño-completo
  • icono-cambiar tamaño-pequeño
  • icono-más
  • icono-menos
  • icono-asterisco
  • icono-signo-de-exclamación
  • icono-regalo
  • icono-hoja
  • icono de fuego
  • icono-ojo-abierto
  • icono-ojo-cerrar
  • icono-señal-de-advertencia
  • icono-plano
  • icono-calendario
  • icono-aleatorio
  • icono-comentario
  • icono-imán
  • icono-chevron-arriba
  • icono-chevron-abajo
  • icono-retweet
  • icono-carrito-de-compras
  • icono-carpeta-cerrar
  • icono-carpeta-abrir
  • icono-cambiar tamaño-vertical
  • icono-redimensionar-horizontal
  • icono-hdd
  • megáfono-icono
  • icono-campana
  • icono-certificado
  • icono-pulgar-hacia arriba
  • icono-pulgar-abajo
  • icono-mano-derecha
  • icono-mano-izquierda
  • icono-mano-arriba
  • icono-mano-abajo
  • icono-círculo-flecha-derecha
  • icono-círculo-flecha-izquierda
  • icono-círculo-flecha arriba
  • icono-círculo-flecha-abajo
  • icono-globo
  • icono-llave
  • icono-tareas
  • icono-filtro
  • icono-maletín
  • icono-pantalla completa

Atribución de glificones

Glyphicons Halflings normalmente no está disponible de forma gratuita, pero un acuerdo entre Bootstrap y los creadores de Glyphicons lo ha hecho posible sin costo alguno para usted como desarrollador. Como agradecimiento, le pedimos que incluya un enlace opcional a Glyphicons siempre que sea práctico.

Cómo utilizar

Todos los íconos requieren una <i>etiqueta con una clase única, con el prefijo icon-. Para usarlo, coloque el siguiente código en cualquier lugar:

  1. <i clase = "búsqueda de iconos" ></i>

También hay estilos disponibles para iconos invertidos (blancos), preparados con una clase adicional. Haremos cumplir específicamente esta clase en los estados activo y de desplazamiento para los enlaces desplegables y de navegación.

  1. <i class = "icono-búsqueda icono-blanco" ></i>

¡Aviso!Cuando se usa al lado de cadenas de texto, como en botones o enlaces de navegación, asegúrese de dejar un espacio después de la <i>etiqueta para el espacio adecuado.

Ejemplos de iconos

Úselos en botones, grupos de botones para una barra de herramientas, navegación o entradas de formulario antepuestas.

Botones

Grupo de botones en una barra de herramientas de botones
  1. < clase div = "btn-barra de herramientas" > 
  2.   < clase div = "grupo-btn" > 
  3.     <a clase = "btn" href = "#" ><i clase = "icono-alinear-izquierda" ></i></a>   
  4.     <a clase = "btn" href = "#" ><i clase = "icono-alinear-centro" ></i></a>   
  5.     <a clase = "btn" href = "#" ><i clase = "icono-alinear-derecha" ></i></a>   
  6.     <a clase = "btn" href = "#" ><i clase = "icono-alinear-justificar" ></i></a>   
  7.   </div>
  8. </div>
Desplegable en un grupo de botones
Usuario 
  1. < clase div = "grupo-btn" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Usuario </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul clase = "menú desplegable" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Editar </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Eliminar </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Prohibir </a></li>  
  8.     <li clase = "divisor" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Hacer administrador </a></li>  
  10.   </ul>
  11. </div>
Tamaños de botones
Estrella Estrella Estrella 
  1. <a clase = "btn btn-grande" href = "#" ><i clase = "icono-estrella" ></i> Estrella </a>   
  2. <a clase = "btn btn-pequeño" href = "#" ><i clase = "icono-estrella" ></i> Estrella </a>   
  3. <a clase = "btn btn-mini" href = "#" ><i clase = "icono-estrella" ></i> Estrella </a>

Navegación

  1. < clase ul = "nav lista-navegación" > 
  2.   <li class = "activo" ><a href = "#" ><i class = "icon-home icon-white" ></i> Inicio </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Biblioteca </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Aplicaciones </a></li>  
  5.   <li><a href = "#" ><i clase = "i" ></i> Varios </a></li>  
  6. </ul>

campos de formulario

  1. <div clase = "grupo de control" > 
  2.   <label class = "control-label" for = "inputIcon" > Dirección de correo electrónico </label>  
  3.   < clase div = "controles" > 
  4.     < clase div = "entrada-prefijo" > 
  5.       <span clase = "complemento" ><i clase = "icono-sobre" ></i></span>  
  6.       < clase de entrada = "span2" id = "inputIcon" tipo = "texto" >   
  7.     </div>
  8.   </div>
  9. </div>