Bootstrap 2.3.2: Guia inicial

Logo Twitter Bootstrap

Bootstrap és un framework 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

Imatge de l'estructura de Bootstrap

Estructura Fluïda de Bootstrap

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.

Saltant spans amb la classe òfset

Saltant spans amb la classe òfset

Disseny diferent per a cada dispositiu

Imatge amb les classes d'exclusivitat per a dispositius Bootstrap

Classes CSS per diferenciar 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

Botons de Colors

Llista de botons oferts per Bootstrap

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


El contingut d'l'article s'adhereix als nostres principis de ètica editorial. Per notificar un error punxa aquí.

Un comentari, deixa el teu

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.

  1.   alejandra va dir

    No tenen mes tutorials sobre aquest framework ???