Bootstrap es el framework creado por los desarrolladores de Twitter que permite crear interfaces web con CSS y Javascript que adaptan la interfaz dependiendo del tamaño del dispositivo en el que se visualice de forma nativa, es decir, automáticamente se adapta al tamaño de un ordenador o de una Tablet.

Primeros pasos

Descargando Bootstrap

Existen varias formas diferentes de empezar con Bootstrap, cada una orientada a un tipo de público en función de sus conocimientos.

  1. Descargar el código CSS y JavaScript compilado, que es la forma más sencilla de empezar a utilizar Bootstrap. La desventaja es que esta versión no incluye ni los archivos originales ni la documentación. Para descargar esta versión, accede a getbootstrap.com y pulsa el botón Download Bootstrap.
  2. Descargar el código fuente, contiene todos los archivos Less, y JavaScript originales de Bootstrap. La desventaja es que requiere un compilador de archivos Less y cierto trabajo de configuración. Descarga la versión más reciente en el sitio github.com/twbs/bootstrap/releases.
  3. Descargar el código fuente en formato Sass, se trata de una variante de la versión anterior y que se ha creado para facilitar la integración de Bootstrap en las aplicaciones Ruby On Rails, Compass o cualquier otro proyecto basado en Sass. Descarga la versión más reciente en el sitio github.com/twbs/bootstrap-sass/releases.

Contenidos de Bootstrap

Como ya he dicho Bootstrap se puede descargar de dos maneras, compilado o mediante el código fiente original. Según cual hayas elegido, verás una estructura de directorios u otra.

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.

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 direcotrio docs/ incluye el código fuente de la documentación de Bootstrap y un directorio llamado examples/ con varios ejemplos de uso.

Incluyendo Bootstrap en tu página

Lo primero que tienes que hacer es incluir las llamadas a los archivos CSS y JavaScript.


Advertencia Todos los plugins JavaScript de Bootstrap requieren la librería jQuery para funcionar, por lo que deberás incluirlo en tus plantillas


<!DOCTYPE html>
<html lang=»es»>
<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 y otros JavaScript que uses –>
<script src=»js/bootstrap.min.js»></script>
</body>
</html>

Diseñando con rejilla

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.

Se requiere el doctype de HTML5

Bootstrap utiliza algunos elementos HTML y algunas propiedades CSS que requieren el uso del doctype.

<!DOCTYPE html>
<html lang=»es»>
  …
</html>

 

El móvil es lo más importante

Bootstrap 3 se ha creado pensando en la visualización en dispositivos móviles por ello, 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,  ya no se podrá hacer zoom en la página y solamente podrás 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 recomiendo que utilices esta opción en todos tus sitios, hazlo solo cuando sea indispensable.

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

 

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.

Normalización de estilos

Para homogeneizar los estilos iniciales en los diferentes navegadores, Bootstrap utiliza la hoja de estilos Normalize.

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.

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.

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 filas (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 (el 4 indica que cada columna ocupa 4 de las 12 columnas en las que se divide cada fila).

 

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) { … }

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ños Teléfonos (<768px) Dispositivos pequeños Tablets (≥768px) Dispositivos medianos Ordenadores (≥992px) Dispositivos grandes Ordenadores (≥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

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>

En un ordenador se vería algo así:

col-1-boot

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>

Ejemplo de rejilla para móviles y ordenadores

<!– 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>

Ejemplo de rejilla para móviles, tablets y ordenadores

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

Reseteando columnas

Como las rejillas de Bootstrap tienen cuatro puntos de ruptura en los que las columnas se reordenan, es casi seguro que te vas a encontrar con problemas cuando las columnas tengan diferente altura. Para solucionarlo, utiliza la clase .clearfix combinándola con alguna de las clases auxiliares tipo .visible-xs:

<div class=»row»>
<div class=»col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3</div>
<div class=»col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3</div>

<!– La clase ‘clearfix’ sólo se aplica cuando el dispositivo sea muy pequeño, tal y como indica la clase ‘visible-xs’ –>
<div class=»clearfix visible-xs»></div>

<div class=»col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3</div>
<div class=»col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3</div>
</div>

También es posible que en ocasiones necesites resetear los desplazamientos de las columnas. Las clases que resetean estos valores sólo están disponibles para los dispositivos medianos y grandes, que los desplazamientos sólo funcionan en esos dispositivos.

<div class=»row»>
<div class=»col-sm-5 col-md-6″>.col-sm-5 .col-md-6</div>
<div class=»col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0″>.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class=»row»>
<div class=»col-sm-6 col-md-5 col-lg-6″>.col-sm-6 .col-md-5 .col-lg-6</div>
<div class=»col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0″>.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Desplazando columnas

Añade la clase .col-md-offset-* para desplazar cualquier columna hacia su derecha. Estas clases aumentan el tamaño del margen izquierdo de la columna en una cantidad equivalente a esas * columnas. La clase .col-md-offset-4 por ejemplo desplaza la columna una anchura equivalente a 4 columnas.

<div class=»row»>
<div class=»col-md-4″>.col-md-4</div>
<div class=»col-md-4 col-md-offset-4″>.col-md-4 .col-md-offset-4</div>
</div>

<div class=»row»>
<div class=»col-md-3 col-md-offset-3″>.col-md-3 .col-md-offset-3</div>
<div class=»col-md-3 col-md-offset-3″>.col-md-3 .col-md-offset-3</div>
</div>

<div class=»row»>
<div class=»col-md-6 col-md-offset-3″>.col-md-6 .col-md-offset-3</div>
</div>

Anidando columnas

Bootsrap 3 también permite anidar columnas dentro de otras columnas. Para ello, dentro de una columna con la clase col-md-* crea un nuevo elemento con la clase .row y añade una o más columnas con la clase .col-md-*. Las columnas anidadas siempre tienen que sumar 12 columnas de anchura, tal y como muestra el siguiente ejemplo.

<div class=»row»>
<div class=»col-md-9″>
Nivel 1: .col-md-9
<div class=»row»>
<div class=»col-md-6″>
Nivel 2: .col-md-6
</div>
<div class=»col-md-6″>
Nivel 2: .col-md-6
</div>
</div>
</div>
</div>

Reordenando las columnas

Bootstrap 3 introduce la posibilidad de reordenar las columnas para cambiar su posición, lo que es muy importante para los diseños web responsive. Añade las clases .col-md-push-* y .col-md-pull-* para reordenar las columnas.

<div class=»row»>
<div class=»col-md-9 col-md-push-3″>.col-md-9 .col-md-push-3</div>
<div class=»col-md-3 col-md-pull-9″>.col-md-3 .col-md-pull-9</div>
</div>

Variables y mixins de LESS

Además de las clases CSS listas para definir rejillas rápidamente, Bootstrap incluye variables y mixins de LESS para generar fácilmente tus propios diseños web semánticos.

Variables

Las variables establecen el número de columnas, su separación y la anchura del navegador a partir de la cual las columnas flotan horizontalmente en vez de mostrarse una encima de otra. Los valores por defecto de estas variables son los que se muestran a continuación:

@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;

Mixins

Los mixins, junto con las variables anteriores, permiten crear estilos semánticos para los diferentes elementos de la rejilla.

// Crea un elemento contenedor de varias columnas
.make-row(@gutter: @grid-gutter-width) {
// Limpiar las columnas flotadas
.clearfix();

@media (min-width: @screen-small) {
margin-left:  (@gutter / -2);
margin-right: (@gutter / -2);
}

// Aplicar un margen negativo a la fila para alinear el contenido de las columnas
.row {
margin-left:  (@gutter / -2);
margin-right: (@gutter / -2);
}
}

// Generar las columnas extra pequeñas
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Evitar que las columnas no se vean cuando están vacías
min-height: 1px;
// Utilizar padding para separar las columnas
padding-left:  (@gutter / 2);
padding-right: (@gutter / 2);

// Calcular la anchura en función del número de columnas
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}

// Generar las columnas pequeñas
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Evitar que las columnas no se vean cuando están vacías
min-height: 1px;
// Utilizar padding para separar las columnas
padding-left:  (@gutter / 2);
padding-right: (@gutter / 2);

// Calcular la anchura en función del número de columnas
@media (min-width: @screen-small) {
float: left;
width: percentage((@columns / @grid-columns));
}
}

// Genera las columnas pequeñas
.make-sm-column-offset(@columns) {
@media (min-width: @screen-small) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-small) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-small) {
right: percentage((@columns / @grid-columns));
}
}

// Generar las columnas medianas
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Evitar que las columnas no se vean cuando están vacías
min-height: 1px;
// Utilizar padding para separar las columnas
padding-left:  (@gutter / 2);
padding-right: (@gutter / 2);

// Calcular la anchura en función del número de columnas
@media (min-width: @screen-medium) {
float: left;
width: percentage((@columns / @grid-columns));
}
}

// Generar los desplazamientos de las columnas medianas
.make-md-column-offset(@columns) {
@media (min-width: @screen-medium) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-medium) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-medium) {
right: percentage((@columns / @grid-columns));
}
}

// Generar las columnas grandes
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Evitar que las columnas no se vean cuando están vacías
min-height: 1px;
// Utilizar padding para separar las columnas
padding-left:  (@gutter / 2);
padding-right: (@gutter / 2);

// Calcular la anchura en función del número de columnas
@media (min-width: @screen-large) {
float: left;
width: percentage((@columns / @grid-columns));
}
}

// Generar los desplazamientos de las columnas grandes
.make-lg-column-offset(@columns) {
@media (min-width: @screen-large) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-large) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-large) {
right: percentage((@columns / @grid-columns));
}
}

Utilizando los mixins anteriores y modificando el valor de las variables para ajustarlos a tus necesidades, ya puedes crear diseños web semánticos. Este ejemplo muestra cómo crear un diseño a dos columnas con una separación entre los dos:

.wrapper {
  .make-row();
}
.content-main {
  .make-column(8);
}
.content-secondary {
  .make-column(3);
  .make-column-offset(1);
}

<div class=»wrapper»>
  <div class=»content-main»>…</div>
  <div class=»content-secondary»>…</div>
</div>

 

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 puede que algunos componentes no se vean como deseas.

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

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

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

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.

Windows Phone 8 y Internet Explorer 10

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

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

Como esto no funciona en algunas versiones de Windows Phone 8 deberas implementar 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)
}

 

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

Elementos modales, barras de navegación y teclados virtuales

Los dispositivos Android e iOS tienen deficiencias en el soporte 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.

La propiedad .dropdown-backdrop no se utiliza en el elemento <nav> en iOS debido a la complejidad para superponer correctamente las capas. Por ello, para cerrar los elementos desplegables es necesario pinchar directamente en el elemento desplegable.

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.

 

El navegador por defecto de Android

EL navegador por defecto de Android 4.1 y de algunas versiones más recientes está lleno de errores en el tratamiento del CSS. Uno de los errores más graves es que Android no muestra los controles laterales cuando un elemento <select> utiliza la propiedad border o border-radius. 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 NavAg = navigator.userAgent;
var isAndroid = (NavAg.indexOf(‘Mozilla/5.0’) > -1 && NavAg.indexOf(‘Android ‘) > -1 && NavAg.indexOf(‘AppleWebKit’) > -1 && NavAg.indexOf(‘Chrome’) === -1);
if (isAndroid) {
$(‘select.form-control’).removeClass(‘form-control’).css(‘width’, ‘100%’);
}
</script>

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

El modelo de cajas

Algunas aplicaciones desarrolladas por terceros, como por ejemplo Google Maps, 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 1.1: 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 1.2: redefinir el modelo de cajas de un elemento mediante los mixin de Bootstrap */
.element {
.box-sizing(content-box);
}

/* Opción 2.1: 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 2.2: 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();
}

Accesibilidad

Bootstrap 3 utiliza los estándares web de tal forma que con muy poco esfuerzo se pueden crear sitios web accesibles para personas que utilizan tecnologías de apoyo para navegar.

 

Saltándose el menú de navegación

Si tu menú de navegación tiene muchos elementos y se muestra justo antes del contenido principal, deberías incluir después de la etiqueta <body> un enlace que permita saltarse ese menú.

<body>
<a href=»#principal» class=»sr-only»>Ir al contenido</a>
<div class=»container» id=»principal»>
¡Hola Mundo!
</div>
</body>

Cabeceras anidadas

Otro posible problema con la accesibilidad se produce al anidar elementos <header> para crear cabeceras. Las recomendaciones de accesibilidad indican que el título principal debe ser de tipo <h1>, los siguientes títulos de tipo <h2>, etc. En la práctica no es fácil conseguir siempre esta jerarquía de títulos. Si tu título principal es menor que los 38px que aplica por defecto Bootstrap, deberías modificar tus estilos CSS antes que utilizar unos títulos de menor importancia.

 

Una vez visto todo esto, quiza os interese ver como hacer un tema de WordPress basado en Bootstrap. Espero que os haya sido de ayuda o cuando menos interesante.

Leave a Reply

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies