Bootstrap

Skele

Bootstrap je izgrađen na responzivnoj mreži od 12 kolona. Takođe smo uključili rasporede fiksne i fluidne širine zasnovane na tom sistemu.

Globalni stilovi za CSS resetovanje, tipografiju i veze

Zahtijeva HTML5 tip dokumenta

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

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

Tipografija i linkovi

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

  • Uklonite margine na tijelu
  • Postavite background-color: white;nabody
  • Koristite atribute , i kao našu @baseFontFamilytipografsku @baseFontSizeosnovu@baseLineHeight
  • Postavite globalnu boju veze putem @linkColori primijenite podvučene veze samo na:hover

Resetirajte preko Normalize

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

Novo resetiranje se i dalje može naći u reset.less , ali sa mnogim elementima uklonjenim radi sažetosti i preciznosti.

Podrazumevani sistem mreže 12 kolona sa brzim zaokretom

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

Podrazumevani sistem mreže koji je obezbeđen kao deo Bootstrapa je mreža sa 12 kolona širine 940 piksela .

Takođe ima četiri varijacije sa odzivom za različite uređaje i rezolucije: telefon, portret tableta, pejzaž tableta i male desktope, i velike radne površine širokog ekrana.

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

Kao što je ovde prikazano, osnovni raspored se može kreirati sa dve "kolone", od kojih svaka obuhvata niz od 12 temeljnih kolona koje smo definisali kao deo našeg sistema mreže.


Offseting kolone

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

Nesting columns

Sa statičnim (nefluidnim) sistemom mreže u Bootstrapu, ugniježđenje je jednostavno. Da ugnijezdite svoj sadržaj, samo dodajte novi .rowi skup .span*kolona unutar postojeće .span*kolone.

Primjer

Ugniježđeni redovi trebaju uključivati ​​skup kolona koji se zbrajaju sa brojem kolona njegovog roditelja. Na primjer, dvije ugniježđene .span3kolone trebale bi biti smještene unutar .span6.

Nivo 1 kolone
Nivo 2
Nivo 2 
  1. <div class = "red" > 
  2.   <div class = "span12" > 
  3.     Nivo 1 kolone
  4.     <div class = "red" > 
  5.       <div class = "span6" > Nivo 2 </div> 
  6.       <div class = "span6" > Nivo 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Fluid grid sistem 12 brzih, postotnih stupaca

Stubovi fluida

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

Procenti, ne pikseli

Sistem fluidne mreže koristi procente za širinu kolona umjesto fiksnih piksela. Takođe ima iste varijacije odziva kao i naš sistem fiksne mreže, osiguravajući odgovarajuće proporcije za ključne rezolucije ekrana i uređaje.

Fluid rows

Učinite bilo koji red tečnim jednostavno promjenom .rowna .row-fluid. Stubovi ostaju potpuno isti, što ga čini super jednostavnim za prebacivanje između fiksnog i fluidnog rasporeda.

Markup

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

Fluid nesting

Ugniježđenje sa fluidnim mrežama je malo drugačije: broj ugniježđenih kolona ne mora odgovarati roditelju. Umjesto toga, vaše kolone se resetiraju na svakom nivou jer svaki red zauzima 100% nadređene kolone.

Tečnost 12
Tečnost 6
Tečnost 6 
  1. <div class = "red-fluid" > 
  2.   <div class = "span12" > 
  3.     Nivo 1 kolone
  4.     <div class = "red-fluid" > 
  5.       <div class = "span6" > Nivo 2 </div> 
  6.       <div class = "span6" > Nivo 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Prilagodba mreže

Varijabilna Zadana vrijednost Opis
@gridColumns 12 Broj kolona
@gridColumnWidth 60px Širina svake kolone
@gridGutterWidth 20px Negativni razmak između kolona

Varijable u LESS

Ugrađeno u Bootstrap je pregršt varijabli za prilagođavanje zadanog sistema mreže od 940px, dokumentirano gore. Sve varijable za mrežu su pohranjene u varijabli.less.

Kako prilagoditi

Modifikacija mreže znači promjenu tri @grid*varijable i ponovno kompajliranje Bootstrapa. Promijenite varijable mreže u varijabli.less i koristite jedan od četiri dokumentirana načina za ponovno kompajliranje . Ako dodajete još kolona, ​​obavezno dodajte CSS za one u grid.less.

Ostanite odgovorni

Prilagođavanje mreže radi samo na zadanom nivou, mreži od 940px. Da biste zadržali responzivne aspekte Bootstrapa, također ćete morati prilagoditi mreže u responsive.less.

Izgledi Osnovni predlošci za kreiranje web stranica

Fiksni raspored

Zadani i jednostavan 940px širok, centriran izgled za gotovo bilo koju web stranicu ili stranicu koju pruža jedan <div class="container">.

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

Fluidni raspored

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

  1. <div class = "kontejner-fluid" > 
  2.   <div class = "red-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

Ono što oni rade

Medijski upiti omogućavaju prilagođeni CSS na osnovu brojnih uslova – omjera, širine, tipa prikaza, itd. – ali se obično fokusira na min-widthi max-width.

  • Izmijenite širinu kolone u našoj mreži
  • Složite elemente umjesto plutajućih gdje god je potrebno
  • Promijenite veličinu naslova i teksta kako bi bili prikladniji za uređaje

Koristite medijske upite odgovorno i samo kao početak za svoju mobilnu publiku. Za veće projekte, razmotrite namenske baze koda, a ne slojeve medijskih upita.

Podržani uređaji

Bootstrap podržava pregršt medijskih upita u jednoj datoteci kako bi vaši projekti bili prikladniji na različitim uređajima i rezolucijama ekrana. Evo šta je uključeno:

Label Širina rasporeda Širina kolone Širina oluka
Smartphones 480px i manje Stubovi fluida, bez fiksnih širina
Od pametnih telefona do tableta 767px i manje Stubovi fluida, bez fiksnih širina
Portret tablete 768px i više 42px 20px
Default 980px i više 60px 20px
Veliki displej 1200px i više 70px 30px

Zahtijeva meta oznaku

Da 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 ove medijske upite, ali njihovo razumijevanje i dodavanje je vrlo jednostavno i zahtijeva minimalno podešavanje. Imate nekoliko opcija za uključivanje responzivnih funkcija Bootstrapa:

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

Zašto ga jednostavno ne uključiti? Istini za volju, ne mora sve biti odgovorno. Umjesto da ohrabrujemo programere da uklone ovu funkciju, smatramo da je najbolje da je omogućimo.

  1.   // Landscape phones and down
  2.   @media ( max - širina : 480px ) { ... }     
  3.  
  4.   // Pejzažni telefon u portret tablet
  5.   @media ( max - širina : 767px ) { ... }     
  6.  
  7.   // Portret tableta na pejzaž i desktop
  8.   @media ( min - širina : 768px ) i ( max - širina : 979px ) { ... }        
  9.  
  10.   // Velika radna površina
  11.   @media ( min - širina : 1200px ) { ... }

Odazivne uslužne klase

Šta 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 dopunu prezentacije svakog uređaja.

Na primjer, možete prikazati <select>element za navigaciju na mobilnom izgledu, ali ne i na tabletima ili desktopu.

Časovi podrške

Ovdje je prikazana tabela klasa koje podržavamo i njihov učinak na dati izgled medijskog upita (označen prema uređaju). Mogu se naći u responsive.less.

Klasa Telefoni480px i manje Tablete767px i manje Stoni računari768px i više
.visible-phone Vidljivo
.visible-tablet Vidljivo
.visible-desktop Vidljivo
.hidden-phone Vidljivo Vidljivo
.hidden-tablet Vidljivo Vidljivo
.hidden-desktop Vidljivo Vidljivo

Testni slučaj

Promijenite veličinu vašeg pretraživača ili učitajte na različite uređaje kako biste testirali gore navedene klase.

Vidljivo na...

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

  • Telefon✔ Telefon
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Skriven na...

Ovdje zeleni kvačici označavaju da je klasa skrivena u vašem trenutnom prozoru za prikaz.

  • Telefon✔ Telefon
  • Tablet✔ Tablet
  • Desktop✔ Desktop