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.

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 zaisť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

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
Portrétne tablety 480 až 768 pixelov Fluidné stĺpce, žiadne pevné šírky
Tablety na šírku 768 až 979 pixelov 42 pixelov 20 pixelov
Predvolené 980 pixelov a viac 60 pixelov 20 pixelov
Veľký displej 1210px 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" >

Č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

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 ) { .. }