Bootstrap

Gradbeni odri

Bootstrap je zgrajen na odzivni mreži z 12 stolpci. Na podlagi tega sistema smo vključili tudi postavitve s fiksno in tekočo širino.

Globalni slogi za ponastavitev CSS, tipografijo in povezave

Zahteva vrsto dokumenta HTML5

Bootstrap uporablja elemente HTML in lastnosti CSS, ki zahtevajo uporabo dokumenta HTML5. Ne pozabite ga vključiti na začetek vsake strani Bootstrapped v vašem projektu.

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

Tipografija in povezave

Znotraj datoteke scaffolding.less nastavimo osnovni globalni prikaz, tipografijo in sloge povezav. Natančneje, mi:

  • Odstranite rob na telesu
  • Nastavite background-color: white;nabody
  • Uporabite atribute @baseFontFamily, @baseFontSize, in @baseLineHeightkot našo tipografsko osnovo
  • Nastavite barvo globalne povezave prek @linkColorin uporabite podčrtaje povezave samo na:hover

Ponastavi prek Normalize

Od Bootstrapa 2 se je tradicionalna ponastavitev CSS razvila tako, da uporablja elemente iz Normalize.css , projekta Nicolasa Gallagherja , ki prav tako poganja HTML5 Boilerplate .

Novo ponastavitev je še vedno mogoče najti v reset.less , vendar je veliko elementov odstranjenih zaradi kratkosti in natančnosti.

Privzeti mrežni sistem 12 stolpcev z odzivnim zasukom

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

Privzeti mrežni sistem, ki je na voljo v Bootstrapu, uporablja 12 stolpcev , ki se upodabljajo v širinah 724 slikovnih pik, 940 slikovnih pik (privzeto brez vključenega odzivnega CSS) in 1170 slikovnih pik. Pod vidnimi okni 767 slikovnih pik postanejo stolpci tekoči in se zložijo navpično.

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

Kot je prikazano tukaj, je mogoče ustvariti osnovno postavitev z dvema "stolpcema", od katerih vsak zajema več od 12 temeljnih stolpcev, ki smo jih definirali kot del našega mrežnega sistema.


Poravnalni stolpci

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

Gnezdenje stolpcev

S statičnim (nefluidnim) mrežnim sistemom v Bootstrapu je gnezdenje preprosto. Če želite ugnezditi svojo vsebino, samo dodajte nov .rowin nabor .span*stolpcev znotraj obstoječega .span*stolpca.

Primer

Ugnezdene vrstice morajo vsebovati nabor stolpcev, ki se seštejejo s številom stolpcev nadrejenega. Na primer, dva ugnezdena .span3stolpca je treba postaviti znotraj .span6.

1. raven stolpca
2. stopnja
2. stopnja 
  1. <div class = "row" > 
  2.   <div class = "span6" > 
  3.     Stolpec 1. stopnje
  4.     <div class = "row" > 
  5.       <div class = "span3" > 2. stopnja </div> 
  6.       <div class = "span3" > 2. stopnja </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistem tekoče mreže 12 odzivnih stolpcev, ki temeljijo na odstotkih

Stebri s tekočino

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

Odstotki, ne piksli

Sistem tekoče mreže uporablja odstotke za širine stolpcev namesto fiksnih slikovnih pik. Ima tudi enake odzivne različice kot naš sistem s fiksno mrežo, kar zagotavlja ustrezna razmerja za ključne ločljivosti zaslona in naprave.

Tekoče vrstice

Naredite katero koli vrsto tekočo preprosto tako, da jo spremenite .rowv .row-fluid. Stolpci ostanejo popolnoma enaki, zaradi česar je preklapljanje med fiksno in tekočo postavitvijo zelo preprosto.

Markup

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

Tekočinsko gnezdenje

Gnezdenje s tekočimi mrežami je nekoliko drugačno: ni treba, da se število ugnezdenih stolpcev ujema z nadrejenim. Namesto tega so vaši stolpci ponastavljeni na vsaki ravni, ker vsaka vrstica zaseda 100 % nadrejenega stolpca.

Tekočina 12
Tekočina 6
Tekočina 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     1. raven stolpca
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 2. stopnja </div> 
  6.       <div class = "span6" > 2. stopnja </div> 
  7.     </div>
  8.   </div>
  9. </div>

Prilagoditev mreže

Spremenljivka Privzeta vrednost Opis
@gridColumns 12 Število stolpcev
@gridColumnWidth 60 slikovnih pik Širina vsakega stolpca
@gridGutterWidth 20 slikovnih pik Negativni presledek med stolpci

Spremenljivke v LESS

V Bootstrap je vgrajena peščica spremenljivk za prilagoditev privzetega sistema mreže 940 slikovnih pik, ki je dokumentiran zgoraj. Vse spremenljivke za mrežo so shranjene v variables.less.

Kako prilagoditi

Spreminjanje mreže pomeni spreminjanje treh @grid*spremenljivk in ponovno prevajanje Bootstrapa. Spremenite spremenljivke mreže v variables.less in uporabite enega od štirih dokumentiranih načinov za ponovno prevajanje . Če dodajate več stolpcev, ne pozabite dodati CSS za tiste v grid.less.

Ostati odziven

Prilagoditev mreže deluje samo na privzeti ravni, mreži 940 slikovnih pik. Če želite ohraniti odzivne vidike Bootstrapa, boste morali prilagoditi tudi mreže v responsive.less.

Layouts Osnovne predloge za ustvarjanje spletnih strani

Fiksna postavitev

Privzeta in preprosta 940 slikovnih pik široka, sredinska postavitev za skoraj vsako spletno mesto ali stran, ki jo ponuja en sam <div class="container">.

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

Tekoča postavitev

<div class="container-fluid">ponuja prilagodljivo strukturo strani, najmanjšo in največjo širino ter levo stransko vrstico. Odličen je za aplikacije in dokumente.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Vsebina stranske vrstice-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Vsebina telesa-->
  8.     </div>
  9.   </div>
  10. </div>

Odzivna zasnova Medijske poizvedbe za različne naprave in ločljivosti

Odzivne naprave

Kaj počnejo

Medijske poizvedbe omogočajo CSS po meri na podlagi številnih pogojev – razmerij, širin, vrste prikaza itd. – vendar se običajno osredotočajo na min-widthin max-width.

  • Spremenite širino stolpca v naši mreži
  • Zložite elemente namesto lebdenja, kjer koli je to potrebno
  • Spremenite velikost naslovov in besedila, da bodo bolj primerni za naprave

Medijske poizvedbe uporabljajte odgovorno in samo kot začetek za svoje mobilno občinstvo. Pri večjih projektih upoštevajte namenske kodne baze in ne plasti medijskih poizvedb.

Podprte naprave

Bootstrap podpira peščico medijskih poizvedb v eni datoteki, s čimer pomaga narediti vaše projekte primernejše za različne naprave in ločljivosti zaslona. Tukaj je vključeno:

Oznaka Širina postavitve Širina stolpca Širina žleba
Pametni telefoni 480px in manj Tekoči stolpci, brez fiksnih širin
Pametnih telefonov na tablice 767px in manj Tekoči stolpci, brez fiksnih širin
Portretne tablice 768px in več 42 slikovnih pik 20 slikovnih pik
Privzeto 980px in več 60 slikovnih pik 20 slikovnih pik
Velik zaslon 1200px in več 70 slikovnih pik 30 slikovnih pik

Zahteva meta oznako

Če želite zagotoviti, da naprave pravilno prikazujejo odzivne strani, vključite metaoznako vidnega polja.

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

Uporaba medijskih poizvedb

Bootstrap teh medijskih poizvedb ne vključi samodejno, vendar je njihovo razumevanje in dodajanje zelo enostavno in zahteva minimalno nastavitev. Na voljo imate nekaj možnosti za vključitev odzivnih funkcij programa Bootstrap:

  1. Uporabite prevedeno odzivno različico, bootstrap-responsive.css
  2. Dodajte @import "responsive.less" in znova prevedite Bootstrap
  3. Spremenite in znova prevedite responsive.less kot ločeno datoteko

Zakaj ga preprosto ne bi vključili? Resnici na ljubo ni treba, da je vse odzivno. Namesto da razvijalce spodbujamo k odstranitvi te funkcije, se nam zdi najbolje, da jo omogočimo.

  1.   /* Ležeči telefoni in navzdol */
  2.   @media ( max - width : 480px ) { ... }     
  3.  
  4.   /* Ležeči telefon v pokončni tablični računalnik */
  5.   @media ( max - širina : 767px ) { ... }     
  6.  
  7.   /* Pokončna tablica v ležečo in namizje */
  8.   @media ( najmanjša širina : 768 slikovnih pik ) in ( največja širina : 979 slikovnih pik ) { ... }        
  9.  
  10.   /* Veliko namizje */
  11.   @media ( najmanjša širina : 1200 slikovnih pik ) { ... }

Odzivni uporabni razredi

Kaj so oni

Za hitrejši razvoj, prijazen do mobilnih naprav, uporabite te osnovne razrede pripomočkov za prikazovanje in skrivanje vsebine glede na napravo.

Kdaj uporabiti

Uporabljajte omejeno in se izogibajte ustvarjanju popolnoma različnih različic istega mesta. Namesto tega jih uporabite za dopolnitev predstavitve vsake naprave.

Na primer, lahko prikažete <select>element za krmarjenje na mobilnih postavitvah, ne pa tudi na tabličnih ali namiznih računalnikih.

Podporni razredi

Tukaj je prikazana tabela razredov, ki jih podpiramo, in njihov učinek na dano postavitev medijske poizvedbe (označeno z napravo). Najdete jih v responsive.less.

Razred telefoni480px in manj Tablete767px in manj Namizni računalniki768px in več
.visible-phone Vidno
.visible-tablet Vidno
.visible-desktop Vidno
.hidden-phone Vidno Vidno
.hidden-tablet Vidno Vidno
.hidden-desktop Vidno Vidno

Testni primer

Spremenite velikost brskalnika ali naložite na različne naprave, da preizkusite zgornje razrede.

Vidno na...

Zelene kljukice označujejo, da je razred viden v vašem trenutnem vidnem polju.

  • Telefon✔ Telefon
  • Tablični računalnik✔ Tablica
  • Namizje✔ Namizje

Skrit na...

Tukaj zelene kljukice označujejo, da je razred skrit v vašem trenutnem vidnem polju.

  • Telefon✔ Telefon
  • Tablični računalnik✔ Tablica
  • Namizje✔ Namizje