Twitter bootstrap es un framework en CSS para realizar un montón de cosas, y al que vamos a dedicar unas cuantas entradas. Y es que Twitter, al igual que Facebook, o Google, son compañias cuyos proyectos “alternativos” deben ser estudiados con detenimiento, sobre todo por parte de los desarrolladores.
Empezamos
Para descargar Twitter Bootstrap, hay que ir a esta dirección: twitter.github.com/bootstrap, y nos descargamos un fichero que tiene 2 directorios: css, y js, así que creamos un directorio donde incluimos los 2 subdirectorios.
Ahora necesitamos una simple plantilla para empezar a conocer esta libreria, haciendo referencia a twitter bootstrap, aunque adicionalmente, vamos a incluir una librería, html5shiv, para eliminar algunos problemas con IE, y también respond.js. Aquí tienes la propuesta del propio Bootstrap, y aquí la que yo usaré en varios ejemplos.
<!DOCTYPE html>
<html>
<!-- version 1.0.2 para la versión 3 de Twitter Bootstrap -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Manejando datos - Probando Twitter Bootstrap</title>
<!-- Hojas de Estilo -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header class="pagination-centered">
<h1>Probando Twitter Bootstrap desde Manejando datos</h1>
</header>
<section>
<!-- Escriba aquí su código -->
</section>
<footer>
<h6>
Creado desde <a target="_blank" href="http://www.manejandodatos.es">Manejando datos</a>
</h6>
</footer>
<!-- JavaScript plugins (requires jQuery) -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/html5shiv.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Optionally enable responsive features in IE8 -->
<script src="js/respond.js"></script>
</body>
</html>
La libreria respond.js la puedes descargar aquí: github.com/scottjehl/Respond.
NOTA: Empecé este tutorial con la versión 2, pero actualizo a la 3, que es la última. Las novedades las teneis aquí (en inglés).
Novedades de la versión 3
Hace unos cuantos días se publicó la version 3 de este framework, que incluye bastantes novedades:
- Mejoras en los botones
- Los graphicons ya no forman parte del framework, sino que son un plugin a añadir (antes venía incluido), y se convierten en la versión 1.0 de iconos, siendo ahora un proyecto independiente de TB.
- Un nuevo sistema de grilla
- Paneles contextuales
- Eliminación de las clases “control”, especialmente diseñadas para los formularios
Como enlace adicional, es muy interesante la propuesta de DivShot para BT3, ofrecendo un editor para utilizarlo: http://www.divshot.com/features
Creando el formulario
Nada mejor que probar los estilos de twitter con unos pequeños ejemplos. Así que, vamos a incluir 3 formularios:
Formulario inicial
Aquí podeis verlo, y ver el código, donde aún no he incluido ninguna clase.
Probando estilos en formularios
El primero de los ejemplo es mejorar los aspectos visuales de los formularios, partiendo del ejemplo anterior: un simple formulario, con una etiqueta, una caja de texto, y dos botones.
La clase well permite dar un fondo al elemento sobre el que aplica, en este caso, el formulario. La clase span3 (exactamente igual con span1, span2, … ,span6, .. hasta span12) permite aumentar o disminuir el ancho del elemanto sobre el que se aplica.
Para los botones usaremos la clase btn, aunque podemos hacer uno el principal agregando la clase “btn-primary“, y tendremos el mismo botón pero sobre fondo azul (el típico de twitter). Se han incluido más clases para cambiar el color de los botones, aumentando las posibilidades.
Si queremos hacer cajas de texto con bordes redondeados, usaremos la clase “search-query“.
Por último, si queremos todos los elementos del formulario en la misma línea, cambiamos a la clase “form-inline“, y todo cambia! Además, debemos incluir la clase form-control en todas las etiquetas input.
Y la guinda, es usar la clase pagination-centered para centrar todo el contenido tanto del header como del footer, y que incorporamos a la plantilla.
Puedes verlo aquí.
Forms in Twitter Bootstrap
Y con esta breve introduccion, damos por concluida esta entrada, esperando que os sea de utilidad!
Otras entradas relacionadas con Twitter Boostrap, son: