Introducción a Twitter Bootstrap
0. Índice de contenidos.
- 1. Introducción.
- 2. Entorno.
- 3. Instalación
- 4. Definiendo el grid
- 5. Componentes básicos
- 6. Componentes avanzados
- 7. Referencias
- 8. Conclusiones
1. Introducción.
Actualmente cuando montamos un proyecto nuevo no nos planteamos hacerlo a las bravas, solemos apoyarnos en frameworks como Spring que nos aportan patrones de diseño y contenedores para la creación e inyección de dependencias, inversión de control, etc. o utilizamos frameworks de persistencia tipo MyBatis o Hibernate para trabajar con la base de datos. Para la parte front utilizamos también frameworks tipo Struts, JSF o Spring MVC y trabajamos con el DOM a través de jQuery o frameworks Javascript similares. ¿Por qué entonces no utilizamos algo parecido para las hojas de estilo?.
Si empezamos un proyecto nuevo, o queremos mejorar esas interminables hojas de estilo con cientos de selectores, y los requisitos del proyecto nos lo permiten, os recomiendo utilizar Twitter Bootstrap, una plantilla CSS con un montón de funcionalidades: layouts para crear interfaces ‘responsive’, listas, formularios, botones, menús, desplegables, etc.
En este tutorial vamos a ver cómo utilizar Twitter Bootstrap y haremos un repaso por sus principales componentes.
2. Entorno.
El tutorial se ha realizado con el siguiente entorno:
- MacBook Pro 15′ (2.4 GHz Intel Core i5, 8GB DDR3 SDRAM).
- Twitter Bootstrap 2.3.2
- jQuery 2.1.3
3. Instalación
Descargamos Twitter Bootstrap de la web oficial. Nos descargamos el .zip y lo descomprimimos. Tiene el siguiente contenido:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
bootstrap/ |-- css/ | |-- bootstrap.css | |-- bootstrap.min.css | |-- bootstrap-responsive.css | |-- bootstrap-responsive.min.css |-- js/ | |-- bootstrap.js | |-- bootstrap.min.js |-- img/ |-- glyphicons-halflings.png |-- glyphicons-halflings-white.png |
Son tres carpetas: los CSS, los archivos JS y las imágenes en sus versiones de desarrollo y producción. Un aspecto a tener en cuenta es que Bootstrap requiere jQuery por lo que debemos incluirlo en nuestro proyecto. Nos lo descargamos de la web oficial.
Creamos una página básica que incluya lo siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Mi primera web con Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"/> <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"/> </head> <body> <h1>Mi primera web con Bootstrap</h1> <script src="/wp-content/uploads/tutorial-data/js/jquery-2.1.3.min.js"></script> <script src="/wp-content/uploads/tutorial-data/js/bootstrap.min.js"></script> </body> </html> |
4. Definiendo el grid
El grid de la web o también llamado scaffolding de la página debemos definirlo bien ya que una vez que tengamos definidas las zonas de la web será más sencillo añadir el contenido. Hay que tener muy en cuenta que un gran número de usuarios se conectan ya a Internet desde dispositivos móviles con diferentes resoluciones y tamaños de pantalla por lo que siempre debemos tener presente que nuestra web se debe ver bien en múltiples dispositivos.
El grid de una web se define utilizando 12 columnas como máximo, si se ve la web desde un PC por ejemplo. A medida que reducimos el tamaño de la pantalla iremos quitando columnas al grid.
Para usar los tamaños de cada una de estas columnas lo especificamos con span[numero]. Lo suyo será incluir el grid dentro de un contenedor. Los ‘fluid’ utilizan porcentajes en lugar de pixels fijos para determinar los anchos por lo que es más recomendable para que se vea bien en múltiples dispositivos.
|
1 2 3 4 5 6 7 |
<div class="container-fluid"> <div class="row-fluid"> <div class="span2">Contenido columna tamaño 2</div> <div class="span3">Contenido columna tamaño 3</div> <div class="span5">Contenido columna tamaño 5</div> </div> </div> |
5. Componentes básicos
Twitter Bootstrap dispone de un catálogo de componentes muy amplio con todo lo necesario para crear interfaces web. Muestro alguno de los más comunes:
Tablas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<table class="table table-striped"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> |
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Formularios
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputUser">Usuario:</label> <div class="controls"> <input type="text" id="inputUser" placeholder="usuario"> </div> </div> <div class="control-group"> <label class="control-label" for="inputPassword">Contraseña</label> <div class="controls"> <input type="password" id="inputPassword" placeholder="contraseña"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> Recordarme </label> <button type="submit" class="btn">Entrar</button> </div> </div> </form> |
Pestañas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1">Pestaña 1</a></li> <li><a href="#tab2">Pestaña 2</a></li> <li><a href="#tab3">Pestaña 3</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>Sección 1</p> </div> <div class="tab-pane" id="tab2"> <p>Sección 2</p> </div> <div class="tab-pane" id="tab3"> <p>Sección 3</p> </div> </div> </div> |
Sección 1
Sección 2
Sección 3
Barra de navegación
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="navbar"> <div class="navbar-inner"> <div class="nav-collapse collapse"> <ul class="nav"> <li><a href="#">Quiénes somos</a></li> <li><a href="#">Formación</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle">Tutoriales <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Spring</a></li> <li><a href="#">BPM</a></li> <li><a href="#">Maven</a></li> </ul> </li> </ul> </div> </div> </div> |
Alertas
|
1 2 3 |
<div class="alert alert-success"> <h4>Success</h4> </div> |
Success
|
1 2 3 |
<div class="alert alert-block"> <h4>Warning</h4> </div> |
Warning
|
1 2 3 |
<div class="alert alert-error"> <h4>Error</h4> </div> |
Error
|
1 2 3 |
<div class="alert alert-info"> <h4>Info</h4> </div> |
Info
Barra de progreso
|
1 2 3 |
<div class="progress progress-striped active"> <div class="bar"></div> </div> |
6. Componentes avanzados
Algunos componentes un poco más avanzados que también se usan a menudo en las aplicaciones web:
Ventana modal
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<a href="#myModal" class="btn">Abrir ventana modal</a> <div id="myModal" class="modal hide fade"> <div class="modal-header"> <h3 id="myModalLabel">Alerta</h3> </div> <div class="modal-body"> <p>Cuerpo de la ventana modal</p> </div> <div class="modal-footer"> </div> </div> |
Tooltip
|
1 |
<a id="link-tooltip">Texto con tooltip</a> |
Acordeón
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" href="#collapseOne"> Panel 1 </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Contenido del panel 1 </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" href="#collapseTwo"> Panel 2 </a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div class="accordion-inner"> Contenido del panel 2 </div> </div> </div> </div> |
Carrusel
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li class="active"> <li> <li> </ol> <div class="carousel-inner"> <div class="active item"> <img src="/wp-content/uploads/tutorial-data/twitter-bootstrap/img/soporte-desarrollo-cohete-peque.png" alt="Soporte a desarrollo" title="Soporte a desarrollo"> </div> <div class="item"> <img src="/wp-content/uploads/tutorial-data/twitter-bootstrap/img/software-a-medida-herramientas-180x180.png" alt="Software a medida" title="Software A Medida Herramientas"> </div> <div class="item"> <img src="/wp-content/uploads/tutorial-data/twitter-bootstrap/img/Planta_Verde.png" alt="Formación" title="Formación"> </div> <div class="item"> <img src="/wp-content/uploads/tutorial-data/twitter-bootstrap/img/headhunting-cv-180x180.png" alt="Headhunting" title="Headhunting"> </div> </div> <a class="carousel-control left" href="#myCarousel">‹</a> <a class="carousel-control right" href="#myCarousel">›</a> </div> |
7. Referencias
- Webs de ejemplo: http://expo.getbootstrap.com/
- Plantillas: http://bootstrapzero.com/, http://startbootstrap.com/, https://wrapbootstrap.com/
5. Conclusiones.
La utilización de Twitter Bootstrap aporta múltiples ventajas que ayudan y facilitan la construcción de interfaces web ahorrando mucho esfuerzo.
Todo el que haya hecho una web ‘responsive’ sabe el trabajo que lleva que se vea bien en múltiples dispositivos. Con Twitter Bootstrap ya tenemos bastante camino recorrido ya que nos aporta funcionalidades para esta tarea. Y todo ello ha sido concebido para que sea fñcil de usar y compatible con un gran número de navegadores.
Espero que te haya sido de ayuda.
Un saludo.
Juan
Buen post!