20/2/2015
Crea interfaces web amigables con Twitter Bootstrap
Inicio
Quiénes somos
Formación
Comparador de salarios
Nuestros libros
Más
» Estás en: Inicio Tutoriales Crea interfaces web amigables con Twitter Bootstrap
Juan Alonso Ramos
Consultor tecnológico de desarrollo de proyectos informáticos.
Ingeniero en Informática, especialidad en Ingeniería del Software
Puedes encontrarme en Autentia: Ofrecemos de servicios soporte a desarrollo, factoría y
formación
Somos expertos en Java/J2EE
Ver todos los tutoriales del autor
Fecha de publicación del tutorial: 20150220
Introducción a Twitter Bootstrap
Tutorial visitado 9 veces Descargar en PDF
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
| | bootstrapresponsive.css
| | bootstrapresponsive.min.css
| js/
| | bootstrap.js
| | bootstrap.min.js
| img/
| glyphiconshalflings.png
| glyphiconshalflingswhite.png
Entra en Adictos a través de
Email
Contraseña
Entrar
Registrarme
Olvidé mi contraseña
Catálogo de servicios
Autentia
Síguenos a través
de:
Últimas Noticias
» 2015: ¡Volvemos a la oficina!
» Curso JBoss de Red Hat
» Si eres el responsable o líder
técnico, considérate
desafortunado. No puedes
culpar a nadie por ser gris
» Portales, gestores de
contenidos documentales y
desarrollos a medida
» Comentando el libro Startup
Nation, La historia del milagro
económico de Israel, de Dan
Senor & Salu Singer
Histórico de noticias
Últimos Tutoriales
» Experimenta con tu código
en Eclipse utilizando
Scrapbooks
» Curso de WatchKit ¡ahora
sólo 9 dólares!
» Cómo implementar una nube
de etiquetas con D3.js
» Test de servicios REST con
Spring MVC y Spring Test
» Introducción a React
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
http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=twitter-bootstrap
1/7
20/2/2015
Crea interfaces web amigables con Twitter Bootstrap
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=devicewidth, initialscale=1.0"/>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"/>
<link href="css/bootstrapresponsive.min.css" rel="stylesheet" media="screen"/>
</head>
<body>
<h1>Mi primera web con Bootstrap</h1>
<script src="js/jquery2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
?
Últimos Tutoriales del
Autor
» Cómo implementar una nube
de etiquetas con D3.js
» Servicios REST con Spring
MVC y AngularJS
» Introducción a Spring Social
» Paradigma publish/subscribe
con Spring Data Redis
» Soporte de Redis con
Spring: RedisTemplate
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="containerfluid">
<div class="rowfluid">
<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>
col 2
col 3
col 5
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
<table class="table tablestriped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
?
?
http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=twitter-bootstrap
2/7
Crea interfaces web amigables con Twitter Bootstrap
20/2/2015
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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>
#
1 Mark
Jacob
2
3
Larry
First Name
Last Name
Username
Otto
Thornton
the Bird
@mdo
@fat
@twitter
Formularios
<form class="formhorizontal">
<div class="controlgroup">
<label class="controllabel" for="inputUser">Usuario:</label>
<div class="controls">
<input type="text" id="inputUser" placeholder="usuario">
</div>
</div>
<div class="controlgroup">
<label class="controllabel" for="inputPassword">Contraseña</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="contraseña">
</div>
</div>
<div class="controlgroup">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Recordarme
</label>
<button type="submit" class="btn">Entrar</button>
</div>
</div>
</form>
<div class="tabbable">
<ul class="nav navtabs">
<li class="active"><a href="#tab1" datatoggle="tab">Pestaña 1</a></li>
<li><a href="#tab2" datatoggle="tab">Pestaña 2</a></li>
<li><a href="#tab3" datatoggle="tab">Pestaña 3</a></li>
</ul>
<div class="tabcontent">
<div class="tabpane active" id="tab1">
<p>Sección 1</p>
</div>
<div class="tabpane" id="tab2">
<p>Sección 2</p>
</div>
<div class="tabpane" id="tab3">
<p>Sección 3</p>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Usuario:
usuario
Contraseña
contraseña
Recordarme Entrar
Pestañas
Pestaña 1
Pestaña 2
Pestaña 3
Sección 1
Sección 2
Sección 3
Barra de navegación
1
2
<div class="navbar">
<div class="navbarinner">
?
?
?
http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=twitter-bootstrap
3/7
20/2/2015
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Crea interfaces web amigables con Twitter Bootstrap
<div class="navcollapse 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="dropdowntoggle" datatoggle="dropdown">Tutoriales <b class=
<ul class="dropdownmenu">
<li><a href="#">Spring</a></li>
<li><a href="#">BPM</a></li>
<li><a href="#">Maven</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Quiénes somos
Formación
Tutoriales
Spring
BPM
Maven
Alertas
1
2
3
<div class="alert alertsuccess">
<h4>Success</h4>
</div>
Success
1
2
3
<div class="alert alertblock">
<h4>Warning</h4>
</div>
Warning
1
2
3
<div class="alert alerterror">
<h4>Error</h4>
</div>
Error
1
2
3
<div class="alert alertinfo">
<h4>Info</h4>
</div>
Info
Barra de progreso
1
2
3
<div class="progress progressstriped active">
<div class="bar" style="width: 70%;"></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" role="button" class="btn" datatoggle="modal">Abrir ventana modal</a>
?
<div id="myModal" class="modal hide fade" tabindex="1" role="dialog" arialabelledby="myModalLabe
Crear cuenta
Comentarios de: Introducción a Twitter Bootstrap (0)
No hay comentarios