Počinjemo

Pregled projekta, njegovog sadržaja i kako započeti s jednostavnim predloškom.

Prije preuzimanja, budite sigurni da imate uređivač koda (preporučujemo Sublime Text 2 ) i neko radno znanje o HTML-u i CSS-u. Ovdje nećemo prolaziti kroz izvorne datoteke, ali oni su dostupni za preuzimanje. Fokusiraćemo se na početak rada sa kompajliranim Bootstrap datotekama.

Preuzimanje kompajlirano

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

Preuzmite Bootstrap

Preuzmite izvor

Preuzmite originalne datoteke za sve CSS i JavaScript, zajedno sa lokalnom kopijom dokumenata preuzimanjem najnovije verzije direktno sa GitHub-a.

Preuzmite izvor za Bootstrap

U okviru preuzimanja naći ćete sljedeću strukturu i sadržaj datoteke, logički grupisanu zajedničku imovinu i pružajući kompajlirane i minimizirane varijacije.

Nakon preuzimanja, raspakirajte komprimirani folder da vidite strukturu (prevedenog) Bootstrapa. Vidjet ćete nešto ovako:

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

Ovo je najosnovniji oblik Bootstrapa: kompajlirane datoteke za brzu upotrebu u gotovo svakom web projektu. Nudimo prevedene CSS i JS ( bootstrap.*), kao i kompajlirane i minimizirane CSS i JS ( bootstrap.min.*). Datoteke slika se komprimiraju pomoću ImageOptim , Mac aplikacije za kompresiju PNG-ova.

Imajte na umu da svi JavaScript dodaci zahtijevaju da jQuery bude uključen.

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

Sekcije dokumenata

Skele

Globalni stilovi za tijelo za resetovanje tipa i pozadine, stilovi veza, sistem mreže i dva jednostavna izgleda.

Base CSS

Stilovi za uobičajene HTML elemente kao što su tipografija, kod, tabele, obrasci i dugmad. Također uključuje Glyphicons , sjajan mali set ikona.

Komponente

Osnovni stilovi za uobičajene komponente interfejsa kao što su kartice i tablete, navigaciona traka, upozorenja, zaglavlja stranica i još mnogo toga.

JavaScript dodaci

Slično komponentama, ovi JavaScript dodaci su interaktivne komponente za stvari kao što su opisi alata, iskačući prikazi, modali i još mnogo toga.

Lista komponenti

Zajedno, odjeljci komponenti i JavaScript dodataka pružaju sljedeće elemente interfejsa:

  • Grupe dugmadi
  • Padajući meni sa dugmetom
  • Kartice za navigaciju, tablete i liste
  • Navbar
  • Etikete
  • Značke
  • Zaglavlja stranica i jedinica heroja
  • Thumbnails
  • Alerts
  • Trake napretka
  • Modals
  • Padajući meni
  • Alati
  • Popovers
  • Harmonika
  • Carousel
  • Typeahead

U budućim vodičima mož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.

Uz kratak uvod u sadržaj, možemo se fokusirati na korištenje Bootstrapa. Da bismo to učinili, koristit ćemo osnovni HTML predložak koji uključuje sve što smo spomenuli u strukturi datoteke .

Sada, evo pogleda na tipičnu HTML datoteku :

  1. <!DOCTYPE html>
  2. <html>
  3. <glava>
  4. <title> Bootstrap 101 predložak </title>
  5. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
  6. </head>
  7. <tijelo>
  8. <h1> Zdravo, svijete! </h1>
  9. <script src = "https://code.jquery.com/jquery.js" ></script>
  10. </body>
  11. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <glava>
  4. <title> Bootstrap 101 predložak </title>
  5. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
  6. <!-- Bootstrap -->
  7. <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "screen" >
  8. </head>
  9. <tijelo>
  10. <h1> Zdravo, svijete! </h1>
  11. <script src = "https://code.jquery.com/jquery.js" ></script>
  12. <script src = "js/bootstrap.min.js" ></script>
  13. </body>
  14. </html>

I spremni ste! Uz dodane te dvije datoteke, možete početi razvijati bilo koju stranicu ili aplikaciju pomoću Bootstrapa.

Pomaknite se dalje od osnovnog predloška s nekoliko primjera izgleda. Ohrabrujemo ljude da ponavljaju ove primjere, a ne da ih jednostavno koriste kao krajnji rezultat.

  • Početni šablon

    Barebones HTML dokument sa uključenim svim Bootstrap CSS-om i JavaScript-om.

  • 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 sistem za kreiranje besprijekornog rasporeda tekućine.

  • Uski marketing

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

  • Justified nav

    Marketinška stranica sa navigacijskim vezama jednake širine u modificiranoj navigacijskoj traci.

  • Prijavite se

    Barebones se prijavljuje u formu s prilagođenim, većim kontrolama obrasca i fleksibilnim izgledom.

  • Lepljivo podnožje

    Zakačite podnožje fiksne visine na dno korisničkog prozora za prikaz.

  • Carousel jumbotron

    Interaktivniji riff na osnovnoj marketinškoj stranici sa istaknutim vrtuljkom.

Idite na dokumente za informacije, primjere i isječke koda ili napravite sljedeći korak i prilagodite Bootstrap za bilo koji nadolazeći projekt.

Posjetite Bootstrap dokumente Prilagodite Bootstrap