Lešení

Vyžaduje HTML5 doctype

Bootstrap využívá určité prvky HTML a vlastnosti CSS, které vyžadují použití doctype HTML5. Zařaďte jej na začátek všech svých projektů.

<!DOCTYPE html>
<html lang = "cs" > 
  ...
</html>

Typografie a odkazy

Bootstrap nastavuje základní globální styly zobrazení, typografie a odkazů. Konkrétně my:

Odstraňte marginna těle
Nastavte background-color: white;nabody
Použijte atributy @baseFontFamily, @baseFontSize, a @baseLineHeightjako náš typografický základ
Nastavte globální barvu odkazu pomocí @linkColora aplikujte podtržení odkazu pouze na:hover

Tyto styly lze nalézt v rámci scaffolding.less .

Obnovit pomocí Normalize

S Bootstrap 2 byl starý resetovací blok vynechán ve prospěch Normalize.css , projektu Nicolase Gallaghera a Jonathana Neala , který také pohání HTML5 Boilerplate . I když používáme velkou část Normalize v rámci našeho reset.less , odstranili jsme některé prvky speciálně pro Bootstrap.

Příklad živé mřížky

Výchozí mřížkový systém Bootstrap využívá 12 sloupců , což vytváří kontejner o šířce 940 pixelů bez aktivovaných responzivních funkcí . S přidaným responzivním souborem CSS se mřížka přizpůsobí na šířku 724 pixelů a 1170 pixelů v závislosti na vaší výřezu. Pod výřezy o velikosti 767 pixelů se sloupce změní na plynulé a svisle se skládají.

Základní mřížka HTML

Pro jednoduché dvousloupcové rozvržení vytvořte a .rowa přidejte příslušný počet .span*sloupců. Protože se jedná o 12sloupcovou mřížku, každý .span*pokrývá určitý počet těchto 12 sloupců a měl by vždy přidat až 12 pro každý řádek (nebo počet sloupců v nadřazeném).

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

V tomto příkladu máme .span4a .span8, což znamená celkem 12 sloupců a celý řádek.

Odsazení sloupků

Přesunout sloupce doprava pomocí .offset*tříd. Každá třída zvětší levý okraj sloupce o celý sloupec. Například .offset4přesune .span4přes čtyři sloupce.

3 posun 2

3 posun 1

3 posun 2

6 offset 3

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Vnoření sloupů

Chcete-li obsah vnořit do výchozí mřížky, přidejte do existujícího sloupce nový .rowa sadu sloupců . Vnořené řádky by měly obsahovat sadu sloupců, jejichž součet odpovídá počtu sloupců nadřazeného prvku..span*.span*

Sloupec úrovně 1

Úroveň 2

<div class = "row" > 
  <div class = "span9" > 
    Sloupec úrovně 1
    <div class = "row" > 
      <div class = "span6" > Úroveň 2 </div> 
      <div class = "span3" > Úroveň 2 </div> 
    </div>
  </div>
</div>

Příklad živé fluidní mřížky

Systém tekuté mřížky používá pro šířky sloupců procenta místo pixelů. Má stejné schopnosti odezvy jako náš systém s pevnou mřížkou a zajišťuje správné proporce pro klíčová rozlišení obrazovky a zařízení.

Základní tekutá mřížka HTML

Udělejte z libovolného řádku "tekutý" změnou .rowna .row-fluid. Třídy sloupců zůstávají stejné, takže je snadné přepínat mezi pevnými a tekutými mřížkami.

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Fluidní kompenzace

Funguje stejným způsobem jako odsazení systému pevné mřížky: přidáním .offset*do libovolného sloupce se posune o tolik sloupců.

4 posunutí 4

3 posun 3

6 offset 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Hnízdění tekutiny

Fluidní mřížky využívají vnořování odlišně: každá vnořená úroveň sloupců by měla přidat až 12 sloupců. Je to proto, že tekutá mřížka používá pro nastavení šířky procenta, nikoli pixely.

Kapalina 12

tekutina 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Kapalina 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        tekutina 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žení

Poskytuje společné rozvržení s pevnou šířkou (a volitelně reagující) pouze s <div class="container">požadovaným.

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

Fluidní rozložení

Vytvořte plynulou stránku se dvěma sloupci pomocí <div class="container-fluid">— skvělé pro aplikace a dokumenty.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Obsah postranního panelu-->
    </div>
    <div class = "span10" > 
      <!--Obsah těla-->
    </div>
  </div>
</div>

Povolení responzivních funkcí

Zapněte responzivní CSS ve svém projektu tím, že do dokumentu zahrnete správnou metaznačku a další šablonu stylů <head>. Pokud jste zkompilovali Bootstrap ze stránky Přizpůsobit, musíte zahrnout pouze značku metadat.

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

Hlavy vzhůru!Bootstrap v tuto chvíli ve výchozím nastavení nezahrnuje responzivní funkce, protože ne vše musí reagovat. Místo nabádání vývojářů, aby tuto funkci odstranili, považujeme za nejlepší ji podle potřeby povolit.

O responzivním Bootstrapu

Dotazy na média umožňují vlastní CSS založené na řadě podmínek – poměry, šířky, typ zobrazení atd. – ale obvykle se zaměřují kolem min-widtha max-width.

Upravte šířku sloupce v naší mřížce
Naskládejte prvky místo plováku tam, kde je to nutné
Změňte velikost nadpisů a textu tak, aby byly vhodnější pro zařízení

Používejte mediální dotazy zodpovědně a pouze jako začátek pro vaše mobilní publikum. U větších projektů zvažte vyhrazené báze kódu a ne vrstvy dotazů na média.

Podporovaná zařízení

Bootstrap podporuje několik mediálních dotazů v jednom souboru, aby pomohly vytvořit vaše projekty vhodnější na různých zařízeních a rozlišeních obrazovky. Zde je zahrnuto:

Označení	Šířka rozložení	Šířka sloupce	Šířka okapu
Velký displej	1200px a více	70 pixelů	30 pixelů
Výchozí	980px a více	60 pixelů	20 pixelů
Portrétní tablety	768px a více	42 pixelů	20 pixelů
Telefony až tablety	767px a méně	Fluidní sloupce, žádné pevné šířky
Telefony	480px a méně	Fluidní sloupce, žádné pevné šířky

/* Velká plocha */
@media ( min - width : 1200px ) { ... }     
 
/* Tablet na výšku na šířku a plochu */
@media ( min - width : 768px ) and ( max - width : 979px ) { ... }        
 
/* Telefon na šířku až tablet na výšku */
@media ( max - width : 767px ) { ... }     
 
/* Telefony na šířku a dolů */
@media ( max - width : 480px ) { ... }

Responzivní třídy utilit

Pro rychlejší vývoj přizpůsobený pro mobilní zařízení použijte tyto třídy nástrojů pro zobrazení a skrytí obsahu podle zařízení. Níže je tabulka dostupných tříd a jejich vliv na dané rozložení dotazu na média (označené podle zařízení). Lze je nalézt v responsive.less.

Třída	Telefony767px a méně	Tablety979 až 768 pixelů	Stolní počítačeVýchozí
`.visible-phone`	Viditelné	Skrytý	Skrytý
`.visible-tablet`	Skrytý	Viditelné	Skrytý
`.visible-desktop`	Skrytý	Skrytý	Viditelné
`.hidden-phone`	Skrytý	Viditelné	Viditelné
`.hidden-tablet`	Viditelné	Skrytý	Viditelné
`.hidden-desktop`	Viditelné	Viditelné	Skrytý

Kdy použít

Používejte na omezeném základě a vyhněte se vytváření zcela odlišných verzí stejného webu. Místo toho je použijte k doplnění prezentace každého zařízení. Responzivní nástroje by se neměly používat s tabulkami a jako takové nejsou podporovány.

Testovací případ citlivých utilit

Změňte velikost prohlížeče nebo načtěte na různých zařízeních a otestujte výše uvedené třídy.

Viditelné na...

Zelená zaškrtnutí označují, že třída je viditelná ve vašem aktuálním výřezu.

Telefon✔ Telefon
Tableta✔ Tablet
plocha počítače✔ Desktop

Skryto na...

Zde zelené zaškrtnutí označují, že třída je ve vašem aktuálním výřezu skryta.

Telefon✔ Telefon
Tableta✔ Tablet
plocha počítače✔ Desktop

Globální nastavení