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:
- Un paquete completo compilado y minimizado listo para ser incluido en los proyectos;
- Un paquete completo con código fuente y la documentación completa para aquellos que quieren estudiar, modificar o complementar el núcleo con nuevas herramientas;
- Una Herramienta personalizable con la que se puede seleccionar sólo los componentes que se vaya a necesitar. Esta última opción ocupa menos espacio.
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>
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.