Skele

Zahtijeva HTML5 doctype

Bootstrap koristi određene HTML elemente i CSS svojstva koja zahtijevaju upotrebu HTML5 doctype. Uključite ga na početku svih svojih projekata.

<!DOCTYPE html>
<html lang = "hr" > 
  ...
</html>

Tipografija i poveznice

Bootstrap postavlja osnovni globalni prikaz, tipografiju i stilove veza. Konkretno, mi:

Ukloniti marginna tijelu
Postavite background-color: white;nabody
Koristite atribute @baseFontFamily, @baseFontSize, i @baseLineHeightkao našu tipografsku bazu
Postavite globalnu boju veze putem @linkColori primijenite podcrtane veze samo na:hover

Ovi se stilovi mogu pronaći unutar skele.less .

Reset putem Normalize

S Bootstrapom 2, stari blok resetiranja je izbačen u korist Normalize.css , projekta Nicolasa Gallaghera koji također pokreće HTML5 Boilerplate . Iako koristimo većinu Normalize unutar našeg reset.less , uklonili smo neke elemente posebno za Bootstrap.

Primjer žive mreže

Zadani sustav rešetki Bootstrap koristi 12 stupaca , što čini spremnik širine 940 piksela bez omogućenih responzivnih značajki . S dodanom responzivnom CSS datotekom, mreža se prilagođava širini od 724 px i 1170 px, ovisno o vašem okviru za prikaz. Ispod okvira za prikaz od 767 piksela, stupci postaju fluidni i slažu se okomito.

Osnovni HTML rešetke

Za jednostavan raspored s dva stupca stvorite .rowi dodajte odgovarajući broj .span*stupaca. Budući da je ovo mreža od 12 stupaca, svaki .span*obuhvaća određeni broj od tih 12 stupaca i uvijek treba dodati do 12 za svaki red (ili broj stupaca u roditelju).

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

S obzirom na ovaj primjer, imamo .span4i .span8, što čini ukupno 12 stupaca i cijeli redak.

Odstupanje stupaca

Pomaknite stupce udesno koristeći .offset*klase. Svaka klasa povećava lijevu marginu stupca za cijeli stupac. Na primjer, .offset4pomiče se .span4preko četiri stupca.

3 pomak 2

3 pomak 1

3 pomak 2

6 pomak 3

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Gniježđenje stupaca

Da biste ugniježdili svoj sadržaj sa zadanom mrežom, dodajte novi .rowi skup .span*stupaca unutar postojećeg .span*stupca. Ugniježđeni redovi trebaju uključivati skup stupaca koji zbrajaju broj stupaca svog roditelja.

Stupac razine 1

Razina 2

<div class = "row" > 
  <div class = "span9" > 
    Stupac razine 1
    <div class = "row" > 
      <div class = "span6" > Razina 2 </div> 
      <div class = "span3" > Razina 2 </div> 
    </div>
  </div>
</div>

Primjer žive fluidne mreže

Sustav fluidne mreže koristi postotke umjesto piksela za širine stupaca. Ima iste mogućnosti odziva kao naš sustav fiksne mreže, osiguravajući odgovarajuće proporcije za ključne rezolucije zaslona i uređaje.

Osnovni fluidni grid HTML

Učinite bilo koji redak "tekućim" promjenom .rowu .row-fluid. Klase stupaca ostaju potpuno iste, što olakšava prebacivanje između fiksnih i fluidnih mreža.

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Odstupanje tekućine

Djeluje na isti način kao pomak sustava fiksne mreže: dodajte .offset*bilo kojem stupcu da biste pomaknuli za toliko stupaca.

4 pomak 4

3 pomak 3

6 pomak 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Tekuće gniježđenje

Gniježđenje s fluidnim rešetkama je malo drugačije: broj ugniježđenih stupaca ne bi trebao odgovarati broju roditeljskih stupaca. Umjesto toga, svaka razina ugniježđenih stupaca poništava se jer svaki redak zauzima 100% nadređenog stupca.

Tekućina 12

Tekućina 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Tekućina 12
    <div class = "row-fluid" > 
      <div class = "span6" > Fluid 6 </div> 
      <div class = "span6" > Fluid 6 </div> 
    </div>
  </div>
</div>

Fiksni raspored

Pruža uobičajeni raspored fiksne širine (i izborno responzivan) sa samo <div class="container">potrebnim.

<tijelo>
  <div class = "container" > 
    ...
  </div>
</body>

Fluidni raspored

Stvorite fluidnu stranicu s dva stupca s— <div class="container-fluid">izvrsnim za aplikacije i dokumente.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Sadržaj bočne trake-->
    </div>
    <div class = "span10" > 
      <!--Sadržaj tijela-->
    </div>
  </div>
</div>

Omogućivanje responzivnih značajki

Uključite responzivni CSS u svom projektu uključivanjem odgovarajuće meta oznake i dodatne stilske tablice unutar <head>vašeg dokumenta. Ako ste kompajlirali Bootstrap sa stranice Customize, trebate uključiti samo meta oznaku.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Glavu gore!Bootstrap trenutačno ne uključuje responzivne značajke prema zadanim postavkama jer ne mora sve biti responzivno. Umjesto da potičemo programere da uklone ovu značajku, smatramo da je najbolje omogućiti je po potrebi.

O responzivnom Bootstrapu

Medijski upiti dopuštaju prilagođeni CSS na temelju niza uvjeta—omjera, širine, vrste prikaza itd.—ali obično se fokusiraju na min-widthi max-width.

Promijenite širinu stupca u našoj mreži
Složite elemente umjesto da plutaju gdje god je to potrebno
Promijenite veličinu naslova i teksta kako bi bili prikladniji za uređaje

Koristite medijske upite odgovorno i samo kao početak vaše mobilne publike. Za veće projekte razmislite o namjenskim bazama kodova, a ne o slojevima medijskih upita.

Podržani uređaji

Bootstrap podržava pregršt medijskih upita u jednoj datoteci kako bi vaši projekti bili prikladniji za različite uređaje i razlučivosti zaslona. Evo što je uključeno:

Označiti	Širina rasporeda	Širina stupca	Širina oluka
Veliki zaslon	1200px i više	70 px	30 px
Zadano	980px i više	60 px	20 px
Tablete s portretima	768px i više	42 px	20 px
Telefoni na tablete	767px i niže	Fluidni stupci, bez fiksnih širina
telefoni	480px i niže	Fluidni stupci, bez fiksnih širina

/* Velika radna površina */
@media ( min - širina : 1200px ) { ... }     
 
/* Portretni tablet u vodoravni i radnu površinu */
@media ( min . širina : 768px ) i ( maks . širina : 979px ) { ... }        
 
/* Vodoravni telefon na portretni tablet */
@media ( max - width : 767px ) { ... }     
 
/* Vodoravni telefoni i dolje */
@media ( max - width : 480px ) { ... }

Responzivne uslužne klase

Za brži razvoj prilagođen mobilnim uređajima koristite ove klase uslužnih programa za prikazivanje i skrivanje sadržaja po uređaju. Ispod je tablica dostupnih klasa i njihov učinak na određeni raspored medijskog upita (označeno prema uređaju). Mogu se pronaći u responsive.less.

Klasa	telefoni767px i niže	Tablete979 px do 768 px	Stolna računalaZadano
`.visible-phone`	Vidljivo	Skriven	Skriven
`.visible-tablet`	Skriven	Vidljivo	Skriven
`.visible-desktop`	Skriven	Skriven	Vidljivo
`.hidden-phone`	Skriven	Vidljivo	Vidljivo
`.hidden-tablet`	Vidljivo	Skriven	Vidljivo
`.hidden-desktop`	Vidljivo	Vidljivo	Skriven

Kada koristiti

Koristite na ograničenoj osnovi i izbjegavajte stvaranje potpuno različitih verzija iste stranice. Umjesto toga, koristite ih za nadopunu prezentacije svakog uređaja. Responzivni pomoćni programi ne bi se trebali koristiti s tablicama i kao takvi nisu podržani.

Testni slučaj responzivnih uslužnih programa

Promijenite veličinu preglednika ili učitajte na različitim uređajima kako biste testirali gore navedene klase.

Vidljivo na...

Zelene kvačice označavaju da je klasa vidljiva u vašem trenutnom prozoru.

Telefon✔ Telefon
Tableta✔ Tablet
Radna površina✔ Radna površina

Skriveno na...

Ovdje zelene kvačice označavaju da je klasa skrivena u vašem trenutnom prozoru.

Telefon✔ Telefon
Tableta✔ Tablet
Radna površina✔ Radna površina

Globalne postavke