Tipografía
Encabezados
Todos los encabezados HTML, de <h1> a <h6> están disponibles.
h1. Encabezado 1
h2. Encabezado 2
h3. Encabezado 3
h4. Encabezado 4
h5. Encabezado 5
h6. Encabezado 6
Texto de cuerpo
El font-size (tamaño de tipografía) predeterminado de BAstrap es 14px, con un line-height (alto de línea) de 20px. Esto se aplica al <body> y a todos los párrafos. Además, los <p> (párrafos) tienen un margen inferior de la mitad de su alto de línea (predeterminado de 10px).
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.
Maecenas 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 de cuerpo destacado
Hacé que un párrafo se destaque usando .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
Énfasis
Hacé uso de las etiquetas estándar de HTML para énfasis.
<small>
Para sacarle énfasis a texto inline o en un bloque, usá la etiqueta small.
Ésta línea de texto se debería considerar como "letra pequeña".
<p> <small>Ésta línea de texto se debería considerar como "letra pequeña".</small> </p>
Negrita
Para dar énfasis a un fragmento de texto con ancho mayor.
El siguiente fragmento de texto se muestra como texto en negrita.
<strong>texto en negrita</strong>
Itálica
Para dar énfasis a un fragmento de texto con itálicas (cursivas).
El siguiente fragmento de texto se muestra como texto en itálicas.
<em>texto en itálicas</em>
¡Atención! Sentite libre de usar <b> y <i> en HTML5. <b> se usa para resaltar palabras o frases sin darles mayor importancia mientras que <i> se usa para la voz, términos técnicos, etc.
Clases para alineación
Realineá fácilmente el texto con estas clases.
Texto alineado a la izquierda.
Texto alineado al centro.
Texto alineado a la derecha.
<p class="text-left">Texto alineado a la izquierda.</p> <p class="text-center">Texto alineado al centro.</p> <p class="text-right">Texto alineado a la derecha.</p>
Clases de énfasis
Transmití sentido a través del color con estas clases utilitarias 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.
<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 con estilos del elemento <abbr> para abreviaturas y acrónimos para mostrar la versión expandida al hacer hover. Abreviaturas con un atributo title tienen un borde inferior punteado y un cursor de ayuda al hacer hover, proveyendo contexto adicional al hacer hover.
<abbr>
Para texto explicativo al hacer hover sobre una abreviatura, incluí el atributo title.
Una abreviatura de la palabra atributo es attr.
<abbr title="atributo">attr</abbr>
<abbr class="initialism">
Agregá .initialism a una abreviatura para un menor tamaño de tipografía.
El HTML es lo mejor del mundo.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Direcciones
Presentá información de contacto para el anterior ancestro del elemento o para la obra completa.
<address>
Preservá el formato terminando todas las líneas con <br>.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Nombre completo
first.last@example.com
<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Nombre completo</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
Blockquotes
Para citar bloques de contenido de otra fuente en tu documento.
Blockquote predeterminado
Usá <blockquote> alrededor de cualquier HTML para hacerlo una cita. Para citas directas recomendamos <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
Opciones de Blockquote
Cambios de estilo y contenido para simples variantes de un blockquote estándar.
Mencionando una fuente
Agregá una etiqueta <small> para identificar la fuente. Poné el nombre de la fuente dentro de una etiqueta <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alguien Famoso en Libro Famoso
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Alguien Famoso en <cite title="Libro Famoso">Libro Famoso</cite></small> </blockquote>
Visualización alternativa
Usá .pull-right para tener un blockquote flotado alineado a la derecha.
<blockquote class="pull-right"> ... </blockquote>
Listas
No ordenadas
Una lista de ítems en los que el orden no es importante.
- 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 porttitor lorem
<ul> <li>...</li> </ul>
Ordenadas
Una lista de ítems en los que el orden sí es importante.
- 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 porttitor lorem
<ol> <li>...</li> </ol>
Sin estilo
Eliminá el list-style predeterminado y el left padding en los ítems de la lista (solamente para los primeros children).
- 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 porttitor lorem
<ul class="unstyled"> <li>...</li> </ul>
Inline
Ubicá todos los ítems en una sola línea y con algo de padding usando inline-block.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="inline"> <li>...</li> </ul>
Descripciones
Una lista de términos con sus descripciones asociadas.
- Listas de descripciones
- Una lista de descripciones es perfecta para definir términos.
- Euismod
- 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.
<dl> <dt>...</dt> <dd>...</dd> </dl>
Descripción horizontal
Hacé que términos y descripciones en <dl> se distribuyan uno al lado del otro.
- Listas de descripciones
- Una lista de descripciones es perfecta para definir términos.
- Euismod
- 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 semper 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>
¡Atención!
Las listas de descipción horizontales truncarán los términos que sean demasiado largos en la columna izquierda usando text-overflow. En visualizaciones más angostas, van a cambiar al layout predeterminado, que es apilado uno arriba del otro.
Código
Inline
Usá <code> para poner código adentro.
<section> debería estar inline.
Por ejemplo, <code><section></code> debería estar inline.
Bloque básico
Usá <pre> para muchas líneas de código. Asegurate de 'escapar' cualquier signo < o > en el código para que funcione bien.
<p>Texto de ejemplo...</p>
<pre> <p>Texto de ejemplo...</p> </pre>
¡Atención! Asegurate de mantener el código dentro de etiquetas <pre> lo más a la izquierda posible, porque se renderizarán todos los espacios y tabulaciones.
Podés agregar opcionalmente la clase .pre-scrollable que le dará un max-height de 350px y una barra de desplazamiento vertical.
Tablas
Estilos predeterminados
Para estilos básicos—algo de padding y solamente divisores horizontales—agregá la clase básica .table a cualquier <table>.
| # | Nombre | Apellido | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table"> … </table>
Clases opcionales
Agregá cualquiera de estas clases a la clase base .table.
.table-striped
Agrega líneas alternadas de sombrado dentro del <tbody> a través del selector :nth-child (no disponible en IE7-8).
| # | Nombre | Apellido | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-striped"> … </table>
.table-bordered
Agrega bordes y esquinas redondeadas a la tabla.
| # | Nombre | Apellido | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-bordered"> … </table>
.table-hover
Activa un estado hoven en las filas de la tabla dentro del <tbody>.
| # | Nombre | Apellido | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-hover"> … </table>
.table-condensed
Hace que la tabla sea más compacta achicando el padding de la celda a la mitad.
| # | Nombre | Apellido | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-condensed"> … </table>
Clases de fila opcionales
Uná clases contextuales para colorear algunas filas de una tabla.
| Clase | Descripción |
|---|---|
.success
|
Indica una acción satisfactoria o positiva. |
.error
|
Indica una acción peligrosa o potencialmente negativa. |
.warning
|
Indica una alerta que puede requerir atención. |
.info
|
Usada como una alternativa al estilo predeterminado |
| # | Producto | Fecha de pago | Estado |
|---|---|---|---|
| 1 | TB - Mensual | 01/04/2012 | Aprobado |
| 2 | TB - Mensual | 02/04/2012 | Rechazado |
| 3 | TB - Mensual | 03/04/2012 | Pendiente |
| 4 | TB - Mensual | 04/04/2012 | Llame para confirmar |
...
<tr class="success">
<td>1</td>
<td>TB - Mensual</td>
<td>01/04/2012</td>
<td>Aprobado</td>
</tr>
...
Código de tabla implementado
Lista de elementos HTML de tablas implementados y cómo se deben usar.
| Etiqueta | Descripción |
|---|---|
<table>
|
Elemento contenedor para mostrar datos en un formato tabular |
<thead>
|
Elemento contenedor para las filas del encabezado de la tabla (<tr>) para dar nombre a las columnas de la tabla
|
<tbody>
|
Elemento contenedor para las filas de la tabla (<tr>) en el cuerpo de la misma
|
<tr>
|
Elemento contenedor para el conjunto de celdas de la tabla (<td> o <th>) que aparece en una misma fila
|
<td>
|
Celda de tabla predeterminada |
<th>
|
Celda de tabla especial (o fila, dependiendo de su alcance y ubicación) para etiquetas |
<caption>
|
Descripción o resumen de lo que contiene la tabla, especialmente útil para sistemas lectores de pantalla |
<table>
<caption>...</caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
Formularios
Estilos predeterminados
Los controles individuales de los formularios reciben estilos, pero sin necesitar una clase base en el <form> o grandes cambios en el código. Se muestran los controles del formulario apilados uno arriba del otro, alineados a la izquierda y con su etiqueta correspondiente encima.
<form>
<fieldset>
<legend>Legend</legend>
<label>Nombre de la etiqueta</label>
<input type="text" placeholder="Escribí algo…">
<span class="help-block">Ejemplo de texto de ayuda block-level.</span>
<label class="checkbox">
<input type="checkbox"> Tildame
</label>
<button type="submit" class="btn">Enviar</button>
</fieldset>
</form>
Layouts opcionales
Incluídos con BAstrap vienen 3 layouts de formularios opcionales para casos de uso comunes.
Formulario de búsqueda
Agregá .form-search al formulario y .search-query al <input> para un text input extra-redondeado.
<form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Buscar</button> </form>
Formulario inline
Agregá .form-inline para etiquetas alineadas a la izquierda y controles inline-block que resultan en un layout compacto.
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Recordarme
</label>
<button type="submit" class="btn">Ingresar</button>
</form>
Formulario horizontal
Etiquetas alineadas a la derecha y flotadas a la izquierda para mostrarlas en la misma línea que los controles. Es el layout que requiere más cambios en el código del formulario:
- Agregá
.form-horizontalal formulario - Add
.control-labelto the label - Envolvé labels y controles en
.control-group - Envolvé cualquier control asociado en
.controlspara una alineación correcta
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Recordarme
</label>
<button type="submit" class="btn">Ingresar</button>
</div>
</div>
</form>
Controles de formularios implementados
Ejemplos de controles de formulario estándar implementados en un layout de ejemplo.
Inputs
El control de formularios más común, cajas de ingreso de texto. Están implementadas todas las variantes de HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, y color.
Requiere siempre el uso del type específico.
<input type="text" placeholder="Ingresar texto">
Textarea
Control de formulario que permite cargar muchas líneas de texto. Cambiá el atributo rows de acuerdo a la necesidad.
<textarea rows="3"></textarea>
Cajas de selección y radios
Los checkboxes son para seleccionar una o más opciones de una lista mientras que los radios son para seleccionar una sola opción entre varias.
Predeterminado (apilados)
<label class="checkbox"> <input type="checkbox" value=""> Opción uno es esta y aquella—asegurate de incluir por qué es genial </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Opción uno es esta y aquella—asegurate de incluir por qué es genial </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Opción dos puede ser otra cosa y seleccionarla deseleccionará la opción uno </label>
Checkboxes inline
Agregá la clase .inline a una serie de checkboxes o radios para que los controles aparezcan en la misma línea.
<label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label>
Selectores
Usá la opción predeterminada o especificá multiple="multiple" para mostrar varias opciones a la vez.
<select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <select multiple="multiple"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
Extendiendo los controles de formularios
BAstrap incluye otros componentes de formularios útiles además de los tradicionales.
Inputs prepended y appended
Agregá texto o botones antes o después de cualquier input de texto. Notá que los elementos select no tienen esta opción.
Opciones predeterminadas
Usá un .add-on y un input con una de las dos clases para agregar el contenido al principio o al final de un input.
<div class="input-prepend"> <span class="add-on">@</span> <input class="span2" id="prependedInput" type="text" placeholder="Username"> </div> <div class="input-append"> <input class="span2" id="appendedInput" type="text"> <span class="add-on">.00</span> </div>
Combinado
Usá ambas clases y dos instancias de .add-on para agregar contenido al principio y al final de un input.
<div class="input-prepend input-append"> <span class="add-on">$</span> <input class="span2" id="appendedPrependedInput" type="text"> <span class="add-on">.00</span> </div>
Botones en lugar de texto
En lugar de un <span> con texto, usá un .btn para añadir un botón (o dos) a un input.
<div class="input-append"> <input class="span2" id="appendedInputButton" type="text"> <button class="btn" type="button">Ir</button> </div>
<div class="input-append"> <input class="span2" id="appendedInputButtons" type="text"> <button class="btn" type="button">Buscar</button> <button class="btn" type="button">Opciones</button> </div>
Dropdowns de botones
<div class="input-append">
<input class="span2" id="appendedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Acción
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
</div>
<div class="input-prepend">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Acción
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</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="dropdown">
Acción
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<input class="span2" id="appendedPrependedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Acción
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
</div>
Grupos de dropdown segmentados
<form>
<div class="input-prepend">
<div class="btn-group">...</div>
<input type="text">
</div>
<div class="input-append">
<input type="text">
<div class="btn-group">...</div>
</div>
</form>
Formulario de búsqueda
<form class="form-search">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">Buscar</button>
</div>
<div class="input-prepend">
<button type="submit" class="btn">Buscar</button>
<input type="text" class="span2 search-query">
</div>
</form>
Dar tamaños a los controles
Usá clases de tamaños relativos como .input-large o adecuá tus inputs a los tamaños de la grilla usando clases .span*.
Inputs block level
Hacé que cualquier <input> o <textarea> se comporte como un elemento de tipo bloque.
<input class="input-block-level" type="text" placeholder=".input-block-level">
Tamaños relativos
<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">
Tamaños de grilla
Usá de .span1 a .span12 para tener inputs con los mismos tamaños que las columnas de la grilla.
<input class="span1" type="text" placeholder=".span1"> <input class="span2" type="text" placeholder=".span2"> <input class="span3" type="text" placeholder=".span3"> <select class="span1"> ... </select> <select class="span2"> ... </select> <select class="span3"> ... </select>
Para usar varios inputs por línea, usá la clase modificadora .controls-row para que les de el espaciado correcto. Flota los inputs para sacar el white-space, coloca márgenes apropiados y hace un clear del float.
<div class="controls"> <input class="span5" type="text" placeholder=".span5"> </div> <div class="controls controls-row"> <input class="span4" type="text" placeholder=".span4"> <input class="span1" type="text" placeholder=".span1"> </div> ...
Inputs no editables
Presentá información en un formulario de forma que no sea editable sin usar código de formularios.
<span class="input-xlarge uneditable-input">Un valor acá</span>
Acciones de formularios
Terminá un formulario con un grupo de acciones (botones). Si se colocan dentro de un .form-actions, los botones automáticamente se alinearán con los controles del formulario.
<div class="form-actions"> <button type="submit" class="btn btn-primary">Guardar cambios</button> <button type="button" class="btn">Cancelar</button> </div>
Texto de ayuda
Apoyo para texto de ayuda inline y block, que aparece al lado de los controles.
Ayuda inline
<input type="text"><span class="help-inline">Texto de ayuda inline</span>
Ayuda block
<input type="text"><span class="help-block">Un bloque más largo de texto de ayuda que baja a otra línea en el caso de no entrar en una sola línea.</span>
Estados para los controles de los formularios
Proveé feedback a los usuarios o visitantes con estados de feedback básicos en los controles y labels.
Foco del input
Eliminamos los estilos predeterminados de outline en algunos controles y aplicamos un box-shadow en su lugar para :focus.
<input class="input-xlarge" id="focusedInput" type="text" value="Esto está en foco...">
Inputs inválidos
Da estilos a través de la funcionalidad predeterminada del navegador usando :invalid. Especificá un type, y agregá el atributo required si el campo no es opcional, y (si se aplica) especificá un pattern.
Esto no está disponible en Internet Explorer 7-9 por la falta de implementación de pseudo selectores de CSS.
<input class="span3" type="email" required>
Inputs desactivadas
Agregá el atributo disabled en un input para evitar la carga de datos y mostrar un estilo diferente.
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Input desactivado acá..." disabled>
Estados de validación
Se incluyen estilos para mensajes de error, alerta, información y resultado satisfactorio. Para usarlos, agregá la clase apropiada al .control-group.
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input con alerta (warning)</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Algo puede haber fallado</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Input con error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Por favor corrija el error</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputInfo">Input con información (info)</label>
<div class="controls">
<input type="text" id="inputInfo">
<span class="help-inline">El nombre de usuario ya está tomado</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input satisfactorio (success)</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Bien!</span>
</div>
</div>
Imágenes
Agregá clases a un elemento <img> para darle estilo a las imágenes fácilmente.
<img src="..." class="img-rounded"> <img src="..." class="img-circle"> <img src="..." class="img-polaroid">
¡Atención! .img-rounded y .img-circle no funcionan en IE7-8 porque no tienen implementado border-radius.
Íconos por Glyphicons
Caracteres de íconos
Están disponibles 140 íconos en forma de sprites, disponibles en gris oscuro (predeterminado) y blanco, provistos por Glyphicons.
Atribución de Glyphicons
Los proyectos que usen íconos de Glyphicons deben incluir un enlace a Glyphicons siempre que sea práctico hacerlo.
Modo de uso
Todos los íconos requieren un tag <i> con una clase única, precedida de icon-. Para usarlos, colocá el siguiente código en cualquier lugar:
<i class="icon-search"></i>
También hay estilos disponibles para íconos invertidos (blancos), agregando una clase más. Específicamente usamos esta clase en los estados hover y active de navegación y enlaces dropdown.
<i class="icon-search icon-white"></i>
¡Atención!
Cuando los uses al lado de una línea de texto, como en botones o enlaces de navegación, asegurate de dejar un especio después del tag <i> para que quede el espacio correcto.
Ejemplos de íconos
Usalos en botones, grupos de botones para una barra de herramientas, navegación o inputs de formularios.
Botones
Grupo de botones en una barra de herramientas de botones
<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>
Dropdown en un grupo de botones
<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="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Editar</a></li>
<li><a href="#"><i class="icon-trash"></i> Eliminar</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Bloquear</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Hacer admin</a></li>
</ul>
</div>
Tamaños de botones
<a class="btn btn-large" href="#"><i class="icon-star"></i> Estrella</a> <a class="btn btn-small" href="#"><i class="icon-star"></i> Estrella</a> <a class="btn btn-mini" href="#"><i class="icon-star"></i> Estrella</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> Aplicaciones</a></li> <li><a href="#"><i class="i"></i> Misc</a></li> </ul>
Campos de formularios
<div class="control-group">
<label class="control-label" for="inputIcon">Dirección de correo</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<input class="span2" id="inputIcon" type="text">
</div>
</div>
</div>