Tutorial Basic Bootstrap 2 €“ Model-making Web responsive

In the majority of occasions the programmers we needed that a Web is designed of a way responsive, that is to say, that can adapt perfectly to multiple sizes of screen: or movable, tablet or writing-desk. If in addition we thought about a design and novel style so that the user feels comfortable sailing€¦ a simple solution and that can serve to us as much help is to use the tool framework of twitter call: Bootstrap. In this post attached a simple tutorial bootstrap with the essential first steps to begin to work.

Bootstrap allows us to maquetar our Web and to give a more novel and modern appearance him, in addition to this way we will be able to perfectly adapt it to all the sizes and resolutions of screen.

. In the first place we unloaded framework of bootstrap from the following direction:


. Next we see the resulting structure of directories who we have unloaded:

We create the index.html file in the root/
We create the file miestilo.css within the /css directory.
We unload this image and we put it with the same name within the /img directory

Within the file miestilo.css we introduce this code:

@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;
to border: 1px solid #848484;} #izquierda h3 \ {text-align: to center;
color: #fff;} #derecha h3 \ {text-align: to center;
color: #fff;} #derecha \ {color: #000;
min-height: 300px;
background: #fff URL (. /images/bghead.PNG) repeat-x;
border-radius: 5px;
to border: 1px solid #848484;
padding: 10px} to #footer \ {background: #0489B1;
height: 50px;
text-align: to center;
margin-top: 10px;
color: #fff;}

Now we published the index.html file, in the first place we added the links that point at the files css and js of bootstrap that we are going to 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>

Later we add the function that is going to allow to us to design a drop-down menu of type bootstrap:

<script type= " text/Javascript " > $ (document) .ready (function () \ {$ (€˜.dropdown-toggle€™) .dropdown ();});

Finally we are going to put within the labels body the source code defined HTML predesigned of bootstrap that calls to class and divs in miestilo.css, therefore within the body we added this:

<div class= " " general " container€ id= > <div id= " headed " class= " row " > <div class= " span4€ id= " logo " ><h3>LOGO OF MY EMPRESA</h3></div> <div id= " menu€ class= " span8 " > <ul class= " nav NAV-pills " > <li class= " activates€ 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 " > Company <b class= " caret " ></b> </a> <ul class= " dropdown-menu " > <li><a href= " # " >uno</a></li> <li><a href= " # " >dos</a></li> <li class= " to 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= " " left€ body€ class= " row " > <div id= class= " span4 " > <h3>Izquierda</h3> <ul class= " nav NAV-stacked NAV-abatis " > <li class= " activates " > <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 " > vertical Menu </li> <li class= " activates " > <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= " right " class= " span7 " > <h3>Contenido</h3> <br/> <h1>Bienvenidos to our new webpage! </h1> <p> Test of model-making with twitter bootstrap </p> <p><a class= " btn btn-primary btn-large " >Mas info</a></p> </div> </div> <div id= "" class= " row " > <div id= " to footer€ class= " span12 " > <span>Mi First Bootstrap</span><br/><b>Sitio Subject maquetado with Twitter Bootstrap</b> </div> </div> </div>

Once fact all this we come to open to our new Web from any navigator from a screen and resolutions desktop and observed that it is of the following way:

If we reduce the size of navigator and we make it more Straits to simulate than we are sailing from smartphone or tablet, we observed that the design Web is adapted perfectly to the width and stop of the screen, or so large smartphone or tablet, being this way a design Web responsive:


I hope that they have liked this tutorial bootstrap, and that serves to you as help,

If you liked this article or she served as help comp¡rtelo please to you
A greeting,
By “scar Carrillo