Introducción a Bootstrap (Parte 1)


Esta es la primera entrada de una serie de 3, dedicada al framework de desarrollo web Bootstrap. En las 3 entradas se trata de dar una introducción a este framework, y las características básicas que nos ofrece.

 

1.- Introducción a Bootstrap

bootstrap

Bootstrap es un framework open-source para el desarrollo de páginas web, creado por Twitter. Está basado en HTML5, CSS3 y Javascript, y actualmente va por su versión 3 de desarrollo. Su página web, en la que puede obtenerse todo tipo de información sobre el mismo, descargarlo, y ver multitud de ejemplos de su uso es:

http://getbootstrap.com/

 

1.1.- Objetivos de Bootstrap

Los objetivos principales de Bootstrap son:

  • Potenciar la consistencia de las páginas web: estilo estandarizado, navegación por el sitio, etc.
  • Incluir utilidades para el diseño web para móviles, y asegurarse que un sitio web se ve bien en cualquier dispositivo que permita navegar por Internet.
  • Ofrecer características comunes necesarias en las páginas web, como validación de formularios, cuadros de diálogo, etc.
  • Ofrecer características de visualización avanzadas, como pestañas, acordeones, etc.

 

1.2.- Características de Bootstrap

Los características principales de Bootstrap son:

  • Está construido usando Less, que después se convierte a CSS. Pero para usarlo no es necesario, ni mucho menos, conocer Less.
  • Ofrece muchas ventajas:
    • Hace sencillo construir la disposición (layout) de las páginas sin utilizar tablas.
    • Simplifica el CSS personalizado, ya que solo suele ser necesario añadir clases al HTML y un poco de estructura.
    • Amplio soporte para temas, con una gran comunidad detrás.
  • Existen herramientas que hacen el desarrollo con Bootstrap más fácil. En mi caso, suelo utilizar Atom, con algunos complementos que añaden autocompletado de las clases y “snippets” (que crean estructuras complejas de forma automática).

 

2.- Descarga y utilización de Bootstrap

En los siguientes apartados vamos a ver como preparar un entorno de desarrollo sencillo, obtener los requisitos de Bootstrap, descargar Bootstrap, y preparar nuestra página web para su utilización.

 

2.1.- Preparación de un entorno de desarrollo

Este siempre es un punto delicado, puesto que cada persona prefiere un editor u otro. Para desarrollar páginas o aplicaciones en HTML, CSS y Javascript existen muchísimas opciones, algunas más avanzadas que otras.

En mi caso, últimamente estoy utilizando Atom como IDE para este tipo de desarrollos, ya que su estilo y su uso es muy similar a otros editores que he utilizado anteriormente (como Textmate o Sublime), y gracias a la comunidad que tiene detrás, dispone de gran cantidad de complementos que resultan muy útiles para facilitar el desarrollo.

Atom es open-source, y se puede descargar desde su sitio web:

https://atom.io/

Una vez descargado e instalado Atom, os recomiendo entrar a “Preferences”, seleccionar “Packages”, y buscar e instalar el paquete “atom-bootstrap3“. Este paquete ofrece una gran cantidad de funciones de autocompletado, y de “snippets” que generan el código necesario para gran cantidad de las clases y funcionalidades de Bootstrap.

 

2.2.- Requisitos de Bootstrap (jQuery)

Para utilizar las características básicas de Bootstrap, como puede ser sacar partido al diseño adaptable, no es necesario utilizar ningún requisito especial. Pero para hacer uso de otras muchas características y componentes de Bootstrap (barra de navegación, componentes de visualización avanzada, etc), Bootstrap hace uso de Javascript, y es necesario utilizar jQuery como requisito para su funcionamiento.

Por lo tanto, normalmente será necesario hacer referencia a jQuery en nuestra página que utilice Bootstrap. Este se puede obtener de su web:

https://jquery.com/

jQuery permite descargar diferentes versiones del mismo. Para utilizar Bootstrap versión 3 es necesario jQuery versión 2 (por lo tanto, no hacer uso de la versión 1 original). En nuestro caso, como no vamos a modificar ningún comportamiento por defecto, podemos bajar directamente la versión comprimida de jQuery. Este fichero lo podemos guardar en la carpeta “js” de nuestra web.

Únicamente tendremos que hacer referencia al fichero “jquery.min.js” al final del cuerpo de la página, pero siempre antes de la referencia al propio Javascript de Bootstrap:

<script type="text/javascript" src="./js/jquery.min.js"></script>

 

2.3.- Descargar Bootstrap

Bootstrap se puede descargar desde su sitio web, como se ha comentado anteriormente. En su sección de descargas ofrecen varios métodos para obtenerlo, así como enlaces para referenciarlo directamente desde su CDN. En cualquier caso, podemos descargar la versión completa de Bootstrap (esta página también da acceso a descargar directamente el código fuente y la versión Saas de Bootstrap).

El fichero ZIP de la versión completa de Bootstrap incluye gran cantidad de contenidos, distribuidos en 3 carpetas:

  • css: contiene los ficheros de hojas de estilo (CSS) de Bootstrap.
  • fonts: contiene los ficheros para el uso de los iconos (Gyphicons).
  • js: contiene los ficheros de Javascript de Bootstrap.

Básicamente, se trata de descomprimir este fichero ZIP, y copiar estas carpetas a nuestra web. No haremos uso de la mayoría de los ficheros que incluyen estas carpetas, por lo que si se prefiere no copiar todo el contenido, únicamente necesitaremos:

  • la carpeta “fonts” al completo.
  • el fichero “bootstrap.min.css” dentro de la carpeta “css”.
  • el fichero “bootstrap.min.js” dentro de la carpeta “js”.

 

2.4.- Utilizar Bootstrap

Al igual que con jQuery, solo necesitamos hacer referencia desde nuestro código HTML a los ficheros CSS y Javascript de Bootstrap para poder utilizarlo en nuestra página.

Versiones de Bootstrap

La descarga de Bootstrap incluye 2 bloques de ficheros diferenciados:

  • bootstrap.X: son los ficheros de Bootstrap versión 3, y por lo tanto, son los ficheros que utilizaremos.
  • bootstrap-theme.X: son los ficheros de Bootstrap versión 2. Estos los podemos borrar, ya que no haremos uso de ellos.

Estilos (CSS)

Boostrap nos ofrece la versión completa de su hoja de estilos (bootstrap.css) y la versión comprimida (bootstrap.min.css). Vamos a utilizar la versión comprimida, ya que ocupa menos y está preparada para hacer la descarga del fichero más rápida para los usuarios. Si en algún momento necesitamos personalizar alguna clase, o crear una nueva, haremos uso de un fichero CSS propio para ello.

Por lo tanto, simplemente es necesario referenciar al fichero “bootstrap.min.css” desde la cabecera de nuestra página HTML:

<link rel='stylesheet' href='/styles/bootstrap.min.css' />

Javascript

En el caso del Javascript de Bootstrap, no hay 2 versiones disponibles en la descarga (una para Bootstrap 2 y otra para el 3), aunque sí ofrece la versión normal (bootstrap.js) y la versión comprimida (bootstrap.min.js). Al igual que con la hoja de estilos, utilizaremos la versión comprimida.

Por lo tanto, simplemente es necesario referenciar al fichero “bootstrap.min.js” al final del cuerpo de nuestra página HTML, asegurándonos de hacerlo tras la referencia a jQuery:

 <script type="text/javascript" src="./js/bootstrap.min.js"></script>

 

2.5.- Recapitulando (1)

Resumiendo lo visto hasta ahora, tenemos una estructura de carpetas y ficheros preparados, que sería similar a la siguiente:

css/
  bootstrap.min.css
fonts/
  glyphicons-xxx.xxx
index.html
js/
  bootstrap.min.js
  jquery.min.css

Y nuestro fichero HTML tiene ya las referencias a jQuery y Bootstrap preparadas:

<!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></title>
  <!-- Bootstrap -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[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>
  <!-- jQuery -->
  <script src="./js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="./js/bootstrap.min.js"></script>
 </body>
</html>

 

3.- Temas de Bootstrap

Hay una gran comunidad alrededor de Bootstrap, por lo que mucha gente ha desarrollado temas en CSS y Javascript basados en Bootstrap, pero con nuevos componentes, los mismos componentes personalizados, etc.

Muchos de estos temas son de una gran calidad, y están disponibles en muchos sitios web, algunos de ellos dedicados exclusivamente a facilitar la descarga de estos temas. Algunos de estos temas son igualmente open-source, mientras que otros son de pago, o permiten su uso mediante subscripción.

El tema original de Bootstrap es muy funcional, pero no demasiado bonito. Existen cientos de clases que se pueden personalizar para darle el estilo deseado, pero hacerlo cada vez que se crea un nuevo sitio es un trabajo muy duro. Es por eso que los temas desarrollados por la comunidad son tan ampliamente utilizados.

 

3.1.- Bootswatch

De entro todos los sitios que ofrecen temas personalizados para Bootstrap destaca Bootswatch, que ofrece gran cantidad de temas personalizados, donde todos ellos son similares al tema original, sobre el que únicamente se han modificado los colores y estilos de las clases.

Se puede acceder a su web para comprobar los temas disponibles:

https://bootswatch.com

Los temas que ofrece Bootstrap son ficheros CSS con el mismo nombre que el original de Bootstrap, por lo que para utilizar uno de estos temas, simplemente es necesario descargarlo y sobreescribir el fichero CSS original de Bootstrap con el del tema que hayamos descargado.

También podemos guardar el fichero del tema con otro nombre (por ejemplo, bootstrap-cerulean.min.css), y hacer referencia a este en nuestra página HTML en lugar de al original de Bootstrap:

<link rel='stylesheet' href='/styles/bootstrap-cerulean.min.css' />

 

3.2.- Modificaciones personalizadas a los estilos de Bootstrap

Aunque modificar todas las clases de Bootstrap para personalizar todas las clases de las que dispone sería un enorme trabajo, siempre es posible realizar determinadas modificaciones sobre algunas de las clases, que nos parezcan necesarias para el estilo de nuestra web.

Para ello, podemos hacerlo en un fichero CSS con nuestras modificaciones propias, y referenciar este fichero en la cabecera de nuestra página HTML:

<link rel='stylesheet' href='/styles/custom.css' />

Y en este fichero podemos modificar la o las clases que nos interesen:

.jumbotron{padding-bottom:10px;}

También podemos realizar estas modificaciones en línea dentro del fichero HTML de nuestra página web, aunque esto no suele ser recomendable, porque de esta forma las modificaciones habría que incorporarlas de igual forma en todas las páginas HTML en las que queramos utilizarlas.

 

4.- Disposición adaptable (Responsive layout)

La disposición adaptable (“responsive layout” en inglés, que es como normalmente lo verás en todos sitios) es la característica y mayor ventaja de Bootstrap.

Si dice que el diseño de una página web es adaptable (responsive) cuando hace que dicha página se adapte y escale automáticamente según el tipo de dispositivo utilizado y las características de la pantalla (o ventana) de este dispositivo. Es decir, una página adaptable se mostrará de una determinada forma en el navegador web de un ordenador (que dispone de una pantalla suficientemente grande), y de otra forma diferente cuando se muestre en el navegador web de una tablet o un móvil (normalmente, se pasará de un diseño que ofrece información aprovechando el espacio horizontal de la pantalla a otro basado en mostrar los elementos verticalmente).

El uso de Bootstrap permite hacer esto fácilmente, y sin la utilización de Javascript. Realmente Bootstrap sí utiliza Javascript (y jQuery), pero para visualizaciones avanzadas de datos que muestran animaciones, etc, no para ofrecer el soporte a diseños adaptables.

Aparte, Bootstrap ofrece una gran cantidad de componentes a utilizar en este diseño, como botones, cuadros de diálogo, pestañas, acordeones (zonas expansibles), o iconos (Glyphicons), y otras muchas más.

 

5.- Clases básicas de Bootstrap

El secreto de Bootstrap está en sus clases CSS. Todos los estilos, funcionalidades, etc, que ofrece Bootstrap se consiguen asignando clases CSS a los elementos de la página HTML.
El problema es que hay cientos de ellas. No se pretende que se conozcan todas las clases CSS de Bootstrap (aunque si se desea dominar Bootstrap será necesario ir conociendo cada vez más clases, y saber cuales utilizar en cada situación).
Afortunadamente, la mayoría de las clases de Bootstrap son subclases modificadoras de otras, lo que facilita el aprendizaje y la memorización de estas.
Para empezar vamos a ver 3 clases básicas, que se utilizan prácticamente en el 100% de los diseños de páginas basadas en Bootstrap.

 

5.1.- Clase “container”

La clase “container” es un contenedor horizontal de tamaño fijo, es decir, no ocupa toda la pantalla o ventana del navegador. El tamaño fijo aplicado depende del tamaño de la pantalla o ventana, o bien del elemento HTML dentro del que se introduzca. Es decir, aunque el uso más habitual de “container” es a nivel de la página completa, no tiene porque ser así, y se puede usar dentro de cualquier otro elemento HTML en el interior de la página.
Esta clase es muy utilizada como el contenedor principal de las páginas, ya que ayuda a gestionar el contenido completo de la página según el tamaño de pantalla del dispositivo, y mantiene este tamaño dentro de unos límites en dispositivos que tengan pantallas muy grandes.
En los dispositivos más pequeños (extra-pequeños, con un ancho de pantalla menor de 768 píxeles), la clase “container” sí ocupa el ancho de pantalla completo. Es decir, únicamente tiene un ancho fijo inferior al tamaño de pantalla en los dispositivos pequeños en adelante, pero en los más pequeños sí ocupará el ancho de pantalla completo.

 

5.2.- Clase “container-fluid”

La clase “container-fluid” es un contenedor horizontal que siempre tiene el tamaño de la pantalla o ventana completa del navegador, o bien del elemento HTML dentro del que se introduzca. El uso más habitual de “container-fluid”, de hecho, no es al nivel de la página completa (ya que “container” es mucho más habitual en este sentido), sino que se suele utilizar dentro de otros elementos HTML en el interior de la página (indicando que lo que hay en su interior debe ocupar el ancho completo del elemento en que se ha incluido).

 

5.3.- Clase “jumbotron”

Esta clase con nombre tan rimbombante (“jumbotron)” es muy utilizada para mostrar títulos de las páginas que forman las diferentes secciones de un sitio web. Normalmente tiene un fondo de color destacado, y unos tipos de fuentes de tamaños incrementados respecto a los normales del resto de elementos.

 

6.- Clases y modificadores

Normalmente las clases especifican el tipo de objeto que se quiere introducir, y además, esta clase puede acompañarse de modificadores (o subclases de dicha clase), que especifican características concretas de dicho objeto.
Por ejemplo, a la hora de mostrar un botón, se utiliza la clase “btn”, y ello hace que el elemento especificado tenga la apariencia de botón:
<div class="btn">Danger!</div>
Sin embargo, mediant el uso de las clases “btn-xxx” (modificadores, o subclases de “btn”) se puede especificar la apariencia de dicho botón. Por ejemplo:
<div class="btn btn-danger">Danger!</div>

Dado que existen muchas clases y muchos modificadores, siempre se dispone de la opción de ir al sitio web de Bootstrap, mirar sus ejemplos, copiar el código de dichos ejempos, y modificar a partir de ellos:

http://getbootstrap.com/components/

Los “snippets” de los entornos de desarrollo como los que ofrecen Atom y el complemento “atom-bootstrap3” permiten introducir estos componentes por defecto de una forma mucho más rápida, sin necesidad de tener que copiar y pegar los ejemplos del sitio web de Bootstrap.

 

7.- Sistema de rejillas de Bootstrap

Tradicionalmente los diseños de las páginas web se hacían mediante tablas. Estas facilitaban el trabajo al desarrollador para conseguir posicionar los elementos de forma relativa unos de otros. Sin embargo, hacían la página menos accesible y más lenta de cargar y procesar para los navegadores.

Bootstrap construye la disposición (“layout”) de las páginas como un sistema de rejillas que permiten no tener que usar más los diseños basados en tablas, ya que funcionan de forma similar. Las rejillas de Bootstrap se comportan como tablas, con filas y columnas, pero todo está construido mediante CSS.

Además, estas rejillas son adaptables al tamaño de pantalla y a los diferentes dispositivos, lo que permite diseñar las páginas pensando en que se vean correctamente en toda clase de terminales.

 

7.1.- Datos básicos de las rejillas de Bootstrap

Las rejillas de Bootstrap siempre tienen 12 columnas. Es posible tener un número diferente de columnas, pero para ello sería necesario modificar el CSS de Bootstrap, algo que realmente no queremos hacer. En el 99,99% de las ocasiones, no es necesario trabajar con un número de columnas menor y mayor, ya que el número 12 nos da mucho juego.
Las 12 columnas de las rejillas de Bootstrap nos permiten hacer casi todos los diseños que se nos ocurran:
  • Repartir contenidos entre mitad y mitad de pantalla: 6 columnas + 6 columnas
  • Repartir contenidos entre 3 partes de la pantalla: 4 columnas + 4 columnas + 4 columnas
  • Repartir contenidos entre 4 partes de la pantalla: 3 columnas + 3 columnas + 3 columnas + 3 columnas
  • Repartir contenidos entre 2 partes desiguales de la pantalla: 9 columnas + 3 columnas
  • Repartir contenidos entre 3 partes desiguales de la pantalla: 5 columnas + 4 columnas + 3 columnas
  • Etc…
 Aparte, es muy importante tener en cuenta los siguientes datos sobre las rejillas de Bootstrap:
  • Hay un espacio vacío de 30 píxeles entre 2 elementos separados por columnas (15 píxeles a cada lado de cada elemento). Es decir, si por ejemplo repartimos contenidos entre mitad y mitad de la pantalla, existirán 30 píxeles vacíos de separación entre ambas mitades, 15 a la derecha de la primera mitad, y 15 a la izquierda de la segunda mitad.
  • El espacio vacío que queda fuera del “container” varía en función del tamaño de la pantalla o ventana del navegador (como ya se ha dicho, en los dispositivos extra-pequeños no existe este espacio vacío fuera del “container”, ya que ocupa todo el ancho de pantalla como hace el “container-fluid”).

 

7.2.- Diferentes rejillas de Bootstrap

Se ha estado afirmando siempre que Bootstrap utiliza un sistema de rejillas, en plural. Esto es porque Bootstrap trabaja con 4 rejillas a la vez:
  • Una rejilla para los dispositivos de tamaño de pantalla o ventana extra-pequeña, menor de 768 píxeles. Normalmente, estos dispositivos son teléfonos móviles, o bien navegadores de escritorio cuando el ancho de la ventana de los mismos se hace muy pequeño.
  • Una rejilla para los dispositivos de tamaño de pantalla o ventana pequeña, entre 768 y 991 píxeles. Normalmente, estos dispositivos son tablets de tamaño medio, o bien navegadores de escritorio cuando el ancho de la ventana de los mismos se hace pequeño.
  • Una rejilla para los dispositivos de tamaño de pantalla o ventana mediano, entre 992 y 1199 píxeles. Normalmente estos dispositivos son tablets de gran tamaño, o bien ordenadores portátiles. También para navegadores de escritorio cuando el ancho de la ventana de los mismos se hace mediano.
  • Y por último, una rejilla para los dispositivos de tamaño de pantalla o ventana grande, igual o mayor a 1200 píxeles. Normalmente, estos dispositivos son ordenadores de escritorio o bien portátiles de gran tamaño.
Cuando en una página que utiliza Bootstrap se indica el tamaño de dicho elemento en una de las rejillas, este tamaño también se fija para las rejillas de tamaño superior, a no ser que se indique específicamente también el tamaño para dichas rejillas de tamaño superior. Es decir, por ejemplo:
  • Si se especifica el tamaño en columnas de un elemento para la rejilla extra-pequeña (xs), este tamaño también se utilizará para las rejillas pequeña (sm), mediana (md) y grande (lg), a no ser que se especifique igualmente el tamaño de dicho elemento para una de estas rejillas.
  • Si se especifica el tamaño en columnas de un elemento para la rejilla extra-pequeña (xs) y mediana (md), el tamaño especificado para la extra-pequeña también se aplicará a la rejilla pequeña (sm), mientras que el tamaño especificado para la rejilla mediana también se aplicará a la rejilla grande (lg).

 

7.3.- Ancho del “container” y columna según la rejilla

En función de la rejilla utilizada (tamaño de pantalla o ventana del dispositivo), el ancho fijo de la clase “container” varía, así como el ancho de cada una de las 12 columnas de la rejilla.

La siguiente tabla muestra estos tamaños según la rejilla, siempre basado en la utilización de un elemento “container” para englobar la página completa (si se utilizara un elemento “container-fluid”, el tamaño de cada columna sería diferente, ya que el ancho de la página sería a pantalla completa en lugar de ser fijo):

 

Extra-pequeños
(teléfonos)
(ancho < 768px)
Pequeños
(tablets)
(768px ≥ ancho > 992px)
Medianos
(portátiles)
(992px ≥ ancho > 1200px)
Grandes
(escritorios)
(ancho ≥ 1200 px)
Ancho del “container” Pantalla completa 750px 970px 1170px
Prefijo de la clase columna col-xs- col-sm- col-md- col-lg-
Ancho de la columna Auto 60px 75px 95px

Mediante la combinación de las diferentes rejillas, se puede conseguir diferentes disposiciones del contenido de la página según el tamaño de pantalla del dispositivo, e incluso mostrar u ocultar ciertos elementos a conveniencia.

 

7.4.- Clases de Bootstrap para el control de las rejillas

Las clases de Bootstrap que controlan el ancho de los elementos de la página según la rejilla tienen el siguiente formato: col-XX-YY

  • col: identifica a la columna, de forma abreviada. Es un prefijo obligatorio.
  • XX: identifica a la rejilla a la que hace referencia, según el tamaño de pantalla:
    • xs: rejilla extra-pequeña, para dispositivos de ancho de pantalla menor de 768 píxeles.
    • sm: rejilla pequeña, para dispositivos de ancho de pantalla entre 768 y 991 píxeles.
    • md: rejilla mediana, para dispositivos de ancho de pantalla entre 992 y 1199 píxeles.
    • lg: rejilla grande, para dispositivos de ancho de pantalla igual o mayor a 1200 píxeles.
  • YY: identifica al tamaño en columnas del elemento. Será un número de 1 ó 2 dígitos, del 1 al 12.

Nada mejor que ver unos ejemplos para aclarar el concepto:

  • col-md-4: esta clase aplicada a un elemento indica que dicho elemento ocupará un ancho de 4 columnas en dispositivos de tamaño mediano y grande. Si no se indica nada para las rejillas de tamaño extra-pequeño y pequeño, el elemento ocupará las 12 rejillas en estos dispositivos.
  • col-sm-6: esta clase aplicada a un elemento indica que dicho elemento ocupará un ancho de 6 columnas en dispositivos de tamaño pequeño, mediano y grande. Si no se indica nada para la rejilla de tamaño extra-pequeño, el elemento ocupará las 12 rejillas en estos dispositivos.
  • col-xs-2: esta clase aplicada a un elemento indica que dicho elemento ocupará un ancho de 2 columnas en dispositivos de todos los tamaños, a no ser que se indique otro tamaño para dispositivos de tamaño superior.

Es decir, si queremos que un determinado contenido ocupe 9 columnas en los dispositivos extra-pequeños, 6 columnas en los pequeños, y 4 en los medianos y grandes, se utilizarían las siguientes clases:

<div class="col-xs-9 col-sm-6 col-md-4">Content</div>

 

7.5.- Filas

Hasta ahora se ha estado hablando de columnas, pero no se han hablado de las filas de las rejillas de Bootstrap. Se dispone de la clase “row” para especificar una nueva fila en el diseño de la página. Esto quiere decir, que normalmente se creará un elemento con la clase “row” para especificar una nueva fila, y dentro de este se crearán los elementos que contenga dicha fila, especificando para cada uno de ellos la clase “col-XX-YY” que le corresponda, según el ancho que deba tener dicho elemento en cada rejilla.

Por ejemplo, para crear una fila con 3 columnas del mismo ancho:

<div class="row">
 <div class="col-md-4">…</div>
 <div class="col-md-4">…</div>
 <div class="col-md-4">…</div>
</div>

 

7.6.- Ajustes a la rejilla de 12 columnas

Si dentro de una fila colocamos elementos que en total sumen más de 12 columnas, Bootstrap va a respetar el ancho que se establezca en dichos elementos, por lo que los últimos saltarán a mostrarse en una nueva fila, que aunque no ha sido creada explícitamente, se verá igualmente.

Ejemplo 1

Por ejemplo, si creamos una fila con los siguientes contenidos:

<div class="row">
 <div class="col-md-4">…</div>
 <div class="col-md-6">…</div>
 <div class="col-md-4">…</div>
</div>

En este caso, el ancho de los contenidos de la fila ocupan 14 columnas en total (4+6+4). Esto hará que el último de los contenidos, con un ancho de 4 columnas, se muestre debajo de los otros 2, como si estuviera en una fila diferente (aunque no se haya especificado la creación de dicha fila en el código).

Ejemplo 2

Este tipo de efectos puede aprovecharse en algunas situaciones para controlar el ancho de los elementos en ciertos tamaños de pantalla. Por ejemplo:

<div class="row">
 <div class="col-xs-6 col-md-4">…</div>
 <div class="col-xs-6 col-md-4">…</div>
 <div class="col-xs-6 col-md-4">…</div>
</div>

En este caso, se ha creado una fila con 3 contenidos, que ocuparán 3 columnas del mismo tamaño en pantallas de tamaño mediano y grande. Sin embargo, para pantallas de tamaño extra-pequeño y pequeño, el ancho establecido para cada contenido es de 6 columnas, por lo que en estos dispositivos se mostrarán los 2 primeros contenidos en la misma fila, mientras que el último saltará a una fila por debajo de los 2 primeros, y ocupará únicamente la mitad del ancho de dicha fila.

Ejemplo 3

<div class="row">
 <div class="col-xs-6 col-md-4">…</div>
 <div class="col-xs-6 col-md-4">…</div>
 <div class="col-xs-12 col-md-4">…</div>
</div>

En este caso, se ha creado una fila con 3 contenidos, que ocuparán 3 columnas del mismo tamaño en pantallas de tamaño mediano y grande. Sin embargo, para pantallas de tamaño extra-pequeño y pequeño, el ancho establecido para cada contenido es de 6 columnas para los 2 primeros, y 12 para el segundo, por lo que en estos dispositivos se mostrarán los 2 primeros contenidos en la misma fila, mientras que el último saltará a una fila por debajo de los 2 primeros, ocupando dicha fila al completo.

Todos estos efectos y el reparto del contenido entre filas y columnas está hecho por Bootstrap mediante CSS, por lo que el JavaScript no es para nada necesario en estos casos.

 

8.- Ejercicio de la Parte 1

Tras terminar esta primera parte del tutorial de introducción a Bootstrap, vamos a hacer un sencillo ejercicio para poner en práctica algunos de los conceptos que se han introducido en los anteriores apartados.

El ejercicio tratará simplemente de crear una página sencilla de ejemplo, basada en un “wireframe” y una captura de pantalla de como se espera que quede.

 

8.1.- Wireframe de la página a crear

Wireframe Bootstrap 1

Wireframe Bootstrap 1

 

8.2.- Captura de pantalla de la página a crear

Screenshot Bootstrap 1

Screenshot Bootstrap 1

 

8.3.- Código de la página

<!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></title>
  <!-- Bootstrap -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[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>
  <div class="container">
   <div class="jumbotron">
    <h1>Music Store</h1>
   </div>
   <div class="row">
    <div class="col-md-3">
     <img class="img-responsive" src="./lab/album.gif" title="Album Cover" alt="Album Cover" />
    </div>
    <div class="col-md-9">
     <h2>Album Title</h2>
     <h2>Artist</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vehicula libero laoreet,
 ultricies enim a, venenatis ipsum. Aliquam convallis eu sem interdum vulputate. Sed commodo
 non mauris ac porta. Morbi efficitur, justo suscipit congue rutrum, nisi sapien tristique
 lorem, sed sagittis erat risus nec velit. Curabitur varius hendrerit leo, nec tempus velit
 aliquam vitae. Duis ut tempus elit. Sed id laoreet mauris. Fusce eu neque odio. Vestibulum
 mollis erat nec nisi ultrices euismod.</p>
    </div>
   </div>
  </div>
  <!-- jQuery -->
  <script src="./js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="./js/bootstrap.min.js"></script>
 </body>
</html>

 

8.4.- Código en Github

Para todos aquellos que quieran, pueden acceder al código completo del ejercicio en Github:

https://github.com/icardenasr/bootstrap_tutorial