Bootstrap

Lešenie

Bootstrap je postavený na responzívnej 12-stĺpcovej mriežke. Zahrnuli sme aj rozloženia s pevnou a premenlivou šírkou založené na tomto systéme.

Globálne štýly pre resetovanie CSS, typografiu a odkazy

Vyžaduje HTML5 doctype

Bootstrap využíva prvky HTML a vlastnosti CSS, ktoré vyžadujú použitie doctype HTML5. Nezabudnite ho zahrnúť na začiatok každej stránky Bootstrapped vo svojom projekte.

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

Typografia a odkazy

V rámci súboru scaffolding.less nastavujeme základné globálne štýly zobrazenia, typografie a odkazov. My konkrétne:

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

Obnoviť cez Normalize

Od Bootstrapu 2 sa tradičný reset CSS vyvinul tak, aby využíval prvky z Normalize.css , projektu Nicolasa Gallaghera , ktorý poháňa aj HTML5 Boilerplate .

Nový reset možno stále nájsť v reset.less , ale kvôli stručnosti a presnosti je odstránených veľa prvkov.

Predvolený mriežkový systém 12 stĺpcov s citlivým otočením

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

Predvolený mriežkový systém poskytovaný ako súčasť Bootstrapu je 940 pixelov široká, 12-stĺpcová mriežka .

Má tiež štyri responzívne variácie pre rôzne zariadenia a rozlíšenia: telefón, tablet na výšku, na šírku stola a malé plochy a veľké širokouhlé plochy.

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

Ako je tu znázornené, základné rozloženie je možné vytvoriť s dvoma „stĺpcami“, pričom každý zahŕňa niekoľko z 12 základných stĺpcov, ktoré sme definovali ako súčasť nášho mriežkového systému.


Odsadenie stĺpcov

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

Vnorené stĺpy

So statickým (netekutým) mriežkovým systémom v Bootstrape je vkladanie jednoduché. Ak chcete vnoriť svoj obsah, stačí pridať nový .rowa sadu .span*stĺpcov do existujúceho .span*stĺpca.

Príklad

Vnorené riadky by mali obsahovať množinu stĺpcov, ktorých súčet zodpovedá počtu stĺpcov nadradeného objektu. Napríklad dva vnorené .span3stĺpce by mali byť umiestnené v rámci .span6.

Úroveň 1 stĺpca
Úroveň 2
Úroveň 2 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     Úroveň 1 stĺpca
  4.     <div class = "row" > 
  5.       <div class = "span6" > Úroveň 2 </div> 
  6.       <div class = "span6" > Úroveň 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Systém tekutej mriežky 12 citlivých stĺpcov na báze percent

Kvapalné stĺpce

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

Percentá, nie pixely

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

Tekuté riadky

Urobte akýkoľvek riadok tekutým jednoducho zmenou .rowna .row-fluid. Stĺpce zostávajú úplne rovnaké, vďaka čomu je prepínanie medzi pevným a plynulým rozložením veľmi jednoduché.

Označenie

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

Hniezdenie tekutín

Vnorenie s tekutými mriežkami je trochu iné: počet vnorených stĺpcov sa nemusí zhodovať s nadradeným. Namiesto toho sa vaše stĺpce obnovia na každej úrovni, pretože každý riadok zaberá 100 % nadradeného stĺpca.

Kvapalina 12
Kvapalina 6
Kvapalina 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Úroveň 1 stĺpca
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Úroveň 2 </div> 
  6.       <div class = "span6" > Úroveň 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Prispôsobenie mriežky

Variabilné Predvolená hodnota Popis
@gridColumns 12 Počet stĺpcov
@gridColumnWidth 60 pixelov Šírka každého stĺpca
@gridGutterWidth 20 pixelov Záporná medzera medzi stĺpcami
@siteWidth Vypočítaný súčet všetkých stĺpov a odkvapov Počíta počet stĺpcov a odkvapov pre nastavenie šírky .container-fixed()mixu

Premenné v MENEJ

Bootstrap obsahuje niekoľko premenných na prispôsobenie predvoleného systému mriežky 940 pixelov, ako je zdokumentované vyššie. Všetky premenné pre mriežku sú uložené v premenných.less.

Ako prispôsobiť

Úprava mriežky znamená zmenu troch @grid*premenných a opätovnú kompiláciu Bootstrapu. Zmeňte premenné mriežky v variables.less a použite jeden zo štyroch zdokumentovaných spôsobov rekompilácie . Ak pridávate viac stĺpcov, nezabudnite pridať CSS pre tie v grid.less.

Zostaňte pohotoví

Prispôsobenie mriežky funguje iba na predvolenej úrovni, mriežke 940 pixelov. Ak chcete zachovať responzívne aspekty Bootstrapu, budete si musieť prispôsobiť aj mriežky v responsive.less.

Rozloženia Základné šablóny na vytváranie webových stránok

Pevné rozloženie

Predvolené a jednoduché rozloženie so šírkou 940 pixelov na stred pre takmer akúkoľvek webovú lokalitu alebo stránku poskytovanú jedným súborom <div class="container">.

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

Fluidné rozloženie

<div class="container-fluid">poskytuje flexibilnú štruktúru stránky, minimálnu a maximálnu šírku a ľavý bočný panel. Je to 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 Dopyty médií pre rôzne zariadenia a rozlíšenia

Responzívne zariadenia

Čo robia

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
Smartfóny 480px a menej Fluidné stĺpce, žiadne pevné šírky
Smartfóny až tablety 767px a menej Fluidné stĺpce, žiadne pevné šírky
Portrétne tablety 768px a viac 42 pixelov 20 pixelov
Predvolené 980 pixelov a viac 60 pixelov 20 pixelov
Veľký displej 1200 pixelov a viac 70 pixelov 30 pixelov

Vyžaduje metaznačku

Ak chcete zabezpečiť, aby zariadenia zobrazovali responzívne stránky správne, zahrňte metaznačku zobrazovanej oblasti.

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

Pomocou mediálnych dopytov

Bootstrap tieto mediálne dotazy automaticky nezahŕňa, ale ich pochopenie a pridanie je veľmi jednoduché a vyžaduje si minimálne nastavenie. Na zahrnutie responzívnych funkcií Bootstrapu máte niekoľko možností:

  1. Použite skompilovanú responzívnu verziu bootstrap-responsive.css
  2. Pridajte @import "responsive.less" a znova skompilujte Bootstrap
  3. Upravte a prekompilujte responsive.less ako samostatný súbor

Prečo to jednoducho nezahrnúť? Pravdupovediac, nie všetko musí byť pohotové. Namiesto nabádania vývojárov, aby túto funkciu odstránili, považujeme za najlepšie ju povoliť.

  1.   // Telefóny na šírku a dole
  2.   @media ( max . šírka : 480 pixelov ) { ... }     
  3.  
  4.   // Telefón na šírku až tablet na výšku
  5.   @media ( max . šírka : 768 pixelov ) { ... }     
  6.  
  7.   // Tablet na výšku na šírku a plochu
  8.   @media ( min - width : 768px ) and ( max - width : 980px ) { ... }        
  9.  
  10.   // Veľká pracovná plocha
  11.   @media ( minimálna šírka : 1200 pixelov ) { .. }

Responzívne pomocné triedy

Čo sú zač

Pre rýchlejší vývoj vhodný pre mobilné zariadenia použite tieto základné triedy nástrojov na zobrazenie a skrytie obsahu podľa zariadenia.

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.

Môžete napríklad zobraziť <select>prvok pre navigáciu na mobilných rozloženiach, ale nie na tabletoch alebo stolných počítačoch.

Podporné triedy

Tu je uvedená tabuľka tried, ktoré podporujeme, 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óny480px a menej Tablety767px a menej Stolné počítače768px a viac
.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é

Testovacia situácia

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

Viditeľné na...

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

Skryté na...

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