Introducción a Bootstrap (Parte 2)


Esta es la segunda 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.

 bootstrap

 

1.- Anidado de rejillas en Bootstrap

Al igual que en HTML clásico se podían incluir tablas dentro de cada celda de otra tabla (anidado de tablas), con Bootstrap se pueden incluir rejillas dentro de cada celda de otra rejilla superior. Esto es lo que se conoce como anidado de rejillas.

<div class='row'>
<div class='col-md-6'>
<div class='row'>
<!-- 12 nuevas columnas aquí -->
<!-- La rejilla que se aplicará a estas 12 columnas será menor -->
</div>
</div>
</div>

Cada fila (row) interna crea una nueva rejilla en el interior del elemento en que se incluye, y esta nueva rejilla tendrá de nuevo 12 columnas. El tamaño de rejilla que se aplica a cada fila anidada es el correspondiente al ancho que toma dicha fila. Es decir, en filas anidadas cuyo ancho ya esté disminuido al estar incluido en una sección más estrecha, se aplicará la rejilla que corresponda a ese ancho. Por lo tanto, lo habitual es que a un contenido de columnas anidadas se le acabe aplicando la rejilla pequeña o extra-pequeña aunque se encuentre visible en una pantalla de mayor resolución, porque el tamaño de la fila anidada correspondería con el de un dispositivo menor.

 

2.- Control del posicionamiento

La posibilidad de redimensionar el contenido según el tamaño de pantalla/ventana y dispositivo es algo muy potente. Sin embargo, no se trata únicamente de cambiar los tamaños, sino que en muchas ocasiones, lo más importantes es:

  • Decidir donde mostrar algunos componentes según se vaya a ver la pantalla (nombre del un producto, botón de comprar, etc).
  • Decidir si mostrar mucha información detallada o no según el tamaño de la pantalla (en dispositivos pequeños no se debería incluir demasiado contenido que no se considere realmente importante).

 

2.1.- Clases para el control del posicionamiento

Bootstrap permite controlar el posicionamiento de los elementos con las clases:

  • col-XX-offset-Y: indica un salto del número indicado de columnas. Las columnas “del salto” quedarán vacías, sin poder ser usadas por otros elementos.
    • XX: tamaño de la rejilla en que se aplica (xs, sm, md, lg).
    • Y: número de columnas que se saltan.
  • col-XX-push-Y: indica que se mueva este elemento a la derecha el número de columnas indicado. El espacio que queda a la izquierda está disponible para usar por otros elementos.
    • XX: tamaño de la rejilla en que se aplica (xs, sm, md, lg).
    • Y: número de columnas que se desplaza.
  • col-XX-pull-Y: indica que se mueva este elemento a la izquierda el número de columnas indicado. El espacio que queda a la derecha está disponible para usar por otros elementos.
    • XX: tamaño de la rejilla en que se aplica (xs, sm, md, lg).
    • Y: número de columnas que se desplaza.

Estas clases de posicionamiento no funcionan para la colocación absoluta de los elementos en la rejilla. Es decir, si se hace un “push”  (movimiento a la derecha) de 12 columnas a un elemento, no moverá dicho elemento a la siguiente fila, sino que se mostrará a la derecha total de la pantalla, saliendo de ella. Lo mismo pasa con las otras clases “pull” y “offset”.

 

3.- Diseño “mobile first”

Cuando se hacen diseños de páginas web, actualmente, es una buena práctica común el hacer el diseño para los dispositivos y pantallas pequeñas primero, ya que posteriormente es más fácil escalar los contenidos diseñados a pantallas grandes, que tener que comprimir los contenidos diseñados a pantallas pequeñas.

Bootstrap está implementado con esta filosofía en mente: diseñar para móviles primero (mobile first). Es decir, funciona mucho mejor si se define primero la disposición (layout) de las rejillas pequeñas, y posteriormente se utilizan las clases “push” y “pull” para controlar el posicionamiento en las rejillas grandes, siempre que sea necesario.

Vamos a ver porque es importante este filosofía con un ejemplo de diseño, donde pondremos en práctica las clases de posicionamiento antes vistas.

 

3.1.- Ejemplo de diseño “mobile first”

Vamos a buscar un diseño muy simple, que tenga las siguientes características:

  • Diseño buscado en pantallas pequeñas y extra-pequeñas:
    • LOGO
    • DETALLES
  • Diseño buscado en pantallas medianas y grandes:
    • DETALLES                                                 LOGO

Es decir, se trata simplemente de colocar un logo y un texto de detalles en 2 líneas diferentes para las pantallas de móviles y tablets, y que se vean en la misma línea en las pantallas de portátiles y sobremesa. Sin embargo, el secreto en este caso es que para las pantallas pequeñas queremos que la primera línea sea el logo, y la segunda sean los detalles, mientras que para las pantalla grandes queremos que el logo salga a la derecha, y los detalles a la izquierda.

Primera prueba: Diseño no “mobile first”

Primero vamos a intentar el diseño partiendo de las rejillas para pantallas medianas y grandes, y después tratar de adaptarlo a las pantallas pequeñas y extra-pequeñas. Comprobaremos como esto será muy complicado de lograr, ya que el uso de las clases de posicionamiento “push”, “pull” y “offset” no nos permiten saltar de una línea a otra.

El diseño para las pantallas medianas y grandes sería sencilla, simplemente colocamos una fila, y los detalles los colocamos en las 6 primeras columnas de la izquierda, mientras que el logo ocuparía las seis columnas de la derecha:

<div class="row">
 <div class="col-md-6">DETALLES</div>
 <div class="col-md-6">LOGO</div>
</div>

Sin embargo, ahora partiendo de este diseño, no podemos adaptarlo correctamente a las pantallas pequeñas mediante las clases de posicionamiento, ya que necesitamos que el logo ocupe una línea completa, y debajo los detalles ocupando otra. Para ello, tendríamos que empujar los detalles 6 columnas a la derecha (buscando que salte a la nueva línea) y hacer que ocupe 12 columnas, mientras que para el logo tendríamos que moverlo 6 columnas a la izquierda y hacer que ocupe igualmente 12 columnas.

Pero como hemos visto, las clases de posicionamiento no sirven para “saltar” a una nueva línea, por lo que solo conseguiríamos que los detalles salgan completamente a la derecha de la página, fuera de ella y de la vista del usuario.

Segunda prueba: Diseño “mobile first”

Ahora vamos a intentar el diseño partiendo de las rejillas para pantallas pequeñas y extra-pequeñas, y después tratar de adaptarlo a las pantallas medianas y grandes. Se verá que esto es mucho más sencillo.

El diseño para las pantallas pequeñas sería muy sencillo, simplemente colocamos una fila, y los contenidos hacemos que ocupen cada uno 12 columnas, de forma que el logo salga ocupando toda una línea arriba, y los detalles toda una línea debajo:

<div class="row">
 <div class="col-xs-12">LOGO</div>
 <div class="col-xs-12">DETALLES</div>
</div>

Y ahora este diseño se puede convertir fácilmente al que queríamos para las pantallas medianas y grandes, simplemente utilizando las clases “push” y “pull”. Primero se configura el logo y los detalles para ocupar la mitad de la pantalla (6 columnas cada uno). Si se deja así, ambos se mostrarían en la misma línea, pero el logo saldría a la izquierda y los detalles a la derecha, que no es lo que queremos. Para cambiarlos de posición, simplemente nos basta con “empujar” el logo 6 columnas a la derecha (para que empiece en la columna 6), y hacer lo mismo con la descripción 6 columnas a la izquierda (para que empiece en la columna inicial):

<div class="row">
 <div class="col-xs-12 col-md-6 col-md-push-6">LOGO</div>
 <div class="col-xs-12 col-md-6 col-md-pull-6">DETALLES</div>
</div>

Y ya estaría, de forma increíblemente sencilla, hemos conseguido el diseño que buscábamos empezando por las pantallas pequeñas, y pasando posteriormente a las grandes.

 

4.- Control de la visibilidad

Bootstrap también permite mostrar y ocultar elementos en función del tamaño de pantalla, e igualmente para la vista de impresión. De esta forma, nos permite controlar que ciertos elementos no se vean en según que tamaño de rejilla, o a la hora de imprimir la página.

 

4.1.- Clases para el control de la visibilidad

Las clases que controlan la visibilidad según el tamaño de la pantalla son:

  • hidden-XX: esta clase, aplicada a un elemento concreto, hará que este sea visible en todas las rejillas excepto en la XX (xs, sm, md, lg).
  • visible-XX: esta clase, aplicada a un elemento concreto, hará que este sea visible únicamente en la rejilla XX(xs, sm, md, lg), e invisible en todas las demás.

Las clases que controlan la visibilidad para la vista de impresión son:

  • hidden-print: esta clase, aplicada a un elemento concreto, hará que este no sea visible en la vista de impresión.
  • visible-print: esta clase, aplicada a un elemento concreto, hará que este solo sea visible en la vista de impresión.

Es decir, en la vista de impresión siempre se incluirán (aparte de los elementos marcados con la clase “visible-print”) todos los elementos que actualmente estén en pantalla que no se hayan marcado como “hidden-print”.

 

5.- Componentes de Bootstrap

En la página de Bootstrap existe una colección de los componentes que forman parte del mismo, con multitud de ejemplos de cada uno de ellos, que se pueden copiar y pegar para empezar a utilizarlos fácilmente:

http://getbootstrap.com/components/

Todos los ejemplos de uso de estos componentes son un excelente punto de partida para su inclusión en nuestras páginas web, por lo que la manera más sencilla de conocerlos y habituarse a su uso es recorrer esta página, ver el aspecto y funcionamiento de estos componentes, y copiar y utilizar el código de algunos de estos ejemplos en alguna página propia.

 

5.1.- Javascript de Bootstrap

A partir de este momento, los componentes que vamos a ver hacen uso del Javscript de Bootstrap. Todos los componentes anteriores, que controlan las rejillas, el posicionamiento o la visibilidad, están basados únicamente en CSS, pero los que veremos a partir de ahora, necesitan del Javascript de Bootstrap (y por lo tanto, de jQuery) para funcionar.

 

6.- Navegación por el sitio – Introducción al “navbar”

La barra de navegación (“navbar”) es uno de los componentes de Bootstrap más importantes y más utilizados. Es bastante raro encontrar un sitio web hecho con Bootstrap que no utilice de alguna forma la barra de navegación.

Este “navbar” es el componente preparado para ofrecer la navegación por todo un sitio web o una aplicación al usuario. Normalmente se coloca en la parte superior de la pantalla, aunque también permite colocarla en la parte inferior (es algo muy raro). Igualmente, puede mostrarse dentro del scroll vertical de la pantalla (como cualquier otro componente) o de forma fija e inmóvil, sin verse afectada por el scroll. En su interior se pueden colocar muchos elementos, como logotipos, título de la web, menú de enlaces a las diferentes secciones de la web, un formulario de búsqueda, etc.

 

6.1.- Creación del “navbar”

Un “navbar” es un elemento HTML complejo y para estar completo necesita de una gran cantidad de código HTML. La forma más habitual de utilizar uno es ir a los ejemplos de Bootstrap, seleccionar el estilo del que nos gustaría partir, copiar el código en nuestra página, y modificar a partir de él. Igualmente, podemos utilizar uno de los “snippets” que pueda incluir nuestro entorno de edición.

De forma resumida, la creación de un “navbar” desde cero incluye los siguientes elementos y pasos:

  • Añadir un elemento “nav” con la clase “navbar” y el role=”navigation”.
    • La clase “navbar-default” provee el esquema de color por defecto.
    • La clase “navbar-inverse” provee el esquema de color invertido.
  • Dentro del elemento “nav” se utilizar un “container” si se quiere que el ancho sea fijo, o un “container-fluid” si se quiere que la barra de navegación ocupe todo el ancho de la pantalla (suele ser lo habitual).
  • Dentro del “container” suele ir en primer lugar un “div” de la clase “navbar-header”, dentro del cual se incluyen:
    • Un “button” con clase “navbar-toggle” (únicamente si queremos que el listado de enlaces incluidos en la barra de navegación se compacte como un botón en las vistas pequeñas). Es lo que se conoce como “botón hamburguesa”.
    • Un enlace “a” con clase “navbar-brand”, que normalmente es una imagen con el logo del sitio web, o un texto con el nombre del sitio web, y que suele apuntar al “index.html” de dicho sitio.
  • Tras el “navbar-header” va un “div” con las clases “collapse” y “navbar-collapse”, en el que se incluyen los contenidos principales de la barra de navegación, y al que debe apuntar el botón de la hamburguesa introducido previamente.
    • El contenido suele ser una lista no ordenada con los enlaces de las diferentes secciones del sitio web.
    • Pueden ser varias listas no ordenadas si es necesario crear secciones que se desplieguen verticalmente con diferentes enlaces bajo ellas (clase “dropdown”).
      • Al enlace que actúa como “dropdown” se le puede añadir un “b class=”caret”></b>”, que no es más que la pequeña flechita indicando que ese elemento se puede desplegar.
    • También se pueden incluir formularios dentro del “navbar” (por ejemplo para búsquedas o formularios de “login”). Si se introduce entre las opciones de la barra de navegación, habrá una lista no ordenada antes del formulario, y otra después.

Esto explicado aquí de esta forma puede resultar muy confuso, por lo que se insiste en partir de un ejemplo para verlo de forma más clara, y continuar a partir de él.

 

6.2.- Posicionamiento del “navbar”

Como se ha comentado anteriormente, la barra de navegación puede ir colocada en la parte superior o inferior de la página. Si se coloca en la parte superior, puede ser un elemento estático más, o ser fija. Si se coloca en la parte inferior, siempre será fija. Las clases que se ocupan del posicionamiento del “navbar” son las siguientes:
  • navbar-static-top: esta clase aplicada a un “navbar” la sitúa arriba como un elemento más, y como tal la barra de navegación desaparece si se hace scroll a la página.
  • navbar-fixed-top: esta clase aplicada a un “navbar” la sitúa arriba de forma fija, y de esta forma siempre estará presente en esa posición, sin verse afectada si se hace scroll a la página.
  • navbar-fixed-bottom: esta clase aplicada a un “navbar” la sitúa debajo de forma fija, y de esta forma, siempre estará presente en esa posición, sin verse afectada si se hace scroll a la página.

Es importante hacer notar que si se utiliza alguna de las opciones fijas, es obligatorio añadir un “padding” de 70 px al “body” de la página (arriba o abajo, según se utilice). Si no se hace, el “navbar” se sobrepondrá a esa parte del “body” de la página.

 

6.3.- Posicionando el contenido dentro del “navbar”

Cualquier lista no ordenada (“ul”) o “div” de contenido dentro de la barra de navegación puede situarse a la izquierda o a la derecha de esta mediante las clases “navbar-left” y “navbar-right”.

 

6.4.- Ejemplo de barra de navegación paso a paso

Podemos empezar por una barra de navegación superior fija con colores por defecto y sin contenido especial:

<nav class="navbar navbar-default navbar-fixed-top">
 <div class="container-fluid">
  <h3>Sample content</h3>
 </div>
</nav>

Se añade a esta barra el “brand” o nombre del sitio, que puede ser mediante texto o con un logotipo basado en una imagen:

<nav class="navbar navbar-default navbar-fixed-top">
 <div class="container-fluid">
  <div class="navbar-header">
   <a href="./index.html" class="navbar-brand">Navbar Ex</a>
  </div>
  <h3>Sample content</h3>
 </div>
</nav>

Sustituimos el contenido de ejemplo por un texto y un enlace, situados a la derecha:

<nav class="navbar navbar-default navbar-fixed-top">
 <div class="container-fluid">
  <div class="navbar-header">
   <a href="./index.html" class="navbar-brand">Navbar Ex</a>
  </div>
  <div class="navbar-text navbar-right">
   Sample text
   <a class="navbar-link" href="URL here">Follow us!</a>
  </div>
 </div>
</nav>

Añadimos ahora un listado de enlaces a las supuestas secciones de la web:

<nav class="navbar navbar-default navbar-fixed-top">
 <div class="container-fluid">
  <div class="navbar-header">
   <a href="./index.html" class="navbar-brand">Navbar Ex</a>
  </div>
  <ul class="nav navbar-nav" role="menu">
   <li><a href="#" class="active">Current Page</a><span class="sr-only">current</span></li>
   <li><a href="#">Link</a></li>
   <li class="dropdown">
    <a class="dropdown-toggle" role="button" data-toggle="dropdown">Dropdown<span class="caret" /></a>
    <ul class="dropdown-menu">
     <li><a href="#">Option one</a></li>
     <li><a href="#">Option two</a></li>
    </ul>
   </li>
  </ul>
 </div>
</nav>

Por último, vamos a añadir el botón “de hamburguesa” para que aparezca en la vista móvil de la página, mantenemos el enlace que había anteriormente a la derecha, y además el menú de opciones:

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="/Index.html" class="navbar-brand">Navbar Example</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hamburger-navigation">
<span class="sr-only">Navigation toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="hamburger-navigation">
<div class="navbar-text navbar-right">
<a class="navbar-link" href="URL here">
Follow us!
</a>
</div>
<ul class="nav navbar-nav" role="menu">
<li><a href="#" class="active">Current Page</a><span class="sr-only">current</span></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a class="dropdown-toggle" role="button" data-toggle="dropdown">Dropdown<span class="caret" /></a>
<ul class="dropdown-menu">
<li><a href="#">Option one</a></li>
<li><a href="#">Option two</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

Mediante este último ejemplo, tendríamos un “navbar” muy completo. Este código puede servir para copiar y pegar en cualquier página donde queramos incluir una barra de navegación, y modificar a partir de él añadiendo opciones al menú, añadiendo enlaces, eliminando los enlaces y situando el menú de opciones a la derecha, cambiando el título de la página por un logotipo (imagen), etc.

 

7.- Representación avanzada de datos

Ahora vamos a introducir 3 modelos de representación de datos que nos permiten ofrecer un aspecto avanzado en nuestro sitio web. Están basados en 3 clases de Bootstrap que nos permiten ordenar los contenidos de nuestra página mediante pestañas (“tabs”), pestañas con scroll (“scrollspy”), y en forma de acordeón (“panel”).

NOTA: en los ejemplos que se van a mostrar de estas clases, vamos a utilizar los enlaces a cada sección de las estructuras haciendo las referencias mediante el atributo “data-target”, en lugar de usar el habitual “href”. El motivo de esto es que si combinamos Bootstrap con otros “frameworks” de desarrollo Javascript como AngularJS o EmberJS, los enlaces mediante “href” afectan al rutado de las páginas, y esto tiene un efecto negativo en el funcionamiento de las aplicaciones web. Por lo tanto, todos los enlaces en las “tabs”, “scrollspy” y “panel” se harán con “href=’javascript:;'” y “data-target=#seccion”.

 

7.1.- Estructura de pestañas – “tabs”

Las pestañas (“tabs”) permiten mostrar contenido en diferentes secciones, cada una de ellas con su correspondiente pestaña sobre la misma.

El contenido de estas secciones tendrá un tamaño completo determinado por el propio contenido, y se modificará cada vez que se cambie de pestaña. Es decir, el alto de las secciones del tamaño que ocupe cada una, sin ofrecer un scroll asociado a las mismas. El único scroll que existirá irá asociado a la ventana completa del navegador.

Al igual que con las barras de navegación, el código HTML necesario para la creación de una estructura de “tabs” es complejo, aunque es muy sencillo partir de un ejemplo y simplemente modificar sobre él para crear uno personalizado.

Creación de una estructura de pestañas desde cero

En cualquier caso, vamos a intentar ofrecer una idea de como se crea una estructura de pestañas sin utilizar un ejemplo.

Las pestañas se crean con las clases “nav” y “nav-tabs”, y una lista no numerada de los enlaces a cada una de ellas:

<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="javascript:;" role="tab" data-toggle="tab" data-target="#tabs-first">First</a></li> <li><a href="javascript:;" role="tab" data-toggle="tab" data-target="#tabs-second">Second</a></li> </ul>

El contenido de las pestañas se crea con un “div” de clase “tab-content”, y cada contenido de una pestaña es de la clase “tab-pane”:

<div class="tab-content">
<div class="active tab-pane fade in" id="tabs-first">
<h2>First</h2>
</div>
<div class="tab-pane fade" id="tabs-second">
<h2>Second</h2>
</div>
</div>

Por último, es posible añadir un efecto de desvanecimiento (“fade”) al cambio de pestañas simplemente añadiendo la clase “fade” a cada uno de los contenidos de las pestañas. Si se hace esto, para que la primera pestaña (“active”) se muestre desde el inicio, también es necesario añadir la clase “in” en dicho contenido.

De esta forma, un ejemplo completo de estructura de pestañas nos quedaría de la siguiente forma:

<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="javascript:;" role="tab" data-toggle="tab" data-target="#tabs-first">First</a></li>
<li><a href="javascript:;" role="tab" data-toggle="tab" data-target="#tabs-second">Second</a></li>
</ul>
<div class="tab-content">
<div class="active tab-pane fade in" id="tabs-first">
<h2>First</h2>
</div>
<div class="tab-pane fade" id="tabs-second">
<h2>Second</h2>
</div>
</div>

Este código puede servir de base para cualquier ejemplo que queramos construir. Se puede copiar y pegar en nuestra página, y modificar sobre él, añadiendo pestañas, cambiando el contenido, etc.

 

7.2.- Estructura de pestañas con scroll – “scrollspy”

El “scrollspy” es una clase parecida a las “tabs”, pero muestra el contenido de las secciones de forma única, en un mismo contenedor vertical, y cada una de las pestañas realiza un scroll de dicho contenido hacia donde empieza la sección correspondiente.

Es decir, mientras que en las “tabs” únicamente una sección podría estar visible a la vez, en el “scrollspy” todas las secciones están visibles en el contenedor, y este se desplaza hasta donde comienza cada una pulsando en las pestañas. De esta forma, el “scrollspy” se configura con una altura fija, y dentro de esa altura, es donde el contenido va a mostrarse mediante scroll.

La clase “scrollspy” no puede utilizar el atributo “data-target” para apuntar a cada uno de los contenidos, ya que se usa internamente para otra función. Por lo tanto, no se recomienda utilizar la estructura “scrollspy” con “frameworks” Javascript como AngularJS.

Al igual que con las “tabs”, el código HTML necesario para la creación de un “scrollspy” es complejo, aunque es muy sencillo partir de un ejemplo y simplemente modificar sobre él para crear uno personalizado.

Creación de una estructura “scrollspy” desde cero

Para crear un “scrollspy” sin partir de un ejemplo, se necesita introducir un elemento tipo “navbar” (que igualmente puede ser “navbar-default” para su estilo de colores y “navbar-static” para que no sea fija en la pantalla y se mueva con ella). Es necesario añadir el “role=navigation” para accesibilidad, y un “id”:

<nav class="navbar navbar-default navbar-static" role="navigation" id="navbar-spy">
 <!-- links -->
</nav>

Dentro del “navbar” se introduce un lista no ordenada de enlaces, que representan las pestañas. Esta lista debe ser de las clases “nav” y “navbar-nav”:

<ul class="nav navbar-nav">
 <li class="active"><a href="#scroll-first">First</a></li>
 <li><a href="#scroll-second">Second</a></li>
</ul>

El contenido debe ir dentro de un “div” que tenga los atributos “data-spy=“scroll”” , “data-target=id_del_navbar”, y al que se le puede especificar un estilo para fijar su tamaño, etc:

<div data-target="#navbar-spy" data-spy="scroll" style="height:150px; overflow-y:scroll;position:relative;">
 <!-- scrollspy content -->
</div>

Por último, cada elemento del contenido simplemente será un “div” con el “id” correspondiente:

<div id="scroll-first">
 <!-- content -->
</div>

De esta forma, un ejemplo completo de una estructura “scrollspy” nos quedaría de la siguiente forma:

<div style="position:relative;">
 <!-- Navigation -->
 <nav class="navbar navbar-default navbar-static" role="navigation" id="navbar-spy">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#scroll-first">First</a></li>
   <li><a href="#scroll-second">Second</a></li>
  </ul>
 </nav>
 <!-- Content -->
 <div data-target="#navbar-spy" data-spy="scroll" style="height:150px; overflow-y:scroll;position:relative;">
  <div id="scroll-first">
   <h4>First block of content</h4>
  </div>
  <div id="scroll-second">
   <h4>Second block of content</h4>
  </div>
 </div>
</div>

Este código puede servir de base para cualquier ejemplo que queramos construir. Se puede copiar y pegar en nuestra página, y modificar sobre él, añadiendo pestañas, cambiando el contenido, etc.

 

7.3.- Estructura de acordeón – “panel”

El acordeón es una estructura de datos en las que, como en las “tabs”, el usuario únicamente podrá acceder a ver una sección del contenido a la vez. Sin embargo, en este caso, la división del contenido se hace de forma vertical, y cada sección será un panel plegable.

Al igual que con las “tabs” o “scrollspy”, el código HTML necesario para la creación de un “panel” es complejo, aunque es muy sencillo partir de un ejemplo y simplemente modificar sobre él para crear uno personalizado.

Creación de una estructura “panel” desde cero

Para crear un acordeón sin partir de un ejemplo, se necesita crear el contenedor del mismo mediante la clase “panel-group”:

<div class="panel-group" id="accordion-sample">
 <!-- accordion content -->
</div>

Cada sección del acordeón será de la clase “panel” (se puede utilizar “panel-default” para el esquema de color):

<div class="panel panel-default">
 <!-- panel content -->
</div>

La sección de título de un panel se crea con una estructura formada por un “div” de la clase “panel-heading” y, por ejemplo un “h4”, de la clase “panel-title”:

<div class="panel-heading">
 <h4 class="panel-title">
  <!-- heading content -->
 </h4>
</div>

Dentro de la sección de título hay que incluir un enlace al contenido de dicho panel:

<a data-toggle="collapse" data-parent="#accordion-sample" href="javascript:;" data-target="#accordion-sample-one">
 <!-- heading text -->
</div>

El contenido de un panel va en una estructura formada por un “div” de las clases “panel-collapse” y “collapse”:

<div id="accordion-sample-one" class="panel-collapse collapse in">
 <!-- content -->
</div>

Y en su interior se puede incluir lo que se desee, dentro de un “div” de la clase “panel-body”:

<div class="panel-body">
 <!-- content -->
</div>

De esta forma, un ejemplo completo de una estructura acordeón nos quedaría de la siguiente forma:

<div class="panel-group" id="accordion-sample">
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion-sample" href="javascript:;" data-target="#accordion-sample-one">
     Heading One
    </a>
   </h4>
  </div>
  <div id="accordion-sample-one" class="panel-collapse collapse in">
   <div class="panel-body">
    Sample content
   </div>
  </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion-sample" href="javascript:;" data-target="#accordion-sample-two">
     Heading Two
    </a>
   </h4>
  </div>
  <div id="accordion-sample-two" class="panel-collapse collapse">
   <div class="panel-body">
    Sample content
   </div>
  </div>
 </div>
</div>

Este código puede servir de base para cualquier ejemplo que queramos construir. Se puede copiar y pegar en nuestra página, y modificar sobre él, añadiendo nuevas secciones, cambiando el contenido, etc.

 

7.4.- Estructura de carrusel – “carousel”

El carrusel es una estructura de datos para mostrar información de forma paginada. Es ideal para su uso con galerías de imágenes o anuncios. Únicamente uno de los componentes se muestra a la vez, y se pueden incluir controles para moverse por los contenidos de forma manual, o hacer que estos se desplacen automáticamente.

Al igual que con las estructuras anteriores, el código HTML necesario para la creación de un “carousel” es complejo, aunque es muy sencillo partir de un ejemplo y simplemente modificar sobre él para crear uno personalizado.

Creación de una estructura “carousel” desde cero

El contenedor principal de un carrusel es un “div” de la clase “carousel”. También se aplica la clase “slide”, que indica la animación que se realizará cuando se cambie de un elemento a otro. También es necesario utilizar el atributo “data-ride=”carousel””:

<div id="carousel-demo" class="carousel slide" data-ride="carousel">
 <!-- carousel content -->
</div>

Los indicadores de un carrusel son la serie de puntos que aparecen en el mismo, indicando cuantos componentes paginados tiene, y cual es que el se está mostrando actualmente. En este caso, se trata de una lista ordenada de la clase “carousel-indicators”:

<ol class="carousel-indicators">
 <li data-target="#carousel-demo" data-slide-to="0" class="active"></li>
 <li data-target="#carousel-demo" data-slide-to="1"></li>
</ol>

Los elementos de un carrusel se incluyen dentro de una estructura “div” de la clase “carousel-inner”:

<div class="carousel-inner">
 <!-- slides -->
</div>

Cada elemento del carrusel es un “div” de la clase “item” (se puede utilizar la clase “active” para indicar cual es el primer elemento en estar mostrándose). Se pueden utilizar “captions” (textos sobrepuestos a cada elemento) con una estructura “div” de la clase “carousel-caption” en su interior:

<div class="item active">
 <img alt="First slide" src="image-url" />
 <div class="carousel-caption">
  <h3>Caption Heading One</h3>
  <p>Caption Text One</p>
 </div>
</div>

La navegación manual por el carrusel se introduce mediante enlaces al final del “div” contenedor general:

  • El enlace para el elemento anterior debe ser de las clases “left” y “carousel-control”, y debe llevar el atributo “data-slide=”prev””.
  • El enlace para el elemento siguiente debe ser de las clases “right” y “carousel-control”, y debe llevar el atributo “data-slide=”next””.
<a class="left carousel-control" href="#carousel-demo" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-demo" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
</a>

De esta forma, un ejemplo completo de una estructura carrusel nos quedaría de la siguiente forma:

<div id="carousel-demo" class="carousel slide" data-ride="carousel">
 <ol class="carousel-indicators">
  <li data-target="#carousel-demo" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-demo" data-slide-to="1"></li>
 </ol>
 <div class="carousel-inner">
  <div class="item active">
   <img alt="First slide" src="image-url" />
   <div class="carousel-caption">
    <h3>Caption Heading One</h3>
    <p>Caption Text One</p>
   </div>
  </div>
  <div class="item">
   <img alt="Second slide" src="image-url" />
   <div class="carousel-caption">
    <h3>Caption Heading Two</h3>
    <p>Caption Text Two</p>
   </div>
  </div>
 </div>
 <a class="left carousel-control" href="#carousel-demo" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="#carousel-demo" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
</div>

 

8.- Ejercicio de la Parte 2

Tras terminar esta segunda 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

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

screenshot

 

8.3.- Código de la página

<!DOCTYPE html>
<html>
 <head>
  <title>Bootstrap Lab 2</title>
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />
 </head>
 <body>
  <div class="container">
   <div class="jumbotron">
    <h1>Submit Album</h1>
   </div>
   <div id="accordionIndex" class="panel-group">
    <div class="panel panel-default">
     <div class="panel-heading">
      <h4 class="panel-title">
       <a href="javascript:;" data-toggle="collapse" data-parent="#accordionIndex" data-target="#collapseIndex1">Album Title and Artist</a>
      </h4>
     </div>
     <div id="collapseIndex1" class="panel-collapse collapse">
      <div class="panel-body">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque aliquet augue, vel suscipit dui euismod sit amet. Proin nulla odio, tempor id blandit nec, volutpat a enim. Integer suscipit, leo at lobortis pharetra, quam ligula interdum odio, sit amet commodo felis massa sed dolor.</p>
      </div>
     </div>
    </div>
    <div class="panel panel-default">
     <div class="panel-heading panel-ja-index">
      <h4 class="panel-title">
       <a href="javascript:;" data-toggle="collapse" data-parent="#accordionIndex" data-target="#collapseIndex2">Track Information</a>
      </h4>
     </div>
     <div id="collapseIndex2" class="panel-collapse collapse">
      <div class="panel-body">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque aliquet augue, vel suscipit dui euismod sit amet. Proin nulla odio, tempor id blandit nec, volutpat a enim. Integer suscipit, leo at lobortis pharetra, quam ligula interdum odio, sit amet commodo felis massa sed dolor.</p>
      </div>
     </div>
    </div>
    <div class="panel panel-default">
     <div class="panel-heading panel-ja-index">
      <h4 class="panel-title">
       <a href="javascript:;" data-toggle="collapse" data-parent="#accordionIndex" data-target="#collapseIndex3">Expert Review</a>
      </h4>
     </div>
     <div id="collapseIndex3" class="panel-collapse collapse">
      <div class="panel-body">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque aliquet augue, vel suscipit dui euismod sit amet. Proin nulla odio, tempor id blandit nec, volutpat a enim. Integer suscipit, leo at lobortis pharetra, quam ligula interdum odio, sit amet commodo felis massa sed dolor.</p>
      </div>
     </div>
    </div>
   </div>
  </div>
  <!-- JavaScript -->
  <script type="text/javascript" src="./js/jquery-2.1.3.min.js"></script>
  <script type="text/javascript" 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