Lešenie

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.

<!DOCTYPE html>
<html lang = "sk" > 
  ...
</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ý poháňa aj 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.

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

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

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

3 posunutie 2

3 posun 1

3 posunutie 2

6 posunutie 3

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

<div class = "row" > 
  <div class = "span9" > 
    Stĺpec 1. úrovne
    <div class = "row" > 
      <div class = "span6" > Úroveň 2 </div> 
      <div class = "span3" > Úroveň 2 </div> 
    </div>
  </div>
</div>

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, pričom zabezpečuje správne proporcie pre kľúčové rozlíšenia obrazovky a zariadenia.

Základná tekutá mriežka HTML

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

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

3 posunutie 3

6 posunutie 6

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

<div class = "row-fluid" > 
  <div class = "span12" > 
    Kvapalina 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        Kvapalina 6
        <div class = "row-fluid" > 
          <div class = "span6" > Fluid 6 </div> 
          <div class = "span6" > Fluid 6 </div> 
        </div>
      </div>
      <div class = "span6" > Fluid 6 </div> 
    </div>
  </div>
</div>

Pevné rozloženie

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

<body>
  <div class = "container" > 
    ...
  </div>
</body>

Fluidné rozloženie

Vytvorte plynulú stránku s dvoma stĺpcami s <div class="container-fluid">– 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>

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.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<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

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

/* Veľká plocha */
@media ( min - width : 1200px ) { ... }     
 
/* Tablet na výšku na šírku a plochu */
@media ( min - width : 768px ) and ( max - width : 979px ) { ... }        
 
/* Telefón na šírku po tablet na výšku */
@media ( max . šírka : 767px ) { ... }     
 
/* Telefóny na šírku a dole */
@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é	Skryté	Skryté
`.visible-tablet`	Skryté	Viditeľné	Skryté
`.visible-desktop`	Skryté	Skryté	Viditeľné
`.hidden-phone`	Skryté	Viditeľné	Viditeľné
`.hidden-tablet`	Viditeľné	Skryté	Viditeľné
`.hidden-desktop`	Viditeľné	Viditeľné	Skryté

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 nástrojov

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

Globálne nastavenia