Bootstrap

Skele

Bootstrap je izgrađen na responzivnoj mreži od 12 stupaca. Također smo uključili rasporede fiksne i fluidne širine temeljene na tom sustavu.

Globalni stilovi za resetiranje CSS-a, tipografiju i veze

Zahtijeva HTML5 doctype

Bootstrap koristi HTML elemente i CSS svojstva koja zahtijevaju upotrebu HTML5 doctype. Svakako ga uključite na početku svake Bootstrapped stranice u svom projektu.

  1. <!DOCTYPE html>
  2. <html lang = "hr" > 
  3.   ...
  4. </html>

Tipografija i poveznice

Unutar datoteke scaffolding.less postavljamo osnovni globalni prikaz, tipografiju i stilove veza. Konkretno, mi:

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

Reset putem Normalize

Od Bootstrapa 2, tradicionalni reset CSS-a evoluirao je da koristi elemente iz Normalize.css , projekta Nicolasa Gallaghera koji također pokreće HTML5 Boilerplate .

Novi reset još uvijek se može pronaći u reset.less , ali s mnogim elementima uklonjenim radi sažetosti i točnosti.

Zadani mrežni sustav od 12 stupaca s odgovarajućim zaokretom

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Zadani sustav rešetki koji je dio Bootstrapa je rešetka širine 940 piksela s 12 stupaca .

Također ima četiri responzivne varijante za različite uređaje i razlučivosti: telefon, tablet portret, stolni krajolik i male stolne površine te velike široke radne površine.

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Kao što je ovdje prikazano, osnovni izgled može se stvoriti s dva "stupca", od kojih svaki obuhvaća određeni broj od 12 temeljnih stupaca koje smo definirali kao dio našeg mrežnog sustava.


Odstupanje stupaca

4
4 pomak 4
3 pomak 3
3 pomak 3
8 pomak 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Gniježđenje stupaca

Sa statičnim (nefluidnim) grid sustavom u Bootstrapu, gniježđenje je jednostavno. Da biste ugniježdili svoj sadržaj, samo dodajte novi .rowi skup .span*stupaca unutar postojećeg .span*stupca.

Primjer

Ugniježđeni redovi trebaju uključivati ​​skup stupaca koji zbrajaju broj stupaca svog nadređenog. Na primjer, dva ugniježđena .span3stupca trebaju biti smještena unutar .span6.

Razina 1 stupca
Razina 2
Razina 2 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     Razina 1 stupca
  4.     <div class = "row" > 
  5.       <div class = "span6" > Razina 2 </div> 
  6.       <div class = "span6" > Razina 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sustav fluidne mreže 12 osjetljivih stupaca koji se temelje na postocima

Kolone tekućine

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Postoci, ne pikseli

Sustav fluidne mreže koristi postotke za širine stupaca umjesto fiksnih piksela. Također ima iste responzivne varijacije kao naš sustav fiksne mreže, osiguravajući odgovarajuće proporcije za ključne rezolucije zaslona i uređaje.

Tekući redovi

Učinite bilo koji red tekućim jednostavnom promjenom .rowu .row-fluid. Stupci ostaju potpuno isti, što čini vrlo jednostavnim prebacivanje između fiksnih i fluidnih izgleda.

Markup

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Tekuće gniježđenje

Gniježđenje s fluidnim mrežama malo je drugačije: broj ugniježđenih stupaca ne mora odgovarati roditelju. Umjesto toga, vaši se stupci poništavaju na svakoj razini jer svaki redak zauzima 100% nadređenog stupca.

Tekućina 12
Tekućina 6
Tekućina 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Razina 1 stupca
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Razina 2 </div> 
  6.       <div class = "span6" > Razina 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Prilagodba mreže

Varijabilna Zadana vrijednost Opis
@gridColumns 12 Broj stupaca
@gridColumnWidth 60 px Širina svakog stupca
@gridGutterWidth 20 px Negativni razmak između stupaca
@siteWidth Izračunati zbroj svih stupova i oluka Broji broj stupova i oluka za postavljanje širine .container-fixed()mixina

Varijable u LESS

U Bootstrap je ugrađeno nekoliko varijabli za prilagodbu zadanog sustava rešetki od 940 piksela, dokumentiranih gore. Sve varijable za grid su pohranjene u variables.less.

Kako prilagoditi

Modificiranje mreže znači promjenu triju @grid*varijabli i ponovno kompajliranje Bootstrapa. Promijenite varijable rešetke u variables.less i upotrijebite jedan od četiri dokumentirana načina za ponovno prevođenje . Ako dodajete više stupaca, svakako dodajte CSS za one u grid.less.

Ostati osjetljiv

Prilagodba mreže radi samo na zadanoj razini, mreži od 940 piksela. Da biste zadržali responzivne aspekte Bootstrapa, također ćete morati prilagoditi rešetke u responsive.less.

Layouts Osnovni predlošci za izradu web stranica

Fiksni raspored

Zadani i jednostavni raspored širine 940 piksela, centriran za bilo koje web mjesto ili stranicu koju pruža jedan <div class="container">.

  1. <tijelo>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

Fluidni raspored

<div class="container-fluid">daje fleksibilnu strukturu stranice, minimalnu i maksimalnu širinu i bočnu traku s lijeve strane. Izvrstan je za aplikacije i dokumente.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Sadržaj bočne trake-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Sadržaj tijela-->
  8.     </div>
  9.   </div>
  10. </div>

Responzivni dizajn Medijski upiti za različite uređaje i rezolucije

Responzivni uređaji

Što oni rade

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
pametni telefoni 480px i niže Fluidni stupci, bez fiksnih širina
Pametni telefoni na tablete 767px i niže Fluidni stupci, bez fiksnih širina
Tablete s portretima 768px i više 42 px 20 px
Zadano 980px i više 60 px 20 px
Veliki zaslon 1200px i više 70 px 30 px

Zahtijeva meta oznaku

Kako biste osigurali da uređaji pravilno prikazuju responzivne stranice, uključite meta oznaku okvira prikaza.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

Korištenje medijskih upita

Bootstrap ne uključuje automatski te medijske upite, ali njihovo razumijevanje i dodavanje vrlo je jednostavno i zahtijeva minimalno postavljanje. Imate nekoliko opcija za uključivanje responzivnih značajki Bootstrapa:

  1. Koristite kompiliranu responzivnu verziju, bootstrap-responsive.css
  2. Dodajte @import "responsive.less" i ponovno kompajlirajte Bootstrap
  3. Izmijenite i ponovno kompajlirajte responsive.less kao zasebnu datoteku

Zašto ga jednostavno ne uključiti? Istini za volju, ne mora sve biti osjetljivo. Umjesto da potičemo programere da uklone ovu značajku, smatramo da je najbolje omogućiti je.

  1.   // Vodoravni telefoni i dolje
  2.   @media ( max - width : 480px ) { ... }     
  3.  
  4.   // Vodoravni telefon u portretni tablet
  5.   @media ( max - width : 768px ) { ... }     
  6.  
  7.   // Portret tableta u pejzaž i radnu površinu
  8.   @media ( min . širina : 768px ) i ( maks . širina : 980px ) { ... }        
  9.  
  10.   // Velika radna površina
  11.   @media ( min - širina : 1200px ) { .. }

Responzivne uslužne klase

Što su oni

Za brži razvoj prilagođen mobilnim uređajima koristite ove osnovne uslužne klase za prikazivanje i skrivanje sadržaja po uređaju.

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.

Na primjer, možete prikazati <select>element za navigaciju na mobilnim izgledima, ali ne i na tabletima ili stolnim računalima.

Nastava podrške

Ovdje je prikazana tablica klasa koje podržavamo i njihov učinak na određeni raspored medijskog upita (označeno prema uređaju). Mogu se pronaći u responsive.less.

Klasa telefoni480px i niže Tablete767px i niže Stolna računala768px i više
.visible-phone Vidljivo
.visible-tablet Vidljivo
.visible-desktop Vidljivo
.hidden-phone Vidljivo Vidljivo
.hidden-tablet Vidljivo Vidljivo
.hidden-desktop Vidljivo Vidljivo

Test slučaj

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

Vidljivo na...

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

Skriveno na...

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