Bootstrap 2.3.2: Guia inicial

Bootstrap és un marc CSS que s'ha popularitzat moltíssim per tota la xarxa. els seus estils sensible es deixen veure per les xarxes socials Tuenti y Twitter. L'ús d'aquest ens estalvia moltíssim temps a l'hora de desenvolupar una aplicació web ja que ens evita tota la feina i esforç que suposa crear un estil de pàgina net i apte per a tots els dispositius. Consultar els estils utilitzats en aquest framework, ens adonarem que ens resulten familiars, ja que avui en dia moltes webs ho han implementat.

l'Estructura

Perquè la nostra web sigui accessible des de mòbils i tablets haurem d'utilitzar l'estructura fluïda que ens ofereix Bootstrap. L'ús d'aquesta estructura és molt senzill, tot es basa en elements lapse que ens ajudaran a maquetar nostre disseny web. Posteriorment, quan accedim a aquest disseny des d'un telèfon intel·ligent o tablet, Aquest s'adaptés automàticament a aquest dispositiu millorant considerablement la qualitat de navegació. Farem servir els lapse amb classes en divisions lògiques dins de l'estructura fluida, és a dir:

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

On el número 2 representa la mida de l'span. Cada fila conté l'espai suficient com per a 12 spans de tamany 1, o 2 de mida 6, això poden distribuir-al seu gust. Un cop sobrepassat l'espai d'una fila es baixarà a la següent automàticament, permetent utilitzar un lapse de cos 12 per crear un salt de línia. Si volguéssim saltar-nos algun lapse a l'hora de crear-ne un, és a dir, començar a partir de l'abril lapse, I aplicar-li una mida de 3, utilitzaríem aquest codi:

<div class="span2 offset4">Contenido</div>

Això permet a la divisió saltar XNUMX:XNUMX abastos abans de mostrar el contingut. Això ho podem utilitzar al nostre lliure albir, saltant-nos el que vulguem amb el nostre codi.

Disseny diferent per a cada dispositiu

Per aplicar un diferent disseny per a cada tipus de dispositiu li direm a cada divisió lògica perquè dispositiu està orientada, usant les següents classes:

D'aquesta manera podrem mostrar amb la mateixa URL un disseny totalment diferent per a cada dispositiu.

botons

Bootstrap ens ofereix un net repertori de botons de colors, el seu ús és molt senzill:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

on btn btn-success fa referència a la color de botó, per canviar-lo, només haurem de substituir-lo per les classes mostrades en la imatge anterior.

instal·lant Bootstrap

Per a la instal·lació d'aquest framework CSS, descarregarem el zip des de l'enllaç que deixaré a la fi de l'post, i escriurem el següent codi en el head del nostre arxiu HTML.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

Un cop ens hem assegurat que els arxius CSS i JS estan en la mateixa carpeta que el nostre fitxer HTML, podrem començar a dissenyar la nostra web responsive.

Més informació - Validació de Formularis

Descàrrega - Bootstrap: Framework CSS