Bootstrap

Diseando tu nuevo proyecto web con
Bootstrap 2.0
34 comentarios
Ricardo Borillo 23 de febrero de 2012 | 09:00
Uno de los principales quebraderos de cabeza con los que se encuentra un desarrollador a la hora de
iniciar un nuevo proyecto web, es la creacin de un layout bsico sobre el que trabajar.
Adicionalmente, si queremos que nuestro diseo sea capaz de adaptarse a los distintos navegadores,
configuraciones o incluso dispositivos, la seleccin de un framework de apoyo puede ahorrarnos
mucho tiempo y esfuerzo.
Por desgracia, en la actualidad sigue siendo necesario un profundo conocimiento de los distintos
estndares y de como estos se aplican en cada navegador. De nuevo, la adopcin de un framework
que nos guie en la aplicacin del conjunto necesario de buenas prcticas, puede ser crucial.
Con el fin de cubrir estas necesidades surgen frameworks como 960gs o Bootstrap. En este artculo
nos centraremos en este ltimo, el cual ha sido desarrollado por Twitter y cuya versin 2.0 ha sido
liberada recientemente.
Funcionalidades disponibles
Bootstrap 2.0 es un framework diseado para simplificar el proceso de creacin de diseos web.
Para ello nos ofrece una serie de plantillas CSS y de ficheros JavaScript, los cuales nos permiten
conseguir:
Interfaces que funcionen de manera brillante en los navegadores actuales, y correcta en
los no tan actuales.
Un diseo que pueda ser visualizado de forma correcta en distintos dispositivos y a
distintas escalas y resoluciones.
Una mejor integracin con tus las libreras que sueles usar habitualmente, como por
ejemplo jQuery.
Un diseo slido basado en herramientas actuales y potentes como LESS o estndares
como CSS3/HTML5
Estructura bsica de nuestro proyecto

Una vez descargada la distribucin de Bootstrap desde la pgina principal del proyecto, podemos
centrarnos en crear un esqueleto bsico sobre el que empezar a trabajar:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Nuevo proyecto con Bootstrap 2.0</title>
<meta name="description" content="Artculo en GenbetaDev sobre Bootstrap
2.0">
<meta name="author" content="Ricardo Borillo">
<![if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
body { padding-top: 60px; }
</style>
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
De esta plantilla mnima, podemos destacar distintos aspectos. El primero de ellos es la inclusin de
HTML Shim, el cual se encarga de que Internet Explorer reconozca los tags HTML5 y nos permita
asignarles estilos.
Por otra parte, en la cabecera deberemos incluir las CSS que distribuye Bootstrap y, al final de body
para que la pgina se cargue ms rpido, veremos el resto de recursos JavaScript que completan el
despliegue.
Si nos centramos ya en contenido, podemos comenzar nuestro ejemplo con una barra superior que
me permita definir los mens generales del sitio:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Genbeta Dev</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Bio</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</div>
A continuacin, simplemente aadimos algo de contenido al cuerpo de la pgina:

<h1>Ejemplo de Bootstrap para Genbeta Dev</h1>
<p>Plantilla ejemplo para el desarrollo de un proyecto web.</p>
</div> <! /container >
El resultado obtenido ser el siguiente:
Creacin del layout de la pgina

La definicin del layout de la pgina es uno de los puntos fuertes de Bootstrap. La nueva
disposicin en base a 12 columnas permite una gran flexibilidad a la hora de crear nuestras
presentaciones.
Para verlo en accin, vamos a tomar como base el ejemplo que preparbamos en el apartado
anterior y pondremos nuestro cdigo dentro del bloque cuyo atributo class sea container. En el
ejemplo vamos a crear una disposicin sencilla que muestre una regin superior seguida de varios
bloques ms pequeos para presentar distintos productos de nuestra empresa.
Para completar este esquema, la regin principal puede seguir la siguiente distribucin:
<div class="hero-unit">
<h1>Bienvenidos a nuestra pgina!</h1>
<p>
Texto principal de bienvenida a nuestra pgina. Prueba a redimiensinar el
navegador y comprobar como se adapta el diseo al nuevo tamao.

</p>
<p><a class="btn btn-primary btn-large">Ms informacin</a></p>
</div>
En este simple marcado ya podemos distinguir toques de diseo interesantes. Por ejemplo, los
bloques que aaden la class hero-unit se presentan como un panel de bordes redondeados.
Adicionalmente, si nos fijamos en el enlace a ms informacin, veremos como Bootstrap lo
renderiza en forma de botn grande.
Y a continuacin, podemos aadir tres productos utilizando la distribucin de 12 columnas. Para
ello debemos tener una regin con el class row, la cual contendr a su vez otras regiones con la
identificacin del nmero de columnas que ocuparn (por ejemplo, span4 para definir un ancho de
cuatro columnas):
<div class="row">
<div class="span4">
<h2>Producto</h2>
<p>
Descripcin del producto presentado. Descripcin del producto presentado.
Descripcin del producto presentado.
</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
En el ejemplo que nos ocupa y para completar un ancho total de 12 columnas, deberemos tener tres
bloque identificados con un class span4.
Concluiremos nuestro primer marcado con un pie donde poder poner nuestra informacin de
contacto:
<footer>
<p>© Company 2012</p>
</footer>
Componentes adaptativos para un diseo fluido

Para completar el diseo del layout, podemos elegir entre un diseo adaptado a 940 pixels o intentar
que este pueda ser fluido.
Para ello Bootstrap nos ofrece varios recursos a tener en cuenta. Por una parte, la definicin de las
filas que habamos presentado se declaraban con el class row. Si deseamos hacer uso de la versin
fluida, tendremos que utilizar un class distinto:
<div class="row-fluid">
<div class="span4"></div>
<div class="span8"></div>
</div>
De igual forma, para definir las reas principales de la pgina podemos optar por etiquetar el bloque
principal con el class container como en los ejemplos, o de nuevo elegir la opcin fluida:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!Sidebar content>
</div>
<div class="span10">
<!Body content>
</div>
</div>
</div>
Por ltimo, si queremos que nuestra barra de herramientas principal se pueda adaptar a los cambios
en el ancho de navegador o a la renderizacin en otros dispositivos de menor ancho, aplicaremos la
siguiente construccin:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navcollapse">
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Genbeta Dev</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Bio</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</div>
</div>
Como podemos ver en el cdigo, se ha introducido un nuevo enlace con el class btn btn-navbar.
Este enlace, gracias a atributos extra definidos gracias a HTML5 (data-toggle y data-target), ser
mostrado cuando el layout de la pgina no permita visualizar las opciones textuales convencionales.
Este tipo de elementos nos ofrecen mucha versatilidad, ya que se adaptan a cualquier tamao y
resolucin. El mismo men pero ante un menor tamao se vera de la siguiente forma:
Responsive design
Por ltimo, si queremos asignar estilos especficos a nuestro diseo en funcin de la resolucin del
dispositivo en el que se est visualizando, Bootstrap nos ofrece un conjunto base de media queries
con el que podremos construir expresiones del tipo:
// Smartphones
media (max-width: 480px) { … }
// Tablets
media (max-width: 768px) { }
// Tablets apaisados y escritorio
media (min-width: 768px) and (max-width: 980px) { … }
// Escritorio grande
media (min-width: 1200px) { .. }
Para ello, es obligatorio incluir el siguiente meta en el head de nuestra pgina:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
En siguientes entregas abordaremos el resto de componentes que ofrece esta excelente librera y,
como no, sus plugins JavaScript integrables con jQuery :)
Diseando tu nuevo proyecto web con

Bootstrap 2.0 (II)
13 comentarios
Ricardo Borillo 1 de marzo de 2012 | 09:00
En el primer artculo de esta serie hablbamos de como crear una estructura bsica para nuestro
proyecto, definiendo un layout para el mismo. En esta ocasin nos centraremos en los componentes
ms representativos que podemos utilizar y en los plugins integrados con jQuery de que
disponemos en la versin 2.0 de Bootstrap.
Botones
Lo ms llamativo del uso de botones, es que pueden se aplicados tanto sobre enlaces, como en
etiquetas button/input simplemente aplicando la clase btn. A partir de esta definicin inicial,
podemos realizar varias customizaciones distintas:
Distinguir su propsito. Esto es posible aplicando distintos valores a la clase del elemento:
.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger o .btn-inverse.
<a class="btn btn-primary" href="">Primary</a>

<button class="btn btn-info" type="submit">Info</button>
<input class="btn btn-success" type="button" value="Success"/>
Variar su tamao. En esta ocasin, aplicando identificadores como: btn-large, .btn-small

o .btn-mini.
<a class="btn btn-large btn-primary" href="">Primary action</a>

<button class="btn btn-small btn-primary" type="submit">Primary action</button>
<input class="btn btn-mini btn-primary" type="button" value="Primary action"/>
Asignarle un icono. Gracias a toda una lista de iconos predefinidos, podemos aadir un
icono a los botones de forma sencilla.
<a class="btn btn-success" href="#">
<i class="icon-shopping-cart icon-white"></i>
Checkout
</a>
Dropdown
Como caracterstica adicional, es interesante explorar el uso de los dropdowns. Este tipo de
componente nos permite asociar un men desplegable a un botn, con el fin de mostrar un conjunto
de opciones de forma agrupada:
Para su implementacin, la estructura de marcado es un poco ms elaborada. Aqu teneis un

ejemplo de la misma:
<div class="btn-group">
<a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#">
Danger
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Formularios
Para comenzar con los formularios, hay que aclarar que sin aadir ningn marcado adicional,
Bootstrap har que nuestros formularios tengan un mejor aspecto visual. En cualquier caso, si
queremos sacarle todo el partido a las mejoras visuales que aporta, podremos seguir las guas que
detallamos a continuacin.
Layout
Comenzando por la disposicin de los elementos, Bootstrap nos permite una visualizacin vertical
de los mismos (con las etiquetas en la parte superior de los campos), inline, en forma de dilogo de
bsqueda o en horizontal (ms tradicional).
Estados y alertas
Con Bootstrap podemos remarcar ciertos elementos dentro del formulario gracias a las siguientes
clases:
focused. Permite destacar la introduccin de un elemento.
disabled. Desactivado de elementos.
control-group [error|success|warning]. Marcado de elementos de forma visual en verde,

rojo y amarillo como aviso de un estado concreto.
<div class="control-group error">

<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError"/>
<span class="help-inline">Please correct the error</span>
</div>
</div>
Plugins
Por ltimo en el artculo de hoy, vamos a hacer una pequea incursin en los plugins jQuery que
Bootstrap pone a nuestra disposicin.
Ventana modal
Es bastante habitual ver como ciertos componentes hacen uso del clsico efecto lightbox para
bloquear la pantalla de forma modal. En esta ocasin, Bootstrap acompaa a este efecto de una
animacin bastante vistosa que no puedes perderte.
Su definicin es bastante sencilla y slo requiere declarar la cabecera, el cuerpo y el pie de la

ventana:
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal"></a>
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<strong>Text in a modal</strong>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
lacinia </p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
Si queremos visualizar esta ventana que acabamos de definir, slo tenemos que aadir la accin
necesaria en algn botn del interfaz:
<a class="btn" data-toggle="modal" href="#myModal" >Run!!!</a>
Popover
Con el plugin de Tooltip como prerequisito, este plugin nos permite sacar ayudas contextuales
cuando pasamos por encima de ciertos elementos.
En esta ocasin, el plugin se apoya en los atributos data-* definidos en HTML5 para extender el
marcado:
<a href="#" class="btn btn-danger" rel="popover"
data-content="And here's " data-original-title="A Title">hover for

popover</a>

Bootstrap

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Bootstrap

Încărcat de

Drepturi de autor:

Formate disponibile

Diseando tu nuevo proyecto web con

Estructura bsica de nuestro proyecto

A continuacin, simplemente aadimos algo de contenido al cuerpo de la pgina:

El resultado obtenido ser el siguiente:

Creacin del layout de la pgina

navegador y comprobar como se adapta el diseo al nuevo tamao.

Componentes adaptativos para un diseo fluido

Para ello, es obligatorio incluir el siguiente meta en el head de nuestra pgina:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Diseando tu nuevo proyecto web con

<a class="btn btn-primary" href="">Primary</a>

Variar su tamao. En esta ocasin, aplicando identificadores como: btn-large, .btn-small

<a class="btn btn-large btn-primary" href="">Primary action</a>

<input class="btn btn-mini btn-primary" type="button" value="Primary action"/>

Para su implementacin, la estructura de marcado es un poco ms elaborada. Aqu teneis un

bsqueda o en horizontal (ms tradicional).

disabled. Desactivado de elementos.

control-group [error|success|warning]. Marcado de elementos de forma visual en verde,

<div class="control-group error">

Su definicin es bastante sencilla y slo requiere declarar la cabecera, el cuerpo y el pie de la

data-content="And here's " data-original-title="A Title">hover for

S-ar putea să vă placă și