Tutorial Bootstrap 2 Básico - Maquetación web responsive

En la mayoría de ocasiones los programadores necesitamos que una web esté diseñada de un modo responsive, es decir, que pueda adaptarse perfectamente a múltiples tamaños de pantalla: ya sea móvil, tablet o escritorio. Si además pensamos en un diseño y estilo novedoso para que el usuario se sienta cómodo navegando…una sencilla solución y que nos puede servir de mucha ayuda es utilizar la herramienta framework de twitter llamada: Bootstrap .En este post adjunto un sencillo tutorial bootstrap con los primeros pasos esenciales para comenzar a funcionar.

Bootstrap nos permite maquetar nuestra web y darle una apariencia más novedosa y moderna, además de este módo conseguiremos adaptarla perfectamente a todos los tamaños y resoluciones de pantalla.

.En primer lugar descargamos el framework de bootstrap desde la siguiente dirección:
http://getbootstrap.com/2.3.2/

.A continuación vemos la estructura de directorios resultante que nos hemos descargado:

Creamos el fichero index.html en la raiz /
Creamos el fichero miestilo.css dentro del directorio /css.
Descargamos esta imagen y la metemos con el mismo nombre dentro del directorio /img

Dentro del fichero miestilo.css introducimos este código:

@charset "UTF-8";
/* CSS Document */
body{
font-family: verdana, arial;
background-color: #F2F2F2;
}
#general{

margin-top:20px;
background-color: #FFF;
border-radius:10px;
padding: 5px;
}
#encabezado{

height: 90px;

padding: 5px;

}
#logo{
color:#FF4000;
text-shadow: 0.1em 0.1em 0.05em #333;

}
#menu
{
margin-top:20px;
float:right;
}

#izquierda
{
color:#fff;
min-height: 300px;
background: #fff url(../images/bghead.PNG) repeat-x;
border-radius:5px;
border: 1px solid #848484;

}
#izquierda h3
{

text-align: center;
color:#fff;
}
#derecha h3
{
text-align: center;
color:#fff;
}
#derecha{
color:#000;
min-height: 300px;
background: #fff url(../images/bghead.PNG) repeat-x;
border-radius:5px;
border: 1px solid #848484;
padding: 10px
}
#footer
{
background: #0489B1;
height: 50px;
text-align: center;
margin-top: 10px;
color:#fff;
}

Ahora editamos el fichero index.html, en primer lugar agregamos los links que apuntan a los ficheros css y js de bootstrap que vamos a utlizar:

<link rel="stylesheet" href="css/bootstrap.css" media="all" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" media="all" />
<link rel="stylesheet" href="css/miestilo.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

Después añadimos la función que nos va a permitir diseñar un menu desplegable de tipo bootstrap:

<script type="text/javascript">
$(document).ready(function()
{
$('.dropdown-toggle').dropdown();
}
);
</script>

Por último vamos a meter dentro de las etiquetas body el código fuente html prediseñado de bootstrap que llama a los class y los divs definidos en el miestilo.css, así pues dentro del body agregamos esto:

<div class="container" id="general">
<div id="encabezado"class="row">

<div class="span4" id="logo"><h3>LOGO DE MI EMPRESA</h3></div>

<div id="menu" class="span8">
<ul class="nav nav-pills">
<li class="active" style="width:150px"><a href="#">Home</a></li>
<li class="dropdown" id="menu1">
<a style="background:#CEECF5"class="dropdown-toggle" data-toggle="#fat" href="#menu1">
Empresa
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">uno</a></li>
<li><a href="#">dos</a></li>
<li class="divider"></li>

<li><a href="#">Staff</a></li>

</ul>

</li>
<li class=""><a style="background:#CEECF5"href="#">Portafolio</a></li>
<li class="" ><a href="#" style="background:#CEECF5">Contacto</a></li>

</ul>

</div>
</div>
<div id="cuerpo" class="row">

<div id="izquierda" class="span4">
<h3>Izquierda</h3>
<ul class="nav nav-tabs nav-stacked">
<li class="active">
<a href="#">Inicio</a>
</li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Contacto</a></li>
</ul>
<ul class="nav nav-list"><br/>
<li class="nav-header">
Menu vertical
</li>
<li class="active">
<a href="#">Inicio</a>
</li>

<li><a href="#">Empresa</a></li>
<li>
<li> <a href="#"><li class="icon-book"></li>uno</a></li>
<li> <a href="#"><li class="icon-book"></li>dos</a></li>
<li> <a href="#"><li class="icon-book"></li>Staff</a></li>

<li><a href="#">Galería</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div id="derecha"class="span7">
<h3>Contenido</h3>
<br/>
<h1>Bienvenidos a nuestra nueva pagina web!</h1>
<p>
Prueba de maquetación con twitter bootstrap
</p>
<p><a class="btn btn-primary btn-large">Mas info</a></p>
</div>

</div>
<div id=""class="row">

<div id="footer" class="span12">
<span>Mi Primer Tema Bootstrap</span><br/><b>Sitio maquetado con Twitter Bootstrap</b>
</div>
</div>
</div>

Una vez hecho todo esto procedemos a abrir nuestra nueva web desde cualquier navegador desde una pantalla y resoluciones de escritorio y observamos que queda de la siguiente manera:

Si reducimos el tamaño de navegador y lo hacemos más estrecho para simular que estamos navegando desde un smartphone o tablet, observamos que el diseño web se va adaptando perfectamente al ancho y alto de la pantalla, ya sea tamaño smartphone o tablet, siendo de esta manera un diseño web responsive: