[Fuente: http://getbootstrap.com/getting-started/]

Bootstrap es un potente framework front-end para hacer desarrollos web rápidos, creado por Mark Otto y Jacob Thornton, and maintained by the core team with the massive support and involvement of the community.

Bootstrap tiene varias formas de empezar rápidamente con él, cada una dependiendo del diferente nivel de aprendizaje y del caso de uso

Bootstrap

Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.

Download Bootstrap

Source code

Source Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup.

Download source

Sass

Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.

Download Sass

Currently v3.1.1.

Bootstrap CDN

The folks over at MaxCDN graciously provide CDN support for Bootstrap’s CSS and JavaScript. Just use these Bootstrap CDN links.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Install with Bower

Install and manage Bootstrap’s Less, CSS, JavaScript, and fonts using Bower.

$ bower install bootstrap

sdsdsdss

[Fuente: http://librosweb.es/bootstrap_3/]

1.2. Contenidos de Bootstrap

Bootstrap se puede descargar de dos maneras, compilado o mediante el código fuente original. Dependiendo de la forma que hayas elegido, verás una estructura de directorios u otra. En esta sección se muestran los detalles de cada una de ellas.

ADVERTENCIA Todos los plugins JavaScript de Bootstrap requieren la librería jQuery para funcionar, por lo que deberás incluirlo en tus plantillas, tal y como se muestra en los ejemplos de las siguientes secciones. Para saber qué versiones concretas de jQuery se soportan, consulta el contenido de nuestro archivo bower.json.

1.2.1. Contenidos de la versión compilada de Bootstrap

Después de descomprimir el archivo que te has descargado con la versión compilada de Bootstrap, verás la siguiente estructura de archivos y directorios:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

Estos archivos son la forma más sencilla de utilizar Bootstrap en cualquier proyecto web. Para cada archivo se ofrecen dos variantes: los archivos compilados (cuyo nombre es bootstrap.*) y los archivos compilados + comprimidos (cuyo nombre es bootstrap.min.*). También se incluyen las fuentes de los iconos del proyecto Glyphicons y el tema opcional de Bootstrap.

1.2.2. Contenidos de la versión original de Bootstrap

La versión original de Bootstrap incluye, además de las versiones compiladas de los archivos CSS y JavaScript, las versiones originales de esos mismos archivos y toda la documentación. Tras descomprimir el archivo que te has descargado con la versión original de Bootstrap, verás la siguiente estructura de archivos y directorios:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

Los directorios less/, js/ y fonts/ contienen el código fuente utilizado para generar los archivos CSS, JavaScript y las fuentes. El directorio dist/ contiene los mismos archivos que se han mostrado en la sección anterior para la versión compilada de Bootstrap. El directorio docs/ incluye el código fuente de la documentación de Bootstrap y un directorio llamado examples/ con varios ejemplos de uso. El resto de archivos están relacionados con otros temas secundarios, como por ejemplo las licencias del código.

1.3. La primera plantilla Bootstrap

Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación o puedes echar un vistazo a los ejemplos de plantillas que hemos preparado. La idea de estos ejemplos es que los utilices como punto de partida para crear tus propios diseños.

El siguiente código HTML muestra una plantilla muy sencilla creada con Bootstrap:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Plantilla básica de Bootstrap</title>

    <!-- CSS de Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- librerías opcionales que activan el soporte de HTML5 para IE8 -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>¡Hola mundo!</h1>

    <!-- Librería jQuery requerida por los plugins de JavaScript -->
    <script src="http://code.jquery.com/jquery.js"></script>

    <!-- Todos los plugins JavaScript de Bootstrap (también puedes
         incluir archivos JavaScript individuales de los únicos
         plugins que utilices) -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

1.3.1. Ejemplos de plantillas creadas con Bootstrap

Partiendo de la primera plantilla básica mostrada anteriormente se pueden crear muchos otros diseños de página. La siguiente lista muestra cómo crear algunos de los diseños más utilizados en los sitios web actuales: http://getbootstrap.com/getting-started/#examples

1.4. La comunidad Bootstrap

Utiliza los siguientes recursos para estar al tanto de las novedades de Bootstrap y mantener el contacto con otros miembros de la comunidad.

El blog oficial de Bootstrap.
Chatea con otros miembros de la comunidad a través de nuestro canal ##twitter-bootstrap en el servidor irc.freenode.net.
Descubre algunos de los proyectos más alucinantes creados con Bootstrap en el sitio Bootstrap Expo.

También puedes seguir nuestra cuenta oficial en Twitter: @twbootstrap.

1.5. Desactivando el diseño responsive

¿No quieres que tu sitio o aplicación web modifique su aspecto según el dispositivo utilizado por el usuario? En ese caso, y con un poco de esfuerzo, puedes desactivar las características responsive de Bootstrap para que los usuarios con móvil vean el mismo sitio que los usuarios con un navegador de escritorio.

1.5.1. Cómo desactivar el diseño responsive de Bootstrap

Aplica los siguientes pasos para desactivar el diseño responsive de Bootstrap y echa un vistazo al ejemplo que se muestra después:

Elimina de tus páginas (o simplemente no añadas) la etiqueta <meta name="viewport" ... > que se explica en los próximos capítulos.
Elimina la propiedad max-width de todos los elementos .container aplicando el estilo max-width: none !important; y estableciendo una anchura normal con width: 970px;. Obviamente, debes añadir estos estilos después del CSS por defecto aplicado por Bootstrap.
Si utilizas menús y barras de navegación, debes eliminar todos los estilos que hacen que se compriman en dispositivos pequeños. Como este cambio es enorme, será mejor que veas los estilos CSS del ejemplo que se muestra más adelante.
Utiliza las clases .col-xs-* (xs = extra-small) para tus diseños basados en rejillas en vez de las otras clases para dispositivos medianos o grandes. No te preocupes porque estas clases .col-xs-* escalan bien para cualquier resolución.

En cualquier caso, si utilizas IE8 debes seguir cargando la librería Respond.js, ya que las media queriessiguen siendo necesarias a pesar de los cambios anteriores.

Para que sean más fáciles de entender los cambios anteriores, se muestra a continuación un ejemplo completo de cómo aplicarlos en una página real: Ver ejemplo de diseño no responsive. No olvides echar un vistazo a su código porque se han resaltado claramente todos los cambios realizados.

1.6. Actualización de Bootstrap 2.X a 3.0

Esta sección está pensada para aquellos diseñadores que quieren actualizar sus proyectos a Bootstrap 3 desde la anterior versión. Además de mencionar los cambios más importantes, se incluyen varias tablas sobre la equivalencia entre Bootstrap 2 y 3.

1.6.1. Principales cambios en las clases CSS

Clase de Bootstrap 2.x	Clase de Bootstrap 3.0
`.container-fluid`	`.container`
`.row-fluid`	`.row`
`.span*`	`.col-md-*`
`.offset*`	`.col-md-offset-*`
`.brand`	`.navbar-brand`
`.nav-collapse`	`.navbar-collapse`
`.nav-toggle`	`.navbar-toggle`
`.btn-navbar`	`.navbar-btn`
`.hero-unit`	`.jumbotron`
`.icon-*`	`.glyphicon .glyphicon-*`
`.btn`	`.btn .btn-default`
`.btn-mini`	`.btn-xs`
`.btn-small`	`.btn-sm`
`.btn-large`	`.btn-lg`
`.visible-phone`	`.visible-sm`
`.visible-tablet`	`.visible-md`
`.visible-desktop`	`.visible-lg`
`.hidden-phone`	`.hidden-sm`
`.hidden-tablet`	`.hidden-md`
`.hidden-desktop`	`.hidden-lg`
`.input-small`	`.input-sm`
`.input-large`	`.input-lg`
`.checkbox.inline .radio.inline`	`.checkbox-inline` `.radio-inline`
`.input-prepend .input-append`	`.input-group`
`.add-on`	`.input-group-addon`
`.thumbnail`	`.img-thumbnail`
`ul.unstyled`	`.list-unstyled`
`ul.inline`	`.list-inline`

1.6.2. Nuevos elementos

Bootstrap 3 añade nuevos elementos y cambia algunos de los ya existentes. La siguiente tabla resume las clases CSS que se han añadido o modificado.

Elemento	Clases CSS
Paneles	`.panel .panel-default` `.panel-body` `.panel-title` `.panel-heading` `.panel-footer` `.panel-collapse`
Grupos de listas	`.list-group` `.list-group-item` `.list-group-item-text` `.list-group-item-heading`
Glyphicons	`.glyphicon`
Jumbotron	`.jumbotron`
Rejilla diminuta (<768 px)	`.col-xs-*`
Rejilla pequeña (>768 px)	`.col-sm-*`
Rejilla mediana (>992 px)	`.col-md-*`
Rejilla grande (>1200 px)	`.col-lg-*`
Márgenes	`.col-sm-offset-` `.col-md-offset-` `.col-lg-offset-*`
Desplazamiento hacia la derecha	`.col-sm-push-` `.col-md-push-` `.col-lg-push-*`
Desplazamiento hacia la izquierda	`.col-sm-pull-` `.col-md-pull-` `.col-lg-pull-*`
Grupos de `<input>`	`.input-group` `.input-group-addon` `.input-group-btn`
Controles de formulario	`.form-control` `.form-group`
Grupos de botones	`.btn-group-xs` `.btn-group-sm` `.btn-group-lg`
Texto de los `.navbar`	`.navbar-text`
Cabecera de los `.navbar`	`.navbar-header`
Pestañas justificadas	`.nav-justified`
Imágenes responsive	`.img-responsive`
Filas de tabla contextuales	`.success` `.danger` `.warning` `.active`
Paneles contextuales	`.panel-success` `.panel-danger` `.panel-warning` `.panel-info`
Ventanas modales	`.modal-dialog` `.modal-content`
Imágenes en miniatura	`.img-thumbnail`
Elementos `.well`	`.well-sm` `.well-lg`
Enlaces de alerta	`.alert-link`

1.6.3. Elementos eliminados

Los siguientes elementos se han eliminado o han cambiado en Bootstrap 3.

Elemento existente en 2.x	Equivalente en 3.0
`.form-actions`	(no existe)
`.form-search`	(no existe)
`.container-fluid`	`.container` (ahora todas las rejillas son fluidas)
`.row-fluid`	`.row` (ahora todas las rejillas son fluidas)
`.navbar-inner`	(no existe)
`.dropdown-submenu`	(no existe)
`.tabs-left` `.tabs-right` `.tabs-below`	(no existe)

1.6.4. Otros cambios importantes

Bootstrap 3 incluye decenas de pequeños cambios que al principio pueden pasar desapercibidos. Todos los estilos y comportamientos principales de Bootstrap se han ajustado para que sean más flexibles y encajen en la nueva estrategia “mobile first” en la que lo más importante son los dispositivos móviles.

Los campos de formulario de texto ahora tienen una anchura del 100%. Para controlar su anchura, enciérralos con la etiqueta <div></div>.
La clase .badge ya no tiene sufijos semánticos (-success, -primary,etc.).
El botón con aspecto normal requiere, además de la clase .btn, la clase .btn-default.
Tanto .container como .row ahora se comportan de forma fluída porque están basados en porcentajes.
Las imágenes ya no son responsive por defecto. Añade la clase .img-responsive para convertir una imagen en responsive.
Los iconos, que ahora utilizan la clase .glyphicon, se crean con una fuente especial y no con imágenes. Cada icono requiere una clase CSS genérica y otra específica. Para mostrar por ejemplo el icono de un asterisco tienes que utilizar las siguientes clases: .glyphicon .glyphicon-asterisk.
El componente Typeahead se ha eliminado y ahora se utiliza Twitter Typeahead.
El código HTML de los elementos modales ha cambiado mucho. Las secciones .modal-header, .modal-body y .modal-footer ahora se encierran con las clases .modal-content y .modal-dialog para mejorar su aspecto en los móviles.
Los eventos de JavaScript ahora usan namespaces. Para utilizar por ejemplo el evento show de un elemento modal, utiliza el evento show.bs.modal; para el evento shown de las pestañas se utilizashown.bs.tab, etc.

El sitio web Bootply dispone de más información y ejemplos de código para actualizar de Bootstrap 2 a Bootstrap 3.

1.7. Compatibilidad con los navegadores

Bootstrap ha sido pensado para utilizarse en las versiones más recientes de los navegadores de escritorio y navegadores móviles. Aunque también funciona con los navegadores más antiguos, en estos casos es posible que algunos componentes se vean peor de lo esperado.

1.7.1. Navegadores soportados

Concretamente, Bootstrap soporta las versiones más recientes de los siguientes navegadores y plataformas:

	Chrome	Firefox	Internet Explorer	Opera	Safari
Android	✔	✘	–	✘	–
iOS	✔	–	–	✘	✔
Mac OS X	✔	✔	–	✔	✔
Windows	✔	✔	✔	✔	✘

Bootstrap también debería funcionar bien en Chromium (Linux) y Internet Explorer 7 (Windows), aunque no están soportados oficialmente.

1.7.2. Internet Explorer 8 y 9

Los navegadores Internet Explorer 8 y 9 también están soportados, pero debes tener en cuenta que muchas propiedades de CSS3 y elementos de HTML5 no funcionan en estos navegadores. Además, Internet Explorer 8 requiere el uso de la librería respond.js para que el diseño web responsive funcione bien.

Funcionalidad	Internet Explorer 8	Internet Explorer 9
`border-radius`	✘ No soportado	✔ Soportado
`box-shadow`	✘ No soportado	✔ Soportado
`transform`	✘ No soportado	✔ Soportado con el prefijo `-ms`
`transition`	✘ No soportado	✘ No soportado
`placeholder`	✘ No soportado	✘ No soportado

Visita el sitio web Can I use… obtener más información sobre el soporte de todas las propiedades de CSS3 y HTML5 en cada navegador.

1.7.3. Internet Explorer 8 y Respond.js

Cuando utilices Respond.js con Internet Explorer 8, debes tener en cuenta las siguientes limitaciones.

1.7.3.1. Respond.js y el CSS alojado en otro dominio

Si utilizas archivos CSS alojados en dominios o subdominios diferentes al utilizado para enlazar Respond.js(por ejemplo porque usas una CDN) entonces debes realizar ciertas configuraciones adicionales, tal y como se explica en la documentación de Respond.js.

1.7.3.2. Respond.js y `file://`

Debido a las restricciones de seguridad, Respond.js no funciona cuando ves las páginas localmente en tu propio navegador mediante el protocolo file:// (por ejemplo al pinchar dos veces sobre un archivo HTML de tu ordenador). Para probar las funcionalidades responsive en Internet Explorer 8, asegúrate de ver la página a través del protocolo http:// o https://. Lee la documentación de Respond.js para obtener más detalles.

1.7.3.3. Respond.js y `@import`

Respond.js no funciona con el código CSS importado mediante la directiva @import, lo que es común en algunas configuraciones de Drupal. Lee la documentación de Respond.js para obtener más detalles.

1.7.3.4. Internet Explorer 8 y el modelo de cajas

Internet Explorer 8 no soporta completamente la propiedad box-sizing: border-box; cuando se combina con min-width, max-width, min-height o max-height. Por ese motivo, a partir de la versión 3.0.1 Bootstrap ya no utiliza la propiedad max-width en los elementos .containers.

1.7.4. Comentarios sobre la compatibilidad con Internet Explorer

Bootstrap no funciona con los modos de compatibilidad antiguos de Internet Explorer. Para asegurarte de que utilizas el modo correcto, puedes añadir la siguiente etiqueta <meta> en todas tus páginas, ya que activa el modo más avanzado que esté disponible en tu navegador Internet Explorer:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Confirma que Internet Explorer está utilizando el modo correcto pulsando la tecla F12 y comprobando el valor de la opción “Document Mode”.

Esta etiqueta HTML se incluye en toda la documentación y todos los ejemplos de Bootstrap para que se muestren lo mejor posible en cada versión de Internet Explorer.

Puedes obtener más información sobre este tema en la siguiente pregunta de StackOverflow.

1.7.5. Windows Phone 8 y Internet Explorer 10

Internet Explorer 10 no distingue entre la anchura del dispositivo y la anchura del viewport, por lo que no aplica correctamente las media queries del CSS de Bootstrap. Normalmente la solución es tan sencilla como añadir la siguiente regla CSS:

@-ms-viewport       { width: device-width; }

Lamentablemente esta solución no funciona con algunas versiones de Windows Phone 8. Por eso es necesario utilizar el siguiente código CSS y JavaScript:

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style")

    msViewportStyle.appendChild(
        document.createTextNode(
            "@-ms-viewport{width:auto!important}"
        )
    )

    document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
}

1.7.6. Errores de redondeo de Safari

El motor de las versiones más recientes de Safari para Mac OS X tiene un error de redondeo que afecta a las clases .col-*-1 utilizadas en los diseños basados en rejilla. La consecuencia es que si tienes una fila con 12 columnas individuales, verás que su anchura total se queda un poco corta comparada con las otras filas. Hasta que Apple no solucione este problema, lo que puedes hacer es:

Añadir la clase .pull-right a la última columna de la fila para que se vea alineada con las columnas de las otras filas.
Ajustar a mano los porcentajes para que Safari no cometa el error al redondear su valor (obviamente esta solución es mucho más difícil que la anterior).

1.7.7. Elementos modales, barras de navegación y teclados virtuales

Los dispositivos Android y iOS tienen un soporte bastante limitado para la propiedad overflow: hidden aplicada sobre el elemento <body>. Así que si haces scroll por arriba o por debajo del elemento modal, verás que el resto de contenidos del <body> también hacen scroll.

Por otra parte, si utilizas elementos <input> en tu elemento modal, los dispositivos iOS tienen un error que impide actualizar la posición de esos elementos cuando se muestra el teclado virtual. Como soluciones puedes aplicar el estilo position: absolute a esos elementos o puedes programar un evento para corregir la posición del elemento a mano cuando se muestre el teclado. En cualquier caso, Bootstrap no hace nada por solucionar estos errores y por tanto, es tu responsabilidad elegir la mejor solución.

Por último, la propiedad .dropdown-backdrop no se utiliza en el elemento <nav> en iOS debido a la complejidad para superponer correctamente las capas. Por tanto, para cerrar los elementos desplegables en las barras de navegación es necesario pinchar directamente en el elemento desplegable.

1.7.8. Los problemas con el zoom del navegador

Cuando haces zoom en una página, es normal que se produzcan pequeños fallos en algunos componentes, tanto en Bootstrap como en cualquier otra librería o framework CSS. En principio no es posible corregir ninguno de estos errores, ya que depende más de los propios navegadores de los dispositivos.

1.7.9. Los estilos para impresora

El soporte para imprimir páginas es bastante mejorable incluso en los navegadores más modernos. Google Chrome por ejemplo ignora los márgenes y utiliza su propio viewport al imprimir las páginas. Esto puede hacer que se active la rejilla ultra-pequeña de Bootstrap al imprimir una página. Para evitar estos problemas:

Haz que tu página se vea bien con la rejilla ultra-pequeña.
Modifica el valor de las variables @screen-* de Less para que el papel de tu impresora se considere más grande que el tamaño ultra-pequeño.
Añade media queries propias para modificar los puntos de ruptura de la rejilla solamente para el medioprint.

1.7.10. El navegador por defecto de Android

EL navegador por defecto de Android 4.1 y de algunas versiones más recientes es diferente a Google Chrome. Lamentablemente, este navegador por defecto está lleno de errores y de inconsistencias en el tratamiento de CSS.

Uno de los errores más graves es que Android no muestra los controles laterales cuando un elemento<select> utiliza la propiedad border-radius o border. Para evitarlo puedes utilizar el siguiente código que muestra los elementos <select> sin estilo cuando la página se ve en un dispositivo Android:

<script>
var nua = navigator.userAgent;
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1);
if (isAndroid) {
  $('select.form-control').removeClass('form-control').css('width', '100%');
}
</script>

Third party support

Bootstrap no soporta oficialmente ningún plugin o añadido desarrollado por terceros, pero sí que podemos ofrecerte algunos consejos para evitar problemas en tus proyectos

1.7.11. El modelo de cajas

Algunas aplicaciones desarrolladas por terceros, como por ejemplo Google Maps o Google Custom Search Engine, no funcionan bien con Bootstrap debido al conflicto que produce la regla * { box-sizing: border-box; }, que se utiliza para evitar que el padding se tenga en cuenta al calcular el tamaño de un elemento.

Dependiendo de tu proyecto, la solución puede consistir en redefinir esta propiedad para un elemento (opción 1) o para toda una región (opción 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Opción 1A: redefinir el modelo de cajas de un elemento mediante CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Opción 1B: redefinir el modelo de cajas de un elemento mediante los mixin de Bootstrap */
.element {
  .box-sizing(content-box);
}

/* Opción 2A: resetear el modelo de cajas de una región entera mediante CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Opción 2B: resetear el modelo de cajas de una región entera mediante los mixin de Bootstrap */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

gdfggdgdfg

Capítulo 2. Diseñando con rejilla

2.1. Preparando la página

Antes de comenzar a diseñar el layout o estructura de contenidos de las páginas, es necesario realizar algunos preparativos importantes.

2.1.1. Se requiere el doctype de HTML5

Bootstrap utiliza algunos elementos HTML y algunas propiedades CSS que requieren el uso del doctype de HTML5. No olvides incluir este doctype en todas tus páginas con el siguiente código:

<!DOCTYPE html>
<html lang="es">
  ...
</html>

2.1.2. El móvil es lo más importante

Bootstrap 2 incluía algunas utilidades para hacer que las páginas se adaptaran a los dispositivos móviles. Bootstrap 3 se ha creado desde cero pensando en los móviles. Así que en vez de incluir algunos estilos opcionales para móviles, todo eso ya está incluido en el propio Bootstrap. Por eso nos gusta decir que para Bootstrap 3, los dispositivos móviles son lo más importante.

Para que las páginas se muestren correctamente y el zoom funcione bien en los dispositivos móviles, es importante que añadas la siguiente etiqueta dentro de la cabecera <head> de las páginas:

<meta name="viewport" content="width=device-width, initial-scale=1">

Si quieres deshabilitar el zoom en tus páginas, añade la propiedad user-scalable=no a la etiqueta anterior:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Al añadir la propiedad user-scalable=no, los usuarios ya no podrán hacer zoom en la página y solamente podrán hacer scroll en sus contenidos. El resultado es que el comportamiento de la página se parece más al de una aplicación móvil nativa. En cualquier caso, limitar las libertades de los usuarios puede ser contraproducente y por tanto, no te recomendamos que utilices esta opción en todos tus sitios.

2.1.3. Imágenes responsive

Bootstrap 3 ya no adapta el tamaño de las imágenes automáticamente como sucedía en Bootstrap 2. Para mantener el mismo comportamiento de antes, debes añadir la clase .img-responsive a cada imagen que quieras que se comporte de manera responsive. Esta clase incluye las propiedades max-width: 100%; y height: auto; para que la imagen escale en función del tamaño del elemento en el que se encuentra.

<img src="..." class="img-responsive" alt="Imagen responsive">

2.1.4. Tipografía y enlaces

Bootstrap establece una serie de estilos por defecto para la tipografía de todos los elementos y para los enlaces de la página. En concreto:

Se establece a blanco el color de fondo del body con la propiedad background-color: white;
Se utiliza el valor de las variables @font-family-base, @font-size-base y @line-height-base definidas por LESS como atributos de las propiedades tipográficas de los elementos.
Se establece el color de los enlaces al valor de la variable @link-color de LESS y sólo se muestran los enlaces subrayados en el estado :hover

Esta primera inicialización de estilos se define en el archivo scaffolding.less.

2.1.5. Normalización de estilos

Para homogeneizar los estilos iniciales en los diferentes navegadores, Bootstrap utiliza la hoja de estilos Normalize, que es un proyecto creado por Nicolas Gallagher y Jonathan Neal.

2.1.6. Centrando los contenidos de la página

Si quieres centrar una página respecto a la ventana del navegador, encierra sus contenidos dentro de un elemento y aplícale la clase .container:

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

La anchura del contenedor varía en cada punto de ruptura del diseño para adaptarse a la rejilla. Los contenedores no se pueden anidar debido a la propiedad padding y a su anchura fija.

2.2. Tipos de rejillas

Bootstrap incluye una rejila o retícula fluída pensada para móviles y que cumple con el diseño web responsive. Esta retícula crece hasta 12 columnas a medida que crece el tamaño de la pantalla del dispositivo. Bootstrap incluye clases CSS para utilizar la rejilla directamente en tus diseños y también define mixins de LESS para que puedas crear diseños más semánticos.

2.2.1. Introducción

El diseño de páginas basado en rejilla se realiza mediante filas y columnas donde se colocan los contenidos. Así funciona la rejilla de Bootstrap:

Las filas siempre se definen dentro de un contenedor de tipo .container (anchura fija) o de tipo.container-fluid (anchura variable). De esta forma las filas se alinean bien y muestran el padding correcto.
Las filas se utilizan para agrupar horizontalmente a varias columnas.
El contenido siempre se coloca dentro de las columnas, ya que las filas sólo deberían contener como hijos elementos de tipo columna.
Bootstrap define muchas clases CSS (como por ejemplo .row y .col-xs-4) para crear rejillas rápidamente. También existen mixins de Less para crear diseños más semánticos.
La separación entre columnas se realiza aplicando padding. Para contrarrestar sus efectos en la primera y última columnas, las fileas (elementos .row) aplican márgenes negativos.
Las columnas de la rejilla definen su anchura especificando cuántas de las 12 columnas de la fila ocupan. Si por ejemplo quieres dividir una fila en tres columnas iguales, utilizarías la clase .col-xs-4 (el4 indica que cada columna ocupa 4 de las 12 columnas en las que se divide cada fila).

NOTA Si quieres crear un diseño totalmente fluido que ocupe toda la anchura del navegador, deberías encerrar las rejillas dentro de un elemento al que apliques los estilos padding: 0 15px;. De esta forma se pueden neutralizar los márgenes margin: 0 -15px; que se aplican a los elementos .row.

2.2.2. Media queries

Bootstrap utiliza las siguientes media queries para establecer los diferentes puntos de ruptura en los que la rejilla se transforma para adaptarse a cada dispositivo.

/* Dispositivos muy pequeños (teléfonos de hasta 768px de anchura) */
/* No se define ninguna media query porque este es el estilo por
   defecto utilizado por Bootstrap 3 */

/* Dispositivos pequeños (tablets, anchura mayor o igual a 768px) */
@media (min-width: @screen-sm-min) { ... }

/* Dispositivos medianos (ordenadores, anchura mayor o igual a 992px) */
@media (min-width: @screen-md-min) { ... }

/* Dispositivos grandes (ordenadores, anchura mayor o igual a 1200px) */
@media (min-width: @screen-lg-min) { ... }

En ocasiones, también se utilizan las siguientes media queries que definen la propiedad max-width y permiten restringir los dispositivos a los que se aplican los estilos CSS:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

2.2.3. Características de cada rejilla

La siguiente tabla muestra las características de la rejilla de Bootstrap en los diferentes tipos de dispositivos.

	Dispositivos muy pequeñosTeléfonos (<768px)	Dispositivos pequeñosTablets (≥768px)	Dispositivos medianosOrdenadores (≥992px)	Dispositivos grandesOrdenadores (≥1200px)
Comportamiento	Las columnas se muestran siempre horizontalmente.	Si se estrecha el navegador, las columnas se muestran verticalmente. A medida que aumenta su anchura, la rejilla muestra su aspecto horizontal normal.
Anchura máxima del contenedor	Ninguna (`auto`)	`728px`	`940px`	`1170px`
Prefijo de las clases CSS	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Número de columnas	12
Anchura máxima de columna	`auto`	`60px`	`78px`	`95px`
Separación entre columnas	`30px` (`15px` a cada lado de la columna)
¿Permite anidación?	Si
¿Permite desplazar columnas?	No	Si
¿Permite reordenación de columnas?	No	Si

2.2.4. Ejemplo de rejilla creada con Bootstrap

El siguiente ejemplo muestra cómo crear una rejilla con las clases .col-md-*. En los dispositivos móviles (extra pequeño o pequeño) esta rejilla se muestra verticalmente, pero en un ordenador (medio o grande) se ve horizontalmente.

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Ver este ejemplo en una nueva página

2.2.5. Ejemplo de contenedor de anchura variable

Si quieres transformar una rejilla de anchura fija en una rejilla de anchura variable que ocupa toda la anchura del navegador, reemplaza la clase CSS .container por .container-fluid en el elemento que encierra a todos los demás elementos de la rejilla:

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

2.2.6. Ejemplo de rejilla para móviles y ordenadores

Si no quieres que las columnas de la rejilla se muestren verticalmente en los dispositivos pequeños, utiliza a la vez las clases .col-xs-* y .col-md-*, tal y como muestra el siguiente ejemplo.

<!-- En los móviles las columnas se muestran verticalmente porque
     una de ellas ocupa toda la anchura del dispositivo y la otra
     columna ocupa la mitad -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- En un móvil las columnas ocupan la mitad del dispositivo y en un 
     ordenador ocupan la tercera parte de la anchura disponible -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Las columnas ocupan siempre la mitad de la pantalla, tanto en un
     móvil como en un ordenador de escritorio -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Ver este ejemplo en una nueva página

2.2.7. Ejemplo de rejilla para móviles, tablets y ordenadores

A partir del ejemplo anterior, puedes hacer que el layout sea todavía más dinámico añadiendo las clases.col-sm-* pensadas para tablets:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>

  <!-- Código opcional para limpiar las columnas XS en caso de que el
       contenido de todas las columnas no coincida en altura -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Ver este ejemplo en una nueva página

3.1. Titulares

Bootstrap 3 define estilos por defecto para todos los niveles de titulares de las páginas, desde <h1> hasta<h6>. Ejemplo:

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Así se ve este ejemplo en tu navegador:

A continuación se muestra una imagen del aspecto que debería tener este ejemplo, para que puedas comparar los dos:

Figura 3.1 Titulares por defecto en Bootstrap 3

Bootstrap también define estilos especiales para los elementos <small> incluidos dentro de un titular y utilizados habitualmente para mostrar información secundaria. Ejemplo:

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 3.2 Titulares con elementos secundarios en Bootstrap 3

3.2. Texto

El tamaño de letra (font-size) por defecto de Bootstrap 3 es 14px y el interlineado (line-height) es 1.428. Estos valores se aplican tanto al <body> como a todos los párrafos. Estos últimos también incluyen un margen inferior cuyo valor es la mitad que su interlineado (10px por defecto).

Ejemplo:

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

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

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

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 3.3 Texto normal en Bootstrap 3

3.2.1. Texto destacado

Para destacar un párrafo sobre los demás, añade la clase .lead. Ejemplo:

<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 3.4 Texto destacado en Bootstrap 3

3.2.2. Variables de LESS

La escala tipográfica de tamaños de letra se basa en dos variables LESS definidas en el archivo variables.less: @font-size-base y @line-height-base.

La primera variable es el tamaño de letra base y la segunda es el interlineado base del texto. Como estos valores se utilizan para calcular los márgenes, rellenos e interlineados de todos los elementos, si modificas sus valores Bootstrap adaptará automáticamente todo el diseño.

4.1. Tablas

4.1.1. Tablas básicas

Añade la clase .table a cualquier elemento <table> para aplicar los estilos básicos de Bootstrap 3 para tablas. El resultado es una tabla con un padding muy sutil y con líneas de separación solamente en las filas.

Puede parecer absurdo tener que añadir la clase .table para que se apliquen los estilos a las tablas, pero ten en cuenta que el elemento <table> se utiliza para muchas otras cosas que no son necesariamente tablas, como por ejemplo calendarios y selectores de fechas.

Ejemplo:

<table class="table">
  ...
</table>

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.1 Tabla básica en Bootstrap 3

4.1.2. Tablas cebreadas

Las tablas cebreadas son aquellas cuyas filas alternan su color de fondo para mejorar la legibilidad de los contenidos. Su aspecto recuerda a la piel de una cebra y de ahí su nombre. En inglés se denominan “striped tables” y por eso en Bootstrap 3 estas tablas se crean añadiendo la clase .table-striped. Ejemplo:

<table class="table table-striped">
  ...
</table>

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.2 Tabla cebreada en Bootstrap 3

ADVERTENCIA Como las tablas cebreadas utilizan el selector :nth-child de CSS, no funcionan en Internet Explorer 8.

4.1.3. Tablas con bordes

Si prefieres utilizar el estilo tradicional de las tablas con los cuatro bordes en todas las celdas y en la propia tabla, añade la clase .table-bordered. Ejemplo:

<table class="table table-bordered">
  ...
</table>

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.3 Tabla con bordes en Bootstrap 3

4.1.4. Tablas dinámicas

Para que los contenidos de la tabla sean todavía más fáciles de entender, añade la clase .table-hover para modificar ligeramente el aspecto de las filas cuando el usuario pasa el ratón por encima de ellas (sólo funciona para las filas dentro de <tbody>).

Ejemplo:

<table class="table table-hover">
  ...
</table>

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.4 Tabla dinámica en Bootstrap 3

4.1.5. Tablas condensadas

Cuando una tabla es muy grande o cuando tienes muchas tablas en una misma página, puede ser interesante mostrar sus contenidos de forma más compacta. Añade la clase .table-condensed a tus tablas y el padding se reducirá a la mitad. Ejemplo:

<table class="table table-condensed">
  ...
</table>

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.5 Tabla condensada en Bootstrap 3

4.1.6. Tablas semánticas

Las clases CSS semánticas explicadas en el capítulo anterior para el texto también se pueden aplicar a las filas y a las celdas de una tabla:

.active, aplica el color del estado hover a la fila o celda para que parezca que está activa.
.success, indica que el resultado de alguna operación ha sido un éxito.
.warning, avisa al usuario que se ha producido alguna circunstancia que puede requerir su atención.
.danger, indica que una acción es negativa o potencialmente peligrosa.

Ejemplo:

<table>
<tbody>
  <!-- Aplicadas en las filas -->
  <tr class="active">...</tr>
  <tr class="success">...</tr>
  <tr class="warning">...</tr>
  <tr class="danger">...</tr>

  <!-- Aplicadas en las celdas (<td> o <th>) -->
  <tr>
    <td class="active">...</td>
    <td class="success">...</td>
    <td class="warning">...</td>
    <td class="danger">...</td>
  </tr>
</tbody>
</table>

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.6 Tabla semántica en Bootstrap 3

4.1.7. Tablas responsive

La solución que propone Bootstrap 3 para crear tablas responsive que se vean bien en dispositivos pequeños consiste en añadir un scroll horizontal a las tablas que sean demasiado anchas. Para ello, encierra cualquier tabla con la clase .table dentro de un elemento con la clase .table-responsive. Cuando las tablas responsive se muestran en dispositivos con una anchura superior a 768px, se ven igual que cualquier otra tabla normal.

Ejemplo:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.7 Tabla responsive en Bootstrap 3

4.2. Imágenes

Bootstrap 3 define varias clases CSS para decorar las imágenes de tus sitios web:

.img-rounded, añade unas pequeñas esquinas redondeadas en todos los lados de la imagen aplicando el estilo border-radius: 6px.
.img-thumbnail, muestra la imagen con un relleno blanco y un borde fino simulando el aspecto de las fotografías de las antiguas cámaras instantáneas. Añade además una breve animación para hacer que la imagen aparezca al cargar la página.
.img-circle, convierte la imagen en un círculo aplicando el estilo border-radius: 50%

ADVERTENCIA El navegador Internet Explorer 8 no soporta el uso de esquinas redondeadas, por lo que los estilos .img-rounded y .img-circle no tienen ningún efecto sobre las imágenes.

Ejemplo:

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.8 Imágenes decoradas en Bootstrap 3

Si estás buscando cómo hacer que las imágenes de Bootstrap 3 se comporten de manera responsive como en Bootstrap 2, consulta la sección de imágenes responsive de los capítulos anteriores.

4.3. Utilidades

4.3.1. Icono para cerrar

Bootstrap 3 define la clase .close para mostrar la entidad HTML × como si fuera la típica X asociada con el cierre de una ventana o aplicación. Utilízalo para mostrar el icono de cerrar en las ventanas modales o en las alertas sin tener que utilizar una imagen.

Ejemplo:

<button type="button" class="close" aria-hidden="true">&times;</button>

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 4.9 Icono de cierre en Bootstrap 3

4.3.2. Elementos flotantes

Flotar un elemento a la derecha o a la izquierda es muy habitual en la mayoría de diseños web. Por eso Bootstrap 3 define dos clases CSS genéricas llamadas .pull-left y .pull-right que puedes aplicar sobre cualquier elemento:

Ejemplo:

<div class="pull-left">...</div>
<div class="pull-right">...</div>

Este es el código CSS aplicado a cada clase (la palabra reservada !important se utiliza para evitar posibles problemas con la especificidad de los selectores):

.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

Bootstrap 3 también define mixins para que puedas utilizar estos estilos en tus archivos LESS:

.elemento {
  .pull-left();
}
.otro-elemento {
  .pull-right();
}

No utilices estas clases para alinear los componentes de las barras de navegación .navbar. Utiliza en su lugar las dos clases equivalentes .navbar-left y .navbar-right.

4.3.3. Elementos centrados

Aplica la clase especial center-block para centrar horizontalmente cualquier elemento (el elemento centrado se convierte en un elemento de bloque):

Ejemplo:

<div class="center-block">...</div>

Este es el código CSS aplicado a esta clase:

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Bootstrap 3 también define un mixin para que puedas utilizar estos estilos en tus archivos LESS:

.elemento {
  .center-block();
}

4.3.4. Limpiando floats

Cuando un diseño utiliza muchos elementos flotantes, es común tener que limpiar un elemento para que no le afecten otros elementos flotantes. Bootstrap 3 utiliza para ello el famoso hack clearfix creado originalmente por Nicolas Gallagher.

Ejemplo:

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

Este es el código CSS aplicado a esta clase:

.clearfix:before,
.clearfix:after {
  display: table;
  content: " "
}
.clearfix:after {
  clear: both;
}

Bootstrap 3 también define un mixin para que puedas utilizar estos estilos en tus archivos LESS:

.elemento {
  .clearfix();
}

4.3.5. Ocultando y mostrando elementos

Otras de las utilidades incluidas por Bootstrap 3 son las clases .show y .hide, que muestran y ocultan cualquier elemento.

Ejemplo:

<div class="show">...</div>
<div class="hide">...</div>

Este es el código CSS aplicado a estas clases (de nuevo se utiliza !important para evitar problemas con los selectores):

.show {
  display: block !important;
}
.hide {
  display: none !important;
}

Bootstrap 3 también define dos mixins para que puedas utilizar estos estilos en tus archivos LESS:

.elemento {
  .show();
}
.otro-elemento {
  .hide();
}

Cuando se diseña un sitio web accesible, es común añadir ayudas en forma de texto que no se ve por pantalla, pero sí que se lee en los lectores que utilizan para navegar las personas discapacitadas.

Bootstrap 3 define la clase .sr-only para marcar un contenido como oculto y que sólo esté disponible para los lectores (“screen readers” en inglés, de ahí el nombre de la clase CSS). Ejemplo:

<a class="sr-only" href="#contenido">Ir al contenido</a>

Este es el código CSS aplicado a esta clase:

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

Bootstrap 3 también define un mixin para que puedas utilizar estos estilos en tus archivos LESS:

.saltar-navegacion {
  .sr-only();
}

4.3.7. Reemplazando texto por imágenes

Una de las técnicas más habituales para mostrar el logotipo de los sitios web consiste en ocultar el texto de un elemento <h1> para que se vea la imagen de fondo que contiene el logotipo. Esta técnica es tan habitual que Bootstrap 3 define la clase .text-hide para que puedas aplicarla a cualquier elemento. Ejemplo:

<h1 class="text-hide">Nombre de la empresa</h1>

Este es el código CSS aplicado a esta clase:

.text-hide {
  background-color: transparent;
  border: 0;
  color: transparent;
  font: 0/0 a;
  text-shadow: none;
}

Bootstrap 3 también define un mixin para que puedas utilizar estos estilos en tus archivos LESS:

.logotipo {
  .text-hide();
}

4.3.8. Utilidades responsive

Las utilidades responsive permite diseñar más rápidamente sitios web móviles, ya que muestran u ocultan elementos en función del tipo de dispositivo que utiliza el usuario para navegar. También se incluyen clases para mostrar/ocultar elementos al imprimir la página.

Estas clases deben utilizarse con moderación y siempre para mejorar el aspecto de los contenidos en cada tipo de dispositivo. Además, sólo funcionan para los elementos de bloque y las tablas, por lo que no podrás aplicarlos a los elementos en línea.

Utiliza alguna de estas clases o combina varias entre sí para definir cómo se ven tus contenidos en cada tipo de dispositivo (teléfono = menos de 768px; tablet = más de 768px; ordenador = más de 992px; ordenador grande = más de 1200px):

Clase	Teléfonos	Tablets	Ordenador	Ordenador grande
`.visible-xs`	Visible	Oculto	Oculto	Oculto
`.visible-sm`	Oculto	Visible	Oculto	Oculto
`.visible-md`	Oculto	Oculto	Visible	Oculto
`.visible-lg`	Oculto	Oculto	Oculto	Visible
`.hidden-xs`	Oculto	Visible	Visible	Visible
`.hidden-sm`	Visible	Oculto	Visible	Visible
`.hidden-md`	Visible	Visible	Oculto	Visible
`.hidden-lg`	Visible	Visible	Visible	Oculto

Igualmente, puedes utilizar estas clases para definir qué contenidos se muestran al imprimir la página:

Clase	Navegador	Impresora
`.visible-print`	Oculto	Visible
`.hidden-print`	Visible	Oculto

A continuación se muestra un ejemplo que utiliza todas estas clases. Prueba a redimensionar la ventana del navegador o accede a esta página con diferentes dispositivos para ver las diferencias:

Ver ejemplo en una página completa

6.1. Iconos (glyphicons)

Bootstrap incluye 180 iconos creados mediante una fuente especial llamada Glyphicon Halflings. Aunque esta fuente normalmente no es gratuita, su creador permite utilizar estos iconos gratuitamente dentro de Bootstrap 3. Lo único que te pedimos es que, si es posible, incluyas en tu sitio un enlace al proyectoGlyphicons.

6.1.1. Listado completo de los iconos disponibles

A continuación se muestran todos los iconos de Bootstrap 3 y las clases CSS necesarias para utilizar cada uop: (buscatelos majete)

6.2. Menús desplegables

Este componente permite mostrar una lista de enlaces como si fuera un menú desplegable con la lista de acciones que el usuario puede realizar. Para que funcionen sus características interactivas, es necesario utilizar también el plugin dropdown de JavaScript. Ejemplo:

<div class="dropdown">
  <button class="btn dropdown-toggle sr-only" type="button"
          id="dropdownMenu1" data-toggle="dropdown">
    Menú desplegable
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">Acción</a>
    </li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">Otra acción</a>
    </li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">Otra acción más</a>
    </li>
    <li role="presentation" class="divider"></li>
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">Acción separada</a>
    </li>
  </ul>
</div>

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.2 Menú desplegable en Bootstrap 3

Como se muestra en el ejemplo anterior, es necesario utilizar la clase .dropdown para encerrar tanto el menú como el elemento que lo activa (en este caso, el botón cuyo id es #dropdownMenu1). También es posible utilizar tu propia clase CSS, siempre que ese elemento aplique el estilo position: relative;.

6.2.1. Opciones de alineación

Añade la clase .pull-right a la lista .dropdown-menu que define el menú para alinear sus contenidos a la derecha.

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

6.2.2. Títulos de sección

Los menús desplegables también pueden contener elementos con la clase .dropdown-header para definir el título de un grupo de enlaces. Ejemplo:

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  <li role="presentation" class="dropdown-header">Título de sección #1</li>
  ...
  <li role="presentation" class="divider"></li>
  <li role="presentation" class="dropdown-header">Título de sección #2</li>
  ...
</ul>

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.3 Menú desplegable con títulos de sección en Bootstrap 3

6.2.3. Deshabilitando elementos del menú

Si se añade la clase .disabled al elemento <li> de un enlace del menú, este se muestra deshabilitado, por lo que el usuario puede ver que esa acción existe, pero que no es posible utilizarla en ese momento. Ejemplo:

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  <li role="presentation">
    <a role="menuitem" tabindex="-1" href="#">Enlace normal</a>
  </li>
  <li role="presentation" class="disabled">
    <a role="menuitem" tabindex="-1" href="#">Enlace deshabilitado</a>
  </li>
  <li role="presentation">
    <a role="menuitem" tabindex="-1" href="#">Otro enlace normal</a>
  </li>
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.4 Menú desplegable con enlaces deshabilitados en Bootstrap 3

5.1. Formulario básico

Bootstrap 3 aplica por defecto algunos estilos a todos los componentes de los formularios. Si además añades la clase .form-control a los elementos <input>, <textarea> y <select>, su anchura se establece awidth: 100%. Para optimizar el espaciado, utiliza la clase .form-group para encerrar cada campo de formulario con su <label>.

Ejemplo:

<form role="form">
  <div class="form-group">
    <label for="ejemplo_email_1">Email</label>
    <input type="email" class="form-control" id="ejemplo_email_1"
           placeholder="Introduce tu email">
  </div>
  <div class="form-group">
    <label for="ejemplo_password_1">Contraseña</label>
    <input type="password" class="form-control" id="ejemplo_password_1" 
           placeholder="Contraseña">
  </div>
  <div class="form-group">
    <label for="ejemplo_archivo_1">Adjuntar un archivo</label>
    <input type="file" id="ejemplo_archivo_1">
    <p class="help-block">Ejemplo de texto de ayuda.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Activa esta casilla
    </label>
  </div>
  <button type="submit" class="btn btn-default">Enviar</button>
</form>

Y esta es la imagen del aspecto que debería tener este ejemplo:

Bootstrap

Source code

Sass

Bootstrap CDN

Install with Bower

1.2. Contenidos de Bootstrap

1.2.1. Contenidos de la versión compilada de Bootstrap

1.2.2. Contenidos de la versión original de Bootstrap

1.3. La primera plantilla Bootstrap

1.3.1. Ejemplos de plantillas creadas con Bootstrap

1.4. La comunidad Bootstrap

1.5. Desactivando el diseño responsive

1.5.1. Cómo desactivar el diseño responsive de Bootstrap

1.6. Actualización de Bootstrap 2.X a 3.0

1.6.1. Principales cambios en las clases CSS

1.6.2. Nuevos elementos

1.6.3. Elementos eliminados

1.6.4. Otros cambios importantes

1.7. Compatibilidad con los navegadores

1.7.1. Navegadores soportados

1.7.2. Internet Explorer 8 y 9

1.7.3. Internet Explorer 8 y Respond.js

1.7.3.1. Respond.js y el CSS alojado en otro dominio

1.7.3.2. Respond.js y file://

1.7.3.3. Respond.js y @import

1.7.3.4. Internet Explorer 8 y el modelo de cajas

1.7.4. Comentarios sobre la compatibilidad con Internet Explorer

1.7.5. Windows Phone 8 y Internet Explorer 10

1.7.6. Errores de redondeo de Safari

1.7.7. Elementos modales, barras de navegación y teclados virtuales

1.7.8. Los problemas con el zoom del navegador

1.7.9. Los estilos para impresora

1.7.10. El navegador por defecto de Android

1.7.11. El modelo de cajas

Capítulo 2. Diseñando con rejilla

2.1. Preparando la página

2.1.1. Se requiere el doctype de HTML5

2.1.2. El móvil es lo más importante

2.1.3. Imágenes responsive

2.1.4. Tipografía y enlaces

2.1.5. Normalización de estilos

2.1.6. Centrando los contenidos de la página

2.2. Tipos de rejillas

2.2.1. Introducción

2.2.2. Media queries

2.2.3. Características de cada rejilla

2.2.4. Ejemplo de rejilla creada con Bootstrap

2.2.5. Ejemplo de contenedor de anchura variable

2.2.6. Ejemplo de rejilla para móviles y ordenadores

2.2.7. Ejemplo de rejilla para móviles, tablets y ordenadores

3.1. Titulares

3.2. Texto

3.2.1. Texto destacado

3.2.2. Variables de LESS

4.1. Tablas

4.1.1. Tablas básicas

4.1.2. Tablas cebreadas

4.1.3. Tablas con bordes

4.1.4. Tablas dinámicas

4.1.5. Tablas condensadas

4.1.6. Tablas semánticas

4.1.7. Tablas responsive

4.2. Imágenes

4.3. Utilidades

4.3.1. Icono para cerrar

4.3.2. Elementos flotantes

4.3.3. Elementos centrados

4.3.4. Limpiando floats

4.3.5. Ocultando y mostrando elementos

4.3.6. Contenidos ocultos

4.3.7. Reemplazando texto por imágenes

4.3.8. Utilidades responsive

6.1. Iconos (glyphicons)

6.1.1. Listado completo de los iconos disponibles

6.2. Menús desplegables

6.2.1. Opciones de alineación

6.2.2. Títulos de sección

6.2.3. Deshabilitando elementos del menú

5.1. Formulario básico

1.7.3.2. Respond.js y `file://`

1.7.3.3. Respond.js y `@import`