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žka 940 pixelov

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.

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</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 posunutie 4

3 posunutie 3

8 posunutie 4

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</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

Úroveň 1 stĺpca

Úroveň 2

<div class = "row" > 
  <div class = "span12" > 
    Úroveň 1 stĺpca
    <div class = "row" > 
      <div class = "span6" > Úroveň 2 </div> 
      <div class = "span6" > Úroveň 2 </div> 
    </div>
  </div>
</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.

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">.

<body>
  <div class = "container" > 
    ...
  </div>
</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.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Obsah bočného panela-->
    </div>
    <div class = "span10" > 
      <!--Obsah tela-->
    </div>
  </div>
</div>

Podporované zariadenia

Bootstrap podporuje niekoľko mediálnych dopytov, ktoré vám pomôžu prispôsobiť vaše projekty 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ž 940 pixelov	44 pixelov	20 pixelov
Predvolené	940 pixelov a viac	60 pixelov	20 pixelov
Veľký displej	1210px a viac	70 pixelov	30 pixelov

Č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í:

Použite skompilovanú responzívnu verziu bootstrap-responsive.css
Pridajte @import "responsive.less" a znova skompilujte Bootstrap
Upravte a prekompilujte responsive.less ako samostatné

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

  // Telefóny na šírku a dole
  @media ( max . šírka : 480 pixelov ) { ... }     
 
  // Telefón na šírku až tablet na výšku
  @media ( max . šírka : 768 pixelov ) { ... }     
 
  // Tablet na výšku na šírku a plochu
  @media ( min - width : 768px ) and ( max - width : 940px ) { ... }        
 
  // Veľká pracovná plocha
  @media ( minimálna šírka : 1200 pixelov ) { .. }