Bootstrap 2.3.2: Vodič za početak rada

Bootstrap je CSS okvir koja je postala vrlo popularna u cijeloj mreži. Njihovi stilovi osjetljiv vide se na društvenim mrežama Tuenti y Twitter. Korištenje ovoga štedi nam puno vremena pri razvoju web aplikacije, jer nam štedi sav trud i trud u stvaranju čistog stila stranice pogodnog za sve uređaje. Savjetujući se sa stilovima koji se koriste u ovom okviru, shvatit ćemo da su nam poznati, jer su ga danas primijenile mnoge web stranice.

Struktura

Da bi našoj web stranici bilo dostupno s mobitela i tableta, morat ćemo koristiti strukturu tekućine koju nam nudi Bootstrap. Korištenje ove strukture vrlo je jednostavno, sve se temelji na elementima raspon to će nam pomoći raspored naš web dizajn. Kasnije, kada pristupimo ovom dizajnu iz a smartphone o tableta, ovo će se automatski prilagoditi spomenutom uređaju znatno poboljšavajući kvalitetu navigacije. Koristit ćemo raspon s klasama u logičkim podjelama unutar strukture fluida, tj.:

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

Gdje broj 2 predstavlja veličinu raspona. Svaki redak sadrži dovoljno prostora za 12 raspona veličine 1 ili 2 veličine 6, to se može rasporediti kako želite. Jednom kada se prostor reda premaši, automatski će se spustiti na sljedeći, što nam omogućuje upotrebu a raspon veličina 12 za stvaranje preloma retka. Kad bismo htjeli preskočiti neke raspon prilikom stvaranja, tj. započnite s 4 raspon, i primijenimo veličinu od 3, koristili bismo ovaj kod:

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

To omogućuje diviziji skok četiri rasponi prije prikazivanja sadržaja. To možemo koristiti po svojoj slobodnoj volji, preskačući ono što želimo s našim kodom.

Različit dizajn za svaki uređaj

Da bismo primijenili drugačiji dizajn za svaku vrstu uređaja, reći ćemo svakoj logičkoj podjeli za koji je uređaj orijentiran, koristeći sljedeće klase:

Na taj način možemo prikazati potpuno drugačiji dizajn za svaki uređaj s istim URL-om.

tipke

Bootstrap nam nudi čist repertoar gumba u boji, njegova upotreba je vrlo jednostavna:

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

gdje btn btn-success odnosi se na boju gumba, da bismo ga promijenili, trebat ćemo ga samo zamijeniti klasama prikazanim na prethodnoj slici.

Instaliranje Bootstrapa

Za instalaciju ovog CSS okvira preuzet ćemo zip s veze koju ću ostaviti na kraju posta i napisat ćemo sljedeći kod u glavi naše HTML datoteke.

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

Nakon što se uvjerimo da su CSS i JS datoteke u istoj mapi kao i naša HTML datoteka, možemo započeti s dizajniranjem naše responzivne web stranice.

Više informacija - Provjera obrasca

Preuzimanje datoteka - Bootstrap: CSS Framework