Maquetar una pagina web con Bootstrap de Twitter y Responsive Web Design

A la hora de realizar un diseño web, resulta siempre tedioso maquetar nuestra pagina , situaciones a veces algo complicadas como alinear divs, crear columnas entre otras cosas, pero felizmente han aparecido soluciones que nos han hecho la vida un poco mas sencilla a la hora de diseñar, una de estas herramientas y  de las mas sencillas de usar es sin lugar a dudas Bootstrap de Twitter, cuando Twitter libero este framework si hizo mas sencillo maquetar y darle una apariencia mas moderna a nuestro sitio, adapatarla con los estilos propios de esta red social tan famosa, y mas aun si nos da la posibilidad de que nuestra pagina pueda adaptarse a las distintas resoluciones de los dispositivos que tengan acceso a mi pagina, esto se logra con responsive design, que no es otra cosa que un diseño adaptativo o tambien llamado diseño liquido, asi que empecemos:

1.- En primer lugar especificaremos que utilizaremos la disposición de un layout en base a 12 columnas de bootstrap

Image

2. En Base a lo anterior , lo que debemos de hacer entonces es descargar este framework bootstrap de la siguiente pagina http://twitter.github.com/bootstrap/download.html#download

3. Una vez descargado el framework creamos nuestro proyecto con la siguiente estructura, yo utilice NetBeans 6.9.1 como IDE y lo hice en un proyecto de PHP y copiamos los archivos bootstrap-responsive.css y bootstrap.css a la carpeta css y creamos un archivo css llamado estilogeneral.css en la misma carpeta, y tambien copiamos el archivo boostrap.js en la carpeta js

Image

Image

descargamos esta imagen y la copiamos en la carpeta images

4.- Una vez que hemos creado la estructura como la imagen anterior , procedemos primero a programar la hoja de estilo estilogeneral.css

estilogeneral.css

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;
}

5.- Ahora procedemos a codificar el archivo index, y en primer lugar agregamos las referencias a los archivos que utilizaremos

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

6.- Luego agregamos la función que nos permite diseñar un menu desplegable o dropdown de bootstrap

<script type=”text/javascript” >
$(document).ready(function(){
$(‘.dropdown-toggle’).dropdown();

});

</script>

7.- Ahora entonces procedemos a agregar el siguiente codigo que estructura nuestra pagina

<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=”#”>Inicio</a></li>
<li class=”dropdown” id=”menu1″>
<a style=”background:#CEECF5″class=”dropdown-toggle” data-toggle=”#fat” href=”#menu1″>
Nosotros
<b class=”caret”></b>
</a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Misión</a></li>
<li><a href=”#”>Visión</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=”#”>Nosotros</a></li>
<li>
<li> <a href=”#”><li class=”icon-book”></li>Mision</a></li>
<li> <a href=”#”><li class=”icon-book”></li>Vision</a></li>
<li> <a href=”#”><li class=”icon-book”></li>Staff</a></li>

<li><a href=”#”>Portafolio</a></li>
<li><a href=”#”>Contacto</a></li>
</ul>
</div>
<div id=”derecha”class=”span7″>
<h3>Contenido</h3>
<br/>
<h1>Bienvenidos a nuestra pagina!</h1>
<p>
Esta Pagina ha sido maquetada con twitter bootstrap
</p>
<p><a class=”btn btn-primary btn-large”>Mas información</a></p>
</div>

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

<div id=”footer” class=”span12″>
<span>Todos los derechos reservados</span><br/><b>Sitio maquetado con Twitter Bootstrap</b>
</div>
</div>
</div>

8.- Ahora si hemos hecho todo bien nuestra pagina en la ventana de tamaño maximizado, es decir una pantalla resolución promedio de 1024 * 768 deberia verse asi

Image

9.- Si reducimos el tamaño de la ventana de nuestro navegador, nuestro diseño debería adaptarse a la resolución que va variando, esto quiere decir que nuestro diseño podria adaptarse a las pantallas de dispositivos moviles, en conclusión, hemos hecho un diseño web adaptativo sin hacer mucho esfuerzo  y todo más fácil gracias a bootstrap-responsive.

Eso es todo por ahora, recibo comentarios y criticas; si son constructivas ..gracias de antemano, hasta otro próximo tutorial 🙂

5 comentarios el “Maquetar una pagina web con Bootstrap de Twitter y Responsive Web Design

  1. Hola gran aporte! tengo una duda y es que aqui estas trabajando digamoslo asi con dos tipos de pantallas las de 1024x…px y las de smartphones que debe ser mas o menos 400x… px, pero que pasa cuando quiero que mi diseño se adapte tambien a una pantalla con resolución de 800×600 px?? como podria manejarlo con el framework bootstrap?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s