Base CSS

Además del diseño adaptable, los elementos básicos de HTML tienen estilos (CSS) y se mejoran con clases extensibles para proporcionar una apariencia y sensación fresca y consistente.

Encabezados & body

Escala tipográfica

La tabla tipográfica entera se basa en dos variables Less en nuestro archivo variables.less: @baseFontSize y @baseLineHeight. El primero es la base del tamaño de fuente en su total y el segundo es la base de la altura de la línea.

Utilizamos esas variables y algunas matemáticas para crear márgenes, rellenos y alturas de todos nuestros tipos y más.

Ejemplo de texto en el BODY

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 ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Énfasis, dirección y abreviatura

Elemento Uso Opcional
<strong> Para enfatizar un fragmento de texto con important! Ninguno
<em> Para enfatizar un fragmento de texto con stress Ninguno
<abbr> Envuelve las abreviaturas y los acrónimos para mostrar la versión en hover

Incluye un atributo title opcional para expandir el texto

Utiliza la clase .initialism para abreviaturas en mayúsculas.
<address> Para información de contacto o el cuerpo entero de trabajo. Conserva el formato terminando todas las líneas con <br>

Usando énfasis

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Nota: utiliza <b> y <i> cuando quieras en HTML5, pero su uso ha cambiado un poco. <b> tiene comom función resaltar las palabras o frases sin transmitir una importancia adicional mientras que <i> es más para términos de voz, técnicos, etc.

Ejemplos de direcciones

Aquí tienes dos ejemplos de cómo se puede usar la etiqueta <address>:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Academia Animartec S.L.
info@animartec.com

Ejemplos de abreviaturas

Las abreviaturas con un atributo title tiene un borde punteado fino inferior flotante. Esto da a los usuarios una indicación extra de que algo se mostrará en el aire.

Añade la clase initialism a la abreviatura para aumentar la armonía tipográfica dándole un tamaño de texto un poco más pequeño.

HTML lo mejor que hay!

Una abreviatura de la palabra atributo es attr.

Blockquotes (Bloques tabulados)

Elemento Uso Opcional
<blockquote> Elemento de nivel-block para citar desde otra fuente.

Agrega el atributo cite para la fuente URL de la cita

Usa las clases .pull-left y .pull-right para opciones float
<small> Elemento opcional para añadir citaciones de cara al usuario, típicamente el título del trabajo del autor. Coloca <cite> alrededor del título o el nombre del a fuente

Para incluir un blockquote, envuelve <blockquote> alrededor de cualquier HTML como cita. Para citas más directas recomendamos un <p>.

Incluye un elemento opcional <small> para citar tu fuente y obtendrás una raya/guión &mdash; antes de ella para cuestiones de estilo.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
  <small>Someone famous</small>
</blockquote>

Ejemplo de blockquotes

Las blockquotes por defecto tiene este estilo:

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

Alguien famoso (esto va dentro del blockquote)

Para flotar tu blockquote a la derecha, añade clase class="pull-right":

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

Alguien famoso (esto va dentro del blockquote)

Listas

Sin Orden

<ul>

  • 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

Sin estilo

<ul class="unstyled">

  • 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

Ordenadas

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Descripción

<dl>

Listas con descripción
Una lista de descripción es perfecta para términos de definición.
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.

Descripción horizontal

<dl class="dl-horizontal">

Description lists
Listas de descripción una lista de descripción es perfecta para términos de definición.
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.

Inline

Envuelve fragmentos de código inline con <code>.

Por ejemplo, <code>section</code> se debería envolver como inline.

Bloque (Básico)

Usa <pre> para líneas de código múltiples. Asegúrate de escapar de cualquier etiqueta (> <) en el código para una interpretación adecuada.

<p>Ejemplo de texto aquí...</p>
<pre>
  &lt;p&gt;Ejemplo de texto aquí...&lt;/p&gt;
</pre>

Nota: Asegúrate de mantener el código dentro de las etiquetas <pre> tan cerca de la izquierda como sea posible; interpretará todas la tabulaciones.

Puedes opcionalmente añadir la clase .pre-scrollable que aplicará una altura máxima de 350px y proporcionará una barra de desplazamiento de eje -y.

Adorno de Google

Con el mismo elemento <pre> añade dos clases opcionales para la interpretación mejorada.

<p>Ejemplo de texto aquí...</p>
<pre class="prettyprint
     linenums">
  &lt;p&gt;Ejemplo de texto aquí...&lt;/p&gt;
</pre>

Descarga google-code-prettify y mira el leeme para saber como se usa.

Etiqueta Table

Etiqueta Descripción
<table> Elemento de envoltorio para mostrar datos en formato tabular
<thead> Elemento contenedor para filas de encabezamiento de tabla (<tr>) ara etiquetar columnas de la tabla
<tbody> Elemento contenedor para filas de tabla (<tr>) en el cuerpo de la tabla
<tr> Elemento contenedor de un conjunto de celdas de tabla (<td> o <th>) que aparece en una sola fila
<td> Celda de tabla por defecto
<th> Celdas de tabla especial para etiquetas (o filas, dependiendo del campo o el lugar) de grid Se debe usar dentro un <thead>
<caption> Descripción o resumen de lo que mantiene la tabla, especialmente útil para lectores de pantalla.
<table>
  <thead>
    <tr>
      <th>…</th>
      <th>…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>…</td>
      <td>…</td>
    </tr>
  </tbody>
</table>

Opciones de tabla

Nombre Clase Descrición
Por defecto Ninguna Sin estilos, solo columnas y filas
Basica .table Sólo líneas horizontales entre filas
Con bordes .table-bordered Esquinas redondeadas y añade un borde exterior
Rayas de cebra .table-striped Añade un fondo gris claro a las filas impares (1, 3, 5, etc)
Condensado .table-condensed Corta el relleno veritcal a la mitad, desde 8px a 4px, dentro de todos los elementos td y th

Ejemplos de tabla

1. Estilos de tabla por defecto

Las tablas tienen el estilo automático con solo unos bordes para asegurar la lectura y mantener la estructura. Con 2.0, se requiere la clase .table

<table class="table">
  …
</table>
# Nombre Apellido Usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

2. Rayas de cebra

Hazte un poco estranbótico con tus tablas añadiendo las rayas de zebra - solo añade la clase .table-striped

Note: las tablas con rayas usan el seleccionador :nth-child y no está disponible en IE7-IE8.

<table class="table table-striped">
  …
</table>
# Nombre Apellido Usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

3. Tabla con bordes

Añade bordes alrededor de la tabla entera y esquinas redondeadas para cuestiones estéticas.

<table class="table table-bordered">
  …
</table>
# Nombre Apellido Usuario
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

4. Tabla condensada

Haz tus tablas más compactas añadiendo la clase .table-condensed para cortar el relleno de la casilla de la tabla a la mitad (de 8px a 4px).

<table class="table table-condensed">
  …
</table>
# Nombre Apellido Usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

5. ¡Combínalas todas!

Si quieres, combina cualquier tabla para conseguir apariencias diferentes utilizando cualquier clase disponible.

<table class="table table-striped table-bordered table-condensed">
  ...
</table>
Nombre Completo
# Nombre Apellido Usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

HTML y CSS flexible

La mejor parte de los formularios en Boostrap es que todas tus entradas y controles parecen maravillosos sin importar como las creas en tu código. No se requiere un HTML superfluo, pero proporcionamos las plantillas para aquellos que lo necesiten.

Hay diseños más complicados con las clases consisas y a escala para un estilo más fácil y un enlace de evento, de manera que te cubres a cada paso.

Cuatro diseños incluidos

Boostrap viene con el soporte de cuatro tipos de diseño de formulario:

  • Vertical (por defecto)
  • Búsqueda
  • En Línea
  • Horizontal

Los tipos de diseño de formulario diferentes requieren algunos cambios para la marca, pero los mismo controles permanecen y actúan de la misma manera.

Estados de control y más

Los formularios de Boostrap incluyen estilos para todos los controles de formulario base como entrada, área de texto, y seleccionador que puedas esperar. Pero también viene con un número de componentes personalizables como entradas agregadas o eliminadas y soporte para las listas de casillas de verficación.

Estados de error, alertas, y éxito están incluidos pro cada typo de control de formulario are included for each type of form control.

Cuatro tipos de formularios

Boostrap proporciona etiquetado y estilos simples para cuatro estilos de formularios web comunes.

Nombre Clase Descripción
Vertical (por defecto) .form-vertical (no requerido) Amontonado, etiquetas alineadas a la izquierda sobre los controles (Ejemplo: "Nombre:" A la izquierda y debajo el input para completarlo)
En Línea .form-inline Etiqueta alineada a la izquierda y controles in line para un estilo compacto (uno al lado del otro, seguido y en la misma línea)
Búsqueda .form-search Extra-rounded text input for a typical search aesthetic
Horizontal .form-horizontal etiqueta alineada a la derecha, control alineado a la izquierda (peru ambos en la misma línea)

Ejemplo de formulario Usar solo controles de formulario, sin etiquetado extra

Formulario básico

Con v2.0, tenemos estilos de formulario por defecto más claros y mejores. No hay una etiquetado extra, solo controles de formulario.

Texto de ayuda asociado!

Ejemplo de texto de ayuda a nivel de bloque aquí.

<form class="well">
  <label>Nombre de etiqueta</label>
  <input type="text" class="span3" placeholder="Escribe algo…">
  <span class="help-inline">Texto de ayuda asociado!</span>
  <label class="checkbox">
    <input type="checkbox"> Check me out
  </label>
  <button type="submit" class="btn">Enviar</button>
</form>

Formulario de búsqueda

Para reflejar los estilos WebKit por defecto, solo añade .form-search para campos de búsqueda extra redondeados.

<form class="well form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Buscar</button>
</form>

Formulario en línea (inline)

Las entradas están a nivel de bloque para empezar. Para .form-inline y .form-horizontal, utilizamos el bloque inline.

<form class="well form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Recordar
  </label>
  <button type="submit" class="btn">Entrar</button>
</form>

Formularios horizontales

Soportes de controles de Boostrap

Además del texto de forma libre, cualquier entrada HTML5 basado en texto aparece como tal..

Ejemplo de etiquetado

Dados los ejemplo anteriores de diseño de formulario, aquí tienes una etiquetado asociada al primer grupo de entrada y de control. Las clases .control-group, .control-label, y .controls se requieren todas para el estilo.

<form class="form-horizontal">
  <fieldset>
    <legend>Legend text</legend>
    <div class="control-group">
      <label class="control-label" for="input01">Text input</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="input01">
        <p class="help-block">Supporting help text</p>
      </div>
    </div>
  </fieldset>
</form>

¿Qué está incluido?

Como se ve a la izquierda, están todos los controles de formulario por defecto que sostenemos. Aquí está la lista:

  • text inputs (text, password, email, etc)
  • checkbox
  • radio
  • select
  • multiple select
  • file input
  • textarea

Estados de control de formulario
No puedes editarme ;)
Cuidado! Algo podría tenet un error
Error! corrija el texto!.
Perfecto!
Perfecto!

Estados de navegador rediseñado

Las características de estilo de Boostrap para los soportes de navegadores concentrados y estados disabled. Eliminamos el WebKit por defecto outline y aplicamos un box-shadow en su lugar para :focus.


Validación de formulario

También incluye los estilos de validación para errores, advertencias y éxitos. Para usarlo, añade la clase error a su alrededor .control-group.

<fieldset
  class="control-group error">
  …
</fieldset>

Expandir controles de formulario

Usa la miasma clase .span* que utilizas para el gris también en para los tamaños de inputs.

Puedes utilzar estas clases estáticas que no son del grid específicamente o ten en cuenta los tipos de variación de los controles (por ejemplo, input vs. select).

@
.00
$.00

Anteponer y postponer textos en inputs

Los grupos de entradas - con texto antes o después - proporcionan una manera fácil de dar más contexto a tus entradas. Algunos buenos ejemplos son el símbolo de @ para Twitter o el $ o € para el dinero.


Casillas de verificación (checkboxes) y radios

Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.

Las casillas de verificación y los radios en línea también están soportados. Sólo añade .inline a cualquier .checkbox or .radio y listo!


Formularios en línea y anteponer y postponer

Para utilizar entrads agrgadas o eliminadas en un formulario inline, asegúrate de colocar el .add-on y input en la misma línea, sin espacios.


Texto de ayuda de formulario

ara añadir texto de ayuda para entradas de formulario, incluye texto de ayuda in line con <span class="help-inline"> o un bloque de texto de ayuda con <p class="help-block"> después del elemento de entrada.

Botón class="" Descripción
btn Botón gris estándar con gradiente
btn btn-primary Proporcionar un peso visual extra e identifica la acción primaria en un conjunto de botones.
btn btn-info Se usa como alternativa para estilos de defecto
btn btn-success Indica una acción buena o positiva
btn btn-warning Indica que se deberír ir con cuidado con esta acción
btn btn-danger Indica una acción peligrosa o muy negativa
btn btn-inverse Botón alternativo gris oscuro, sin enlazar con una acción o uso semántico

Botones para acciones

Como convención, los botones solo se deberían usar para acciones mientras los hiper-vínculos se usan para objetos. Por ejemplo, “Descarga” debería ser un botón mientras que “actividad reciente” debería ser un enlace.

Los botones de estilo se pueden aplicar a cualquier cosa con la clase .btn aplicada. Sin embargo, normalmente querrás aplicar estas clases a los elementos <a> y <button>.

Compatibilidad de navegador

IE9 no corta los degradados de fondo en esquinas redondeadas, así que lo eliminamos. En relación, IE9 mostraba los elementos botón deshabilitados y el texto con una sombra de texto fea que no podemos solucionar.

Tamaños múltiples

¿Te gustaría tener botones más pequeños o más grandes? Añade .btn-large, .btn-small, o .btn-mini para dos tamaños adicionales.


Estado deshabilitado

Para botones deshabilitados, añade la clase .disabled a los enlaces y el atributo disabled para los elementos button <button>.

Enlace primario Enlace

¡Atención! Usamos .disabled como una clase de utilidad, similar a la clase común .active, así que no se necesita prefijo.

Una clase, etiquetas múltiples

Utiliza la clase .btn en un elemento <a>, <button>, o <input>.

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

Como mejor práctica intenta combinar el elemento para tu conexto y asegúrate de hacer coincidir el funcionamiento del navegador. SI tienes un input, utiliza un <input type="submit"> para el botón.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal

Crear como un sprite

En lugar de hacer cada icon como una petición extra, los hemos compilado en un sprite - un montón de imágenes en un archivo que utiliza CSS para posicionar imágenes con background-position. Es el mismo método que utilizamos en Twitter.com y que nos ha funcionado bien.

Todas las clases de icones tienen el prefijo .icon- para un espacio de nombre y registro adecuados, como muchos de nuestros componentes. Esto ayudará a evitar conflictos con otras herramientas.

Glyphicons nos ha garantizado el uso de conjunto de Halfings en nuestro kit de herramientas en nuestro recurso abierto tanto tiempo como nosotros proporcionemos un enlace y crédito en los documentos. Por favor, considera hacer los mismo en tus proyectos.

Como usarlo

Boostrap utiliza una etiqueta <i> para todos los iconos, pero no tienen ninguna clase de caso - solo comparten el prefijo. Para usarlo, colocar el siguiente código en cualquier lugar:

<i class="icon-search"></i>

Además también hay estilos disponibles para iconos invertidos (blanco), listos para una clase extra::

<i class="icon-search icon-white"></i>

Hay 120 clases para elegir para tus iconos. Añade una etiqueta <i> con las clases correctas y ya estará. Puedes encontrar la lista completa en sprites.less o en este documento.

¡Atención! Cuando se usa detrás de cadenas de texto, como botones o enlaces nav, asegúrate de dejar espacio después de la etiqueta <i> para un espacio adecuado.

Casos de Uso

Los iconos son fenomenales, pero ¿Dónde los usaríamos? Aquí tienes unas cuantas ideas:

  • Como pantalla para tu barra de navegación
  • Para una navegación puramente de iconos
  • Para que los botones ayuden a transmitir el significado de una acción
  • Con enlaces para compartir contexto en un destino de un usuario

Básicamente, cualquier lugar donde pongas una etiqueta <i> puedes poner un icono.

Ejemplos

Utílizalos en botones, grupos de botones para una barra de herramientas, en navegaciones o en entradas de formulario agregadas.