Bootstrap de Twitter para webs adaptables

enero 21, 2013

Bootstrap Twitter: cómo desarrollar rápidamente aplicaciones web?

Las Aplicaciones Web han llegado a un nivel de abstracción que permite que se compare a menudo con las aplicaciones de escritorio tradicionales. Todas las aplicaciones web tienen en común ciertos elementos como menús horizontales, botones, pestañas, menús desplegables, etc. que  es necesario desarrollar en cada proyecto, tanto en el diseño como en la funcionalidad. En este artículo vamos a entrar en los detalles de  bootstrap de Twitter  y aprender a crear aplicaciones Web en un mdo  sencillo rápido  y con muy poco código para   ahorrar tiempo en el desarrollo, tiempo que podremos dedicar a las funciones específicas del proyecto.

 

Que es  boostrap de Twitter?

Twitter Bootstrap  es un conjunto de herramientas de interfaz que nos permiten desarrollar rápidamente aplicaciones en una web. A través del uso de técnicas compatibles con los nuevos navegadores, pone a nuestra disposición, por ejemplo, formularios, botones, tablas, cuadrículas, menús y muchas otras herramientas para acelerar nuestro trabajo. El kit de herramientas fue creado inicialmente como un proyecto interno de Twitter, para superar los problemas obvios de  escalabilidad y facilidad de mantenimiento  del uso de diferentes bibliotecas externas. Sólo más tarde se decidió hacer público el proyecto.

 

Introducción a Bootstrap

Lo primero que debemos hacer para valorar el conjunto de herramientas es descargar el paquete completo. Bootstrap ofrece tres tipos de descarga:

Para el propósito de este artículo os sugerimos que descargéis el  paquete completo.

 

Estructura

Todo el código que necesitamos se encuentra en unos pocos archivos. Esto nos permite mover los archivos fácilmente dentro de nuestro proyecto sin perdernos entre miles de archivos diferentes.
Una carpeta contiene los archivos CSS:  bootstrap.css  y  bootstrap responsive.css  (más sus respectivas versiones minimizadas). Tales archivos  se utilizan para el estilo de todos los elementos de la web y su estructura.
Una carpeta contiene los archivos JS :   bootstrap.js  (también disponible en la versión minimizada) que define todas las clases y los plugins disponibles.
Otra carpeta contiene las imágenes, dos  sprites  utilizados para los iconos de los botones, menús, etc. Las dos imágenes son la misma, la única diferencia es el color de los iconos que se han hecho disponibles en versión en blanco y gris.

 

¿Qué herramientas están disponibles?

Las herramientas disponibles se dividen en cuatro áreas principales:

  • Scaffolding : cómo sugiere el término (en Inglés significa andamio) en esta categoría hay herramientas que nos permiten crear la estructura de la aplicación web a desarrollar. Se incluyen en esta zona todas las reglas CSS con las que hacer que el diseño de la página, las columnas que componen la rejilla o layout del sistema.
  • Base CSS  : La categoría incluye una variedad de estilos para todos los elementos HTML de la página, como las diferentes cabeceras (h1, h2, …), párrafos, tablas, y todos los elementos del formulario. Esta categoría también contiene un conjunto de clases CSS para hacer botones cómodamente y un conjunto de 140 iconos proporcionados por  Glyphicons . La biblioteca hace un uso extensivo de las nuevas normas introducidas en la versión de CSS3 para asegurar una mejor experiencia del usuario y garantiza una correcta prestación del navegador un poco "más obsoleto".
  • Componentes  : estamos empezando a profundizar en las herramientas más interesantes y útiles para Twitter  Bootstrap. Pertenecen a esta categoría, de hecho, el menú desplegable, el botón desplegable y los grupos de botones con los que podemos crear menús horizontales. Todos por supuesto se realiza a través de unas pocas líneas de código.
  • Javascript  : Vemos cómo permitir a los usuarios interactuar con todos los elementos anteriores mediante los eventos del ratón o la pantalla tactil. Luego veremos otras herramientas útiles, tales como ventanas modales, la popover, el acordeón, las pestañas y mucho más.
 

Cómo incluir Twitter Bootstrap en nuestros proyectos?

Incluir la biblioteca en un proyecto es muy simple. Como hemos visto anteriormente en este artículo, basta con incluir los archivos descargados en sus respectivas carpetas.  importante no olvidar operación es cargar  jQuery  si no se ha utilizado en el proyecto  . Un ejemplo clásico de la estructura básica de nuestra página podrían ser el siguiente:

<!DOCTYPE html> <html> 
<head> <title>Twitter Bootstrap
</title> <!-- Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
<h1>Hello, world!</h1> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="js/bootstrap.min.js"></script>
.....
</body> </html>

En el ejemplo, los archivos de JavaScript se incluyen antes de la etiqueta de cierre  <body>  . Esto permite acelerar la carga de la página, pero si lo prefieres, también puedes incluir archivos dentro de la etiqueta  head  como normalmente se hace con todos los archivos JS.

 

Algunos ejemplos

Cómo crear un diseño Adaptable? El primer ejemplo que queremos mostrar es el de la  creación de un diseño adaptable  con la que podremos hacer nuestras páginas sin ningún esfuerzo para todos los navegadores y todos los dispositivos móviles. En la  página de ejemplo  he incluido imágenes a resoluciones diferentes que utilizan la cuadrícula de Bootstrap. El siguiente código muestra un pequeño fragmento con el que podemos hacer un diseño de 3 columnas con miniaturas:

    <div class="row-fluid"> 
     <ul class="thumbnails"> 
      <li class="span4"> 
       <a class="thumbnail" href="#"><img src="http://lorempixel.com/400/250/abstract/" alt="" /> </a> 
      </li> 
      <li class="span4"> 
       <a class="thumbnail" href="#"> <img src="http://lorempixel.com/400/250/transport/" alt="" /> </a> 
      </li>
      <li class="span4"> 
       <a class="thumbnail" href="#"> <img src="http://lorempixel.com/400/250/nighlife/" alt="" /> </a> 
      </li> 
     </ul> 
   </div>

Sin entrar en detalles, por ahora observamos simplemente  que asignando la clase de row-fluid al div contenedor y utilizando la clase  Spanx  (donde X es el número de columnas de la cuadrícula que el elemento debe ocupar) podemos realizar nuestro Layout de 3 columnas . En nuestro caso, la X tiene un valor de 4, porque queremos 3 columnas: 12/3 =  4  .

 

Button, dropdown y progress bar

En este  último ejemplo  queremos mostrar, también, cómo es de fácil crear botones, menús desplegables y las barras de progreso.

    <div class="btn-group"> 
     <button class="btn">File</button> 
     <button class="btn">Modifica</button>
     <button class="btn">Visualiza</button> 
     <button class="btn">Instrumentos</button> 
     <button class="btn">?</button>
    </div>

El siguiente fragmento de código anterior le permite crear un grupo de botones. Incluso en este caso, con sólo dos clases asignadas a los elementos comunes de HTML  hemos creado algo que de otro modo habría tenido un montón de trabajo con la hoja de estilos.

 

Como está estructurado Bootstrap y cuales son los estilos de base?

Bootstrap utiliza algunos elementos de HTML y las reglas CSS que requieren el uso de HTML5 DOCTYPE.
Cada documento que integra la biblioteca requiere un encabezado similar al siguiente:

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

El estilo básico lo da   Normalize.css  , una alternativa muy interesante al CSS  más común, que nos permite sacar el máximo provecho a las nuevas características introducidas por HTML5.

 

Cómo usar el Grid System (cuadrícula o rejilla) del Bootstrap de Twitter?

La cuadrícula / rejilla proporcionada por  Bootstrap es muy fácil de usar y muy sólida. La cuadrícula se basa en  12 columnas  y cubre un área de  940 píxeles  . Veremos más adelante que en función del dispositivo utilizado y resolución el ancho oscila entre 724px  y  1170px  .
Todo el contenido de la página que se gestiona a través del sistema de cuadrícula tiene que estar incluido dentro de un div con la clase de  container  que se ocupa de centrar el contenido de la página y establecer el ancho predeterminado. Dentro del container, antes de establecer el número de columnas que deseamos utilizar para lograr nuestra disposición, tenemos que establecer otro div, esta vez con la clase de  row  . Dentro de este último div vamos a implementar nuestro diseño actual. El espacio ocupado dentro de la cuadrícula se establece a través de la clase  Spanx  donde  X  indica el número de columnas que se utilizan. Para hacer un diseño simple de dos columnas, podemos usar un código como el siguiente:

 <div class="container">
  <div class="row">

    <div class="span4"> Sidebar  </div>
    <div class="span8">  Container  </div>   </div>
 </div>

En el ejemplo anterior se utilizó un div que ocupará cuatro columnas de la barra lateral y un segundo para el contenido que va a utilizar el espacio de 8 columnas. Debemos siempre asegurarnos de que la suma de la div no exceda de 12 (8 +4 = 12 en nuestro caso) con el fin de evitar resultados desagradables en nuestro diseño. Obviamente, el uso de la cuadrícula no se limita sólo al diseño, sino también el interior: loselementos pueden estar dispuestos de la misma manera. El único inconveniente es que hay que utilizar  siempre  una nueva  clase row  antes de usar otros elementos con clase  Spanx  . En la práctica, no se puede tener dos divs con clase  Spanx  uno entro de otro sin un div con clase  row  que los divida. El div con la clase   row  es necesario eliminar el margen izquierdo, que se ajusta automáticamente por el   Spanx  . He aquí un ejemplo para aclarar el concepto:

    <div class="container"> 

    <div class="row"> 
      <div class="span4"> Sidebar </div> 
      <div class="span8">
        <div class="row"> 
          <div class="span3"> 3 columnas </div> 
          <div class="span2"> 2 columnas</div>
          <div class="span3"> 3 columnas </div> 
         </div> 
       </div> 
      </div> 

    </div>

Como hemos visto, los elementos contenidos en el div con clase  span8  deben iguales a la suma del contenedor. En nuestro caso 3 + 2 + 3 = 8.
En caso de necesidad también podemos decidir el espacio entre los elementos dentro de la cuadrícula. 
Si por ejemplo tenemos dos elemento de 3 columnas cada una, y queremos espaciarlos entre ellos de 2 columnas, podemos usar la clase  offsetX  donde  X  en este caso indica el número de columnas.

<div class="container"> 
<div class="row"> 
  <div class="span4"> Sidebar </div>
  <div class="span8">
    <div> 3 columnas </div>
    <div> 3 columnas, offset de 2 columnas </div>
  </div>
</div>
</div>

Podemos ver en los ejemplos descritos anteriormente funciona en  el siguiente enlace  .

 

Cómo utilizar una cuadrícula fluida?

Cuanto dicho hasta ahora se puede utilizar para reproducir un layout del todo líquido, que no utiliza un tamaño fijo.

Para "activar" el diseño fluido es suficientemente con añadir el término "-fluid" al div  container y row  . De esta manera, todas las reglas vistas hasta ahora siguen funcionando, la única diferencia que tenemos es que ahora nuestra página se adapta completamente a la pantalla del dispositivo.

    <div class="container-fluid"> 
    <div class="row-fluid"> 
      <div class="span4"> Sidebar </div> 
      <div class="span8"> Contenido </div> 
    </div> 
    </div>

La principal diferencia con el tamaño de la cuadrícula sigue siendo la regla que va a definir el número de columnas que utilizan los elementos anidados. 
Hemos dicho anteriormente que la suma de los elementos interiores a un div  Spanx  debe resultar en el valor de la matriz o "padre". 
En el caso de las rejillas fluidas, sin embargo, la operación es diferente. Los elementos anidados deben tener como resultado final el valor  12  .
El ejemplo visto para las rejillas fijas, se convierte, en nuestro caso la siguiente:

<div class="container-fluid"> 
  <div class="row-fluid"> 
    <div class="span4"> Sidebar </div>
    <div class="span8">
       <div class="row-fluid">
         <div class="span5"> 5 colonne </div>
         <div class="span2"> 2 columnas</div>
         <div class="span5"> 5columnas</div>
      </div>
     </div>
   </div>
 </div>

 

 También vemos en este caso un  ejemplo  de cuanto se describe.
 

Cómo diseñar un diseño sensible?

El sistema de red proporcionada por Bootstrap Twitter responda plenamente. Esto quiere decir que podemos hacer que nuestro sistema de diseño adaptable y cualquier dispositivo con conexión a internet.
Si probamos de cambiar el tamaño de la página o abrirlo con diferentes dispositivos, veremos cómo el diseño se adapta automáticamente.
La anchura del contenedor no será de más de  940px  pero tendrá un tamaño variable entre  1170px  y  724px  dependiendo del dispositivo y el tamaño de la ventana.
Vamos a ver el tamaño de las columnas y  el margen entre las columnas en diferentes resoluciones.

Dispositivo Ancho Ancho de columna Gutter ancho
Monitor grande 1200px y sup. 70px 30px
Defecto  980pxy sup. 60px 20px
Tablets portrait 768px y sup.  42px  20px
Tablet electrónico móvil  767px y inf. Ancho fluido
Móvil  480px y inf. Ancho fluido

Bootstrap implementa el diseño adaptable de nuestras páginas mediante media-queries.
Mirando en el código, vemos que tenemos disponibles 4 estilos:

/* Large desktop */
@media (min-width: 1200px) { ... } 
/* Portrait tablet to landscape and desktop */ 
 @media (min-width: 768px) and (max-width: 979px) { ... } 
/* Landscape phone to portrait tablet */
 @media (max-width: 767px) { ... }
/* Landscape phones and down */
 @media (max-width: 480px) { ... }

Para ayudar al desarrollo de las tabletas y móviles Por último, también tenemos clases CSS a través de la cual podemos mostrar y / o ocultar elementos en aparatos selectos. Vamos a ver lo que son:

  Clase   Mobile   Tablets   Desktop
.visible-phone Visible Escondido Escondido
.visible-tablet Escondido Visible Escondido
.visible-desktop Escondido Escondido Visible
.hidden-phone Escondido Visible Visibile
.hidden-tablet Visible Escondido Visible
.hidden-desktop Visible Visibile Escondido

 

Conclusiones

Facilidad de uso, velocidad de desarrollo,  reutilización del código, aplicaciones  cross-browser.