Bootstrap

Lešenie

Bootstrap je postavený na responzívnych 12-stĺpcových mriežkach, rozloženiach a komponentoch.

Globálne nastavenia

Vyžaduje HTML5 doctype

Bootstrap využíva určité prvky HTML a vlastnosti CSS, ktoré vyžadujú použitie doctype HTML5. Zahrňte ho na začiatok všetkých svojich projektov.

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

Typografia a odkazy

Bootstrap nastavuje základné globálne štýly zobrazenia, typografie a odkazov. Konkrétne my:

  • Odstráňte marginna tele
  • Nastavte background-color: white;nabody
  • Ako náš typografický základ použite atribúty @baseFontFamily, @baseFontSize, a@baseLineHeight
  • Nastavte globálnu farbu odkazu cez @linkColora použite podčiarknutie odkazu iba na:hover

Tieto štýly možno nájsť v rámci scaffolding.less .

Obnoviť cez Normalize

S Bootstrap 2 bol starý resetovací blok zrušený v prospech Normalize.css , projektu Nicolasa Gallaghera a Jonathana Neala , ktorý tiež poháňa HTML5 Boilerplate . Aj keď veľa z Normalize používame v rámci nášho reset.less , odstránili sme niektoré prvky špeciálne pre Bootstrap.

Predvolený mriežkový systém

Príklad živej mriežky

Predvolený systém mriežky Bootstrap využíva 12 stĺpcov , čo vytvára kontajner so šírkou 940 pixelov bez aktivovaných responzívnych funkcií . S pridaným responzívnym súborom CSS sa mriežka prispôsobí na šírku 724 pixelov a 1 170 pixelov v závislosti od vašej oblasti zobrazenia. Pod zobrazovanými oblasťami s veľkosťou 767 pixlov sa stĺpce stanú plynulými a zvisle naskladané.

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

Základná mriežka HTML

Pre jednoduché rozloženie s dvoma stĺpcami vytvorte a .rowa pridajte príslušný počet .span*stĺpcov. Keďže ide o 12-stĺpcovú mriežku, každý .span*pokrýva určitý počet týchto 12 stĺpcov a mal by vždy pridať až 12 pre každý riadok (alebo počet stĺpcov v nadradenom stĺpci).

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

V tomto príklade máme .span4a .span8, čo predstavuje celkovo 12 stĺpcov a celý riadok.

Odsadenie stĺpcov

Presuňte stĺpce doprava pomocou .offset*tried. Každá trieda zväčšuje ľavý okraj stĺpca o celý stĺpec. Napríklad .offset4prejde .span4cez štyri stĺpce.

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

Vnorené stĺpy

Ak chcete obsah vnoriť do predvolenej mriežky, pridajte nový stĺpec .rowa množinu .span*stĺpcov do existujúceho .span*stĺpca. Vnorené riadky by mali obsahovať množinu stĺpcov, ktorých súčet zodpovedá počtu stĺpcov nadradeného objektu.

Stĺpec 1. úrovne
Úroveň 2
Úroveň 2 
  1. <div class = "row" > 
  2.   <div class = "span9" > 
  3.     Stĺpec 1. úrovne
  4.     <div class = "row" > 
  5.       <div class = "span6" > Úroveň 2 </div> 
  6.       <div class = "span3" > Úroveň 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Systém tekutej mriežky

Príklad mriežky so živou tekutinou

Systém tekutej mriežky používa pre šírky stĺpcov percentá namiesto pixelov. Má rovnaké schopnosti odozvy ako náš systém pevnej mriežky, čím zabezpečuje správne proporcie pre kľúčové rozlíšenia obrazovky a zariadenia.

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

Základná tekutá mriežka HTML

.rowZmeňte ľubovoľný riadok na „tekutý“ .row-fluid. Triedy stĺpcov zostávajú úplne rovnaké, čo uľahčuje prepínanie medzi pevnými a tekutými mriežkami.

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

Fluidná kompenzácia

Funguje rovnakým spôsobom ako odsadenie systému pevnej mriežky: pridajte .offset*do ľubovoľného stĺpca, aby ste odsadili toľko stĺpcov.

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

Hniezdenie tekutín

Fluidné mriežky využívajú vkladanie odlišne: každá vnorená úroveň stĺpcov by mala obsahovať až 12 stĺpcov. Je to preto, že tekutá mriežka používa na nastavenie šírky percentá, nie pixely.

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

Rozloženie

Pevné rozloženie

Poskytuje spoločné rozloženie s pevnou šírkou (a voliteľne responzívne) s jediným <div class="container">požadovaným.

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

Fluidné rozloženie

Vytvorte plynulú stránku s dvoma stĺpcami s <div class="container-fluid">– skvelé pre aplikácie a dokumenty.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Obsah bočného panela-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Obsah tela-->
  8.     </div>
  9.   </div>
  10. </div>

Responzívny dizajn

Povolenie responzívnych funkcií

Zapnite vo svojom projekte responzívne CSS zahrnutím správnej metaznačky a ďalšej šablóny so štýlmi do <head>dokumentu. Ak ste zostavili Bootstrap zo stránky Prispôsobiť, musíte zahrnúť iba metaznačku.

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

Hlavy hore!Bootstrap v súčasnosti štandardne nezahŕňa responzívne funkcie, pretože nie všetko musí reagovať. Namiesto nabádania vývojárov, aby túto funkciu odstránili, považujeme za najlepšie ju podľa potreby povoliť.

O responzívnom Bootstrape

Responzívne zariadenia

Dopyty na médiá umožňujú vlastný štýl CSS na základe množstva podmienok – pomery, šírky, typ zobrazenia atď. – ale zvyčajne sa zameriavajú okolo min-widtha max-width.

  • Upravte šírku stĺpca v našej mriežke
  • Naskladajte prvky namiesto plaváka tam, kde je to potrebné
  • Zmeňte veľkosť nadpisov a textu tak, aby boli vhodnejšie pre zariadenia

Mediálne dopyty používajte zodpovedne a len ako začiatok pre vaše mobilné publikum. Pri väčších projektoch zvážte špecializované kódové základne a nie vrstvy mediálnych dopytov.

Podporované zariadenia

Bootstrap podporuje niekoľko mediálnych dopytov v jedinom súbore, aby sa vaše projekty stali vhodnejšími na rôznych zariadeniach a rozlíšeniach obrazovky. Tu je zahrnuté:

Označenie Šírka rozloženia Šírka stĺpca Šírka odkvapu
Veľký displej 1200 pixelov a viac 70 pixelov 30 pixelov
Predvolené 980 pixelov a viac 60 pixelov 20 pixelov
Portrétne tablety 768px a viac 42 pixelov 20 pixelov
Telefóny až tablety 767px a menej Fluidné stĺpce, žiadne pevné šírky
Telefóny 480px a menej Fluidné stĺpce, žiadne pevné šírky 
  1. /* Veľká plocha */
  2. @media ( min - width : 1200px ) { ... }     
  3.  
  4. /* Tablet na výšku na šírku a plochu */
  5. @media ( min - width : 768px ) and ( max - width : 979px ) { ... }        
  6.  
  7. /* Telefón na šírku po tablet na výšku */
  8. @media ( max . šírka : 767px ) { ... }     
  9.  
  10. /* Telefóny na šírku a dole */
  11. @media ( max . šírka : 480 pixelov ) { ... }

Responzívne pomocné triedy

Pre rýchlejší vývoj vhodný pre mobilné zariadenia použite tieto triedy nástrojov na zobrazenie a skrytie obsahu podľa zariadenia. Nižšie je uvedená tabuľka dostupných tried a ich vplyv na dané rozloženie dopytov na médiá (označené podľa zariadenia). Možno ich nájsť v responsive.less.

Trieda Telefóny767px a menej Tablety979 až 768 pixelov Stolné počítačePredvolené
.visible-phone Viditeľné
.visible-tablet Viditeľné
.visible-desktop Viditeľné
.hidden-phone Viditeľné Viditeľné
.hidden-tablet Viditeľné Viditeľné
.hidden-desktop Viditeľné Viditeľné

Kedy použiť

Používajte na obmedzenom základe a vyhnite sa vytváraniu úplne odlišných verzií tej istej lokality. Namiesto toho ich použite na doplnenie prezentácie každého zariadenia. Responzívne nástroje by sa nemali používať s tabuľkami a ako také nie sú podporované.

Testovací prípad citlivých utilít

Zmeňte veľkosť prehliadača alebo načítajte na rôznych zariadeniach, aby ste otestovali vyššie uvedené triedy.

Viditeľné na...

Zelené značky začiarknutia označujú, že trieda je viditeľná vo vašom aktuálnom výreze.

  • Telefón✔ Telefón
  • Tablet✔ Tablet
  • Desktop✔ Pracovná plocha

Skryté na...

Zelené značky začiarknutia označujú, že trieda je skrytá vo vašom aktuálnom výreze.

  • Telefón✔ Telefón
  • Tablet✔ Tablet
  • Desktop✔ Pracovná plocha