Bootstrap 2.3.2: Vodič za početak rada

Bootstrap je CSS okvir koja je postala veoma popularna u cijeloj mreži. Njihovi stilovi odziv se vide na društvenim mrežama Tuenti y cvrkut. 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. Konsultujući stilove koji se koriste u ovom okviru, shvatićemo da su nam poznati, jer su to danas primenile mnoge veb stranice.

Struktura

Da bi našoj web stranici bilo dostupno s mobitela i tableta, morat ćemo koristiti strukturu fluida koju nam nudi Bootstrap. Upotreba ove strukture je vrlo jednostavna, sve se temelji na elementima raspon to će nam pomoći raspored naš web dizajn. Kasnije, kada pristupimo ovom dizajnu iz a pametni telefon o tableta, ovo će se automatski prilagoditi navedenom uređaju i znatno poboljšati 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 red sadrži dovoljno prostora za 12 raspona veličine 1 ili 2 veličine 6, a to se može rasporediti kako želite. Jednom kada se prostor reda premaši, automatski će se spustiti na sljedeći, što nam omogućava upotrebu a raspon veličina 12 za stvaranje preloma retka. Ako bismo htjeli preskočiti neke raspon prilikom stvaranja, tj. počnite od 4 raspon, i primijenimo veličinu od 3, koristili bismo ovaj kod:

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

To omogućava diviziji da skoči četiri rasponi pre prikazivanja sadržaja. Ovo 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 svaki tip 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.

Gumbi

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

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

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

Instaliranje Bootstrapa

Za instalaciju ovog CSS okvira, preuzet ćemo zip sa 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

Skinuti - Bootstrap: CSS Framework