Bootstrap

Lešení

Bootstrap je postaven na responzivních 12sloupcových mřížkách, rozvrženích a komponentách.

Globální nastavení

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

  1. <!DOCTYPE html>
  2. <html lang = "cs" > 
  3.   ...
  4. </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.

Výchozí mřížkový systém

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

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

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

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

4
3 posun 2
3 posun 1
3 posun 2
6 offset 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </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
Úroveň 2 
  1. <div class = "row" > 
  2.   <div class = "span9" > 
  3.     Sloupec úrovně 1
  4.     <div class = "row" > 
  5.       <div class = "span6" > Úroveň 2 </div> 
  6.       <div class = "span3" > Úroveň 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Fluidní mřížkový systém

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

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

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.

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
4 posunutí 4
3 posun 3
3 posun 3
6 offset 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </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
tekutina 6
tekutina 6
tekutina 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Kapalina 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         tekutina 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Fluid 6 </div> 
  9.           <div class = "span6" > Fluid 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluid 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Rozvržení

Pevné rozložení

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

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

Fluidní rozložení

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

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Obsah postranního panelu-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Obsah těla-->
  8.     </div>
  9.   </div>
  10. </div>

Responzivní design

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.

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

Responzivní zařízení

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 
  1. /* Velká plocha */
  2. @media ( min - width : 1200px ) { ... }     
  3.  
  4. /* Tablet na výšku na šířku a plochu */
  5. @media ( min - width : 768px ) and ( max - width : 979px ) { ... }        
  6.  
  7. /* Telefon na šířku až tablet na výšku */
  8. @media ( max - width : 767px ) { ... }     
  9.  
  10. /* Telefony na šířku a dolů */
  11. @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é
.visible-tablet Viditelné
.visible-desktop Viditelné
.hidden-phone Viditelné Viditelné
.hidden-tablet Viditelné Viditelné
.hidden-desktop Viditelné Viditelné

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