Dobivanje · Bootstrap Na hrvatskom jeziku

Prije preuzimanja svakako imate uređivač koda (preporučamo Sublime Text 2 ) i nešto radnog znanja o HTML-u i CSS-u. Ovdje nećemo prolaziti kroz izvorne datoteke, ali one su dostupne za preuzimanje. Usredotočit ćemo se na početak rada s kompiliranim Bootstrap datotekama.

Preuzimanje sastavljeno

Najbrži način za početak: nabavite kompajlirane i umanjene verzije našeg CSS-a, JS-a i slika. Nema dokumenata ili originalnih izvornih datoteka.

Preuzmite Bootstrap

Preuzmite izvor

Nabavite izvorne datoteke za sav CSS i JavaScript, zajedno s lokalnom kopijom dokumenata preuzimanjem najnovije verzije izravno s GitHuba.

Preuzmite Bootstrap izvor

Unutar preuzimanja pronaći ćete sljedeću strukturu datoteke i sadržaj, koji logično grupira zajednička sredstva i pruža kompajlirane i umanjene varijacije.

Nakon preuzimanja, raspakirajte komprimiranu mapu da vidite strukturu (kompiliranog) Bootstrapa. Vidjet ćete nešto poput ovoga:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   └── img / ├── glifikoni - poluljudi . png
       └── glifikoni - poluljudi - bijeli . png

Ovo je najosnovniji oblik Bootstrapa: kompajlirane datoteke za brzu upotrebu u gotovo svim web projektima. Nudimo kompilirani CSS i JS ( bootstrap.*), kao i kompilirani i umanjeni CSS i JS ( bootstrap.min.*). Datoteke slika su komprimirane pomoću ImageOptima , Mac aplikacije za komprimiranje PNG-ova.

Imajte na umu da svi JavaScript dodaci zahtijevaju uključenje jQueryja.

Bootstrap dolazi opremljen HTML-om, CSS-om i JS-om za sve vrste stvari, ali oni se mogu sažeti s nekoliko kategorija vidljivih na vrhu Bootstrapove dokumentacije .

Odjeljci dokumenata

Skele

Globalni stilovi za tijelo za poništavanje tipa i pozadine, stilovi veza, sustav rešetki i dva jednostavna izgleda.

Osnovni CSS

Stilovi za uobičajene HTML elemente poput tipografije, koda, tablica, obrazaca i gumba. Također uključuje Glyphicons , sjajan mali skup ikona.

Komponente

Osnovni stilovi za uobičajene komponente sučelja kao što su kartice i pilule, navigacijska traka, upozorenja, zaglavlja stranica i više.

JavaScript dodaci

Slično komponentama, ovi JavaScript dodaci su interaktivne komponente za stvari kao što su opisi alata, skočni prozori, modali i još mnogo toga.

Popis komponenti

Zajedno, odjeljci komponenti i JavaScript dodataka pružaju sljedeće elemente sučelja:

Grupe gumba
Padajući izbornik gumba
Navigacijske kartice, pilule i popisi
Navigacijska traka
Etikete
Značke
Zaglavlja stranica i jedinica heroja
Sličice
upozorenja
Trake napretka
Modali
padajuće liste
Opisi alata
Popovers
Harmonika
Karusel
Tipkajte unaprijed

U budućim vodičima možda ćemo detaljnije proći kroz ove komponente pojedinačno. Do tada potražite svaki od njih u dokumentaciji za informacije o tome kako ih koristiti i prilagoditi.

S kratkim uvodom u sadržaj, možemo se usredotočiti na korištenje Bootstrapa. Da bismo to učinili, upotrijebit ćemo osnovni HTML predložak koji uključuje sve što smo spomenuli u strukturi datoteke .

Sada, evo pogleda na tipičnu HTML datoteku :

<!DOCTYPE html>
<html>
  <glava>
    <title> Predložak Bootstrap 101 </title>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  </head>
  <tijelo>
    <h1> Zdravo, svijete! </h1>
    <script src = "https://code.jquery.com/jquery.js" ></script> 
  </body>
</html>

Da biste ovo učinili Bootstrapped predloškom , samo uključite odgovarajuće CSS i JS datoteke:

<!DOCTYPE html>
<html>
  <glava>
    <title> Predložak Bootstrap 101 </title>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
    <!-- Bootstrap -->
    <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "screen" >   
  </head>
  <tijelo>
    <h1> Zdravo, svijete! </h1>
    <script src = "https://code.jquery.com/jquery.js" ></script> 
    <script src = "js/bootstrap.min.js" ></script> 
  </body>
</html>

I spremni ste! S te dvije dodane datoteke, možete početi razvijati bilo koje mjesto ili aplikaciju s Bootstrapom.

Prijeđite dalje od osnovnog predloška s nekoliko primjera izgleda. Potičemo ljude da ponavljaju ove primjere, a ne da ih jednostavno koriste kao krajnji rezultat.

Početni predložak

Barebone HTML dokument sa svim uključenim Bootstrap CSS-om i JavaScriptom.
Osnovna marketinška stranica

Sadrži jedinicu heroja za primarnu poruku i tri prateća elementa.
Fluidni raspored

Koristi naš novi prilagodljivi, fluidni mrežni sustav za stvaranje besprijekornog tekućeg izgleda.
Uski marketing

Tanak, lagan marketinški predložak za male projekte ili timove.
Opravdana nav

Marketinška stranica s navigacijskim vezama jednake širine u modificiranoj navigacijskoj traci.
Prijaviti se

Barebones obrazac za prijavu s prilagođenim, većim kontrolama obrasca i fleksibilnim izgledom.
Ljepljivo podnožje

Prikvačite podnožje fiksne visine na dno korisničkog okvira za prikaz.
Vrtuljak jumbotron

Interaktivniji riff na osnovnom marketinškom mjestu s istaknutim vrtuljkom.