Conozcamos Twitter Bootstrap

Desde hace un tiempo, se ha escuchado hablar de Bootstrap, como un nuevo framework para el diseño y creación de aplicaciones y sitios web. El framework tiene plantillas, con tipografía, formularios, botones, cuadros, menús de navegación, etc. Todos ellos basados en HTML y CSS, así como en JavaScript. En este artículo, veremos su historia, sus características, así como un ejemplo de su uso.

Logo Bootstrap

Historia de Bootstrap

La primera vez que se usó en condiciones reales, fue durante la primera Hackweek, una semana de hacking por parte de Twitter. Su creador, Mark Otto, se lo mostró a sus colegas, enseñándoles cm acelerar el desarrollo de sus proyectos con el framework.

Antes, se usaban librerías, tan variadas y diferentes, que llevaban a inconsistencias, y también como una carga enorme en el mantenimiento de los proyectos.

El proyecto fue liberado como open source, en agosto del 2011. La versión más actual del framework es la versión 3.1.1.

Características de Bootstrap

Cuenta con soporte para HTML5 y CSS3, aunque incompleto para el primero. Es compatible con la mayoría de los navegadores web.

Esta compatibilidad se puede ver, sobre todo en los navegadores antiguos, en donde las propiedades usadas por CSS3 para las esquinas redondeadas, las sombras y los gradientes, son usadas también por el framework, de esta manera, extiende la funcionalidad de la herramienta, aunque en la práctica, no es requerido para su uso.

El framework es modular, básicamente son hojas de estilo LESS, lo cual le da variedad a la herramienta. También soporta diseños sensibles, con ajuste dinámico, el cual se adapta a al dispositivo usado (PC, Tablet, Smartphone).

Con el uso del estilo LESS, permite muchas funcionalidades extra, como son el uso de variables, funcione y operadores, selectores anidados, así como mixin.

Esto incluye, una disposición de cuadrilla de 940 px de ancho, aunque, siempre se puede optar por usar algo de ancho variable.

Incluye elementos reusables, como son: ruta de navegación, paginación, etiquetas, capacidades avanzadas, formato para mensajes, barras de progreso, y podría seguir y seguir.

Incluso, se puede encontrar una implementación del framework, llamado Dojo Bootstrap. Está hecha con el Dojo Toolkit, usando un port de los plug-ins del framework. Esta implementación usa el código Dojo al 100%.

Usando Bootstrap

La manera más fácil de empezar con el framework, es en una página HTML, descargando la hoja CSS de Bootstrap, y enlazarla en el HTML

Para poder usarse el módulo de JavaScript, debe de usarse la referencia de la librería jQuery en el HTML.

Incluso sin descargar la hoja CSS, puede enlazarse en vivo, para disminuir el tamaño de la página en el servidor, pero eso conlleva a un mayor tiempo de carga, en lo que el servidor busca la hoja en el internet, y empieza a usarla para cargar la página.

El uso de Bootstrap, puede hacer que una simple página, pase de ser una experiencia sosa y gris, a una llena de vida y color, sin la necesidad de agregar demasiado código.

En el siguiente cuadro, veremos un ejemplo de código, para una página, creado con el CSS de Bootstrap, con jQuery y JavaScript.


<!DOCTYPE html>

<html>

<head>

<title>Ejemplo de Twitter Bootstrap</title>

<!-- Se incluyen las hojas de estilo de bootstrap -->

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

</head>

<body>

<div class="container">

<h1>Search</h1>

<label>Ejemplo de un formulario sencillo de búsqueda.</label>

<!-- Formulario de búsqueda con un campo de entrada (input) y un botón -->

<form class="well form-search">

<input type="text" class="input-medium search-query">

<button type="submit" class="btn btn-primary">Buscar</button>

</form>

<h2>Results</h2>

<!-- Tabla con celdas de color de fondo alternantes y con marco -->

<table class="table table-striped table-bordered">

<thead>

<tr>

<th>#</th>

<th>Título</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>Lorem ipsum dolor sit amet</td>

</tr>

<tr>

<td>2</td>

<td>Consetetur sadipscing elitr</td>

</tr>

<tr>

<td>3</td>

<td>At vero eos et accusam</td>

</tr>

</tbody>

</table>

</div>

<!-- JavaScript se situa al final del documento para que la página cargue mas rápido -->

<!-- Optional: Incluir la librería de jQuery -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<!-- Optional: Incorporar los plug-ins de JavaScript de Bootstrap -->

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>

</body>

</html>

En este caso, todos vemos como el código, es limpio, rápido y fácil de localizar partes de el para modificarlo.

En la siguiente imagen, se puede ver el resultado del código, ya en el navegador, en este caso IE.