Bootstrap

Gradbeni odri

Bootstrap je zgrajen na odzivnih 12-stolpčnih mrežah, postavitvah in komponentah.

Globalne nastavitve

Zahteva vrsto dokumenta HTML5

Bootstrap uporablja določene elemente HTML in lastnosti CSS, ki zahtevajo uporabo dokumenta HTML5. Vključite ga na začetku vseh vaših projektov.

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

Tipografija in povezave

Bootstrap nastavi osnovni globalni prikaz, tipografijo in sloge povezav. Natančneje, mi:

  • Odstranite marginna telo
  • 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

Te sloge je mogoče najti znotraj scaffolding.less .

Ponastavi prek Normalize

Z Bootstrap 2 je bil stari blok ponastavitve opuščen v korist Normalize.css , projekta Nicolasa Gallagherja in Jonathana Neala , ki prav tako poganja HTML5 Boilerplate . Medtem ko uporabljamo večino Normalize v našem reset.less , smo nekatere elemente odstranili posebej za Bootstrap.

Privzeti mrežni sistem

Primer žive mreže

Privzeti mrežni sistem Bootstrap uporablja 12 stolpcev , kar pomeni vsebnik širine 940 slikovnih pik brez omogočenih odzivnih funkcij . Z dodano odzivno datoteko CSS se mreža prilagodi tako, da bo široka 724 slikovnih pik in 1170 slikovnih pik, odvisno od vašega vidnega polja. Pod vidnimi okni 767 slikovnih pik postanejo stolpci tekoči in se zložijo navpično.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Osnovna mreža HTML

Za preprosto postavitev dveh stolpcev ustvarite .rowin dodajte ustrezno število .span*stolpcev. Ker je to mreža z 12 stolpci, vsak .span*obsega določeno število od teh 12 stolpcev in jih mora vedno dodati do 12 za vsako vrstico (ali število stolpcev v nadrejenem).

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

Glede na ta primer imamo .span4in .span8, kar pomeni skupno 12 stolpcev in celotno vrstico.

Poravnalni stolpci

Premaknite stolpce v desno z uporabo .offset*razredov. Vsak razred poveča levi rob stolpca za cel stolpec. Na primer, .offset4premika se .span4po štirih stolpcih.

4
3 zamik 2
3 zamik 1
3 zamik 2
6 zamik 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Gnezdenje stolpcev

Če želite svojo vsebino ugnezditi s privzeto mrežo, dodajte nov .rowin nabor .span*stolpcev znotraj obstoječega .span*stolpca. Ugnezdene vrstice morajo vključevati nabor stolpcev, ki ustrezajo številu stolpcev nadrejenega.

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

Sistem tekoče mreže

Primer tekoče mreže v živo

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

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

Osnovna tekoča mreža HTML

Naredite katero koli vrstico "tekočo", tako da jo spremenite .rowv .row-fluid. Razredi stolpcev ostanejo povsem enaki, kar olajša preklapljanje med fiksnimi in tekočimi mrežami.

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

Izravnavanje tekočine

Deluje na enak način kot zamik sistema s fiksno mrežo: dodajte .offset*kateremu koli stolpcu, da zamaknete toliko stolpcev.

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

Tekočinsko gnezdenje

Tekoče mreže uporabljajo gnezdenje drugače: vsaka ugnezdena raven stolpcev mora dodati do 12 stolpcev. To je zato, ker tekoča mreža za nastavitev širin uporablja odstotke, ne slikovnih pik.

Tekočina 12
Tekočina 6
Tekočina 6
Tekočina 6
Tekočina 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Tekočina 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Tekočina 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Tekočina 6 </div> 
  9.           <div class = "span6" > Tekočina 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Tekočina 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Postavitve

Fiksna postavitev

Zagotavlja običajno postavitev s fiksno širino (in izbirno odzivno) s samo <div class="container">zahtevanimi.

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

Tekoča postavitev

Ustvarite tekočo stran z dvema stolpcema z <div class="container-fluid">—odličnim 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>

Odziven dizajn

Omogočanje odzivnih funkcij

Vklopite odzivni CSS v svojem projektu tako, da v svoj dokument vključite ustrezno metaoznako in dodatno datoteko s slogi <head>. Če ste Bootstrap prevedli s strani za prilagajanje, morate vključiti samo meta oznako.

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

Glavo pokonci!Bootstrap trenutno privzeto ne vključuje odzivnih funkcij, saj ni nujno, da je vse odzivno. Namesto da razvijalce spodbujamo k odstranitvi te funkcije, se nam zdi najbolje, da jo omogočimo po potrebi.

O odzivnem Bootstrapu

Odzivne naprave

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
Velik zaslon 1200px in več 70 slikovnih pik 30 slikovnih pik
Privzeto 980px in več 60 slikovnih pik 20 slikovnih pik
Portretne tablice 768px in več 42 slikovnih pik 20 slikovnih pik
Telefoni na tablice 767px in manj Tekoči stolpci, brez fiksnih širin
telefoni 480px in manj Tekoči stolpci, brez fiksnih širin 
  1. /* Veliko namizje */
  2. @media ( najmanjša širina : 1200 slikovnih pik ) { ... }     
  3.  
  4. /* Pokončna tablica v ležečo in namizje */
  5. @media ( najmanjša širina : 768 slikovnih pik ) in ( največja širina : 979 slikovnih pik ) { ... }        
  6.  
  7. /* Ležeči telefon v pokončni tablični računalnik */
  8. @media ( max - širina : 767px ) { ... }     
  9.  
  10. /* Ležeči telefoni in navzdol */
  11. @media ( max - width : 480px ) { ... }

Odzivni uporabni razredi

Za hitrejši razvoj, prijazen do mobilnih naprav, uporabite te razrede pripomočkov za prikazovanje in skrivanje vsebine glede na napravo. Spodaj je tabela razpoložljivih razredov in njihov učinek na dano postavitev medijske poizvedbe (označeno z napravo). Najdete jih v responsive.less.

Razred telefoni767px in manj Tablete979px do 768px Namizni računalnikiPrivzeto
.visible-phone Vidno
.visible-tablet Vidno
.visible-desktop Vidno
.hidden-phone Vidno Vidno
.hidden-tablet Vidno Vidno
.hidden-desktop Vidno Vidno

Kdaj uporabiti

Uporabljajte omejeno in se izogibajte ustvarjanju popolnoma različnih različic istega mesta. Namesto tega jih uporabite za dopolnitev predstavitve vsake naprave. Odzivni pripomočki se ne smejo uporabljati s tabelami in kot taki niso podprti.

Testni primer odzivnih pripomočkov

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