Bootstrap je postaven na responzivní 12sloupcové mřížce. Zahrnuli jsme také rozvržení s pevnou a tekutou šířkou na základě tohoto systému.
Výchozí mřížkový systém poskytovaný jako součást Bootstrapu je mřížka o šířce 940 pixelů a 12 sloupcích .
Má také čtyři responzivní varianty pro různá zařízení a rozlišení: telefon, tablet na výšku, stolní na šířku a malé plochy a velké širokoúhlé plochy.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Jak je zde znázorněno, základní rozvržení lze vytvořit se dvěma „sloupci“, z nichž každý zahrnuje několik z 12 základních sloupů, které jsme definovali jako součást našeho mřížkového systému.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Se statickým (netekutým) mřížkovým systémem v Bootstrapu je vkládání snadné. Chcete-li vnořit obsah, stačí přidat nový .row
a sadu .span*
sloupců do existujícího .span*
sloupce.
- <div class = "row" >
- <div class = "span12" >
- Úroveň 1 sloupce
- <div class = "row" >
- <div class = "span6" > Úroveň 2 </div>
- <div class = "span6" > Úroveň 2 </div>
- </div>
- </div>
- </div>
Variabilní | Výchozí hodnota | Popis |
---|---|---|
@gridColumns |
12 | Počet sloupců |
@gridColumnWidth |
60 pixelů | Šířka každého sloupce |
@gridGutterWidth |
20 pixelů | Záporná mezera mezi sloupci |
@siteWidth |
Vypočtený součet všech sloupů a okapů | Počítá počet sloupců a žlabů pro nastavení šířky .container-fixed() mixinu |
Bootstrap obsahuje několik proměnných pro přizpůsobení výchozího systému mřížky 940 pixelů, jak je zdokumentováno výše. Všechny proměnné pro mřížku jsou uloženy v variables.less.
Úprava mřížky znamená změnu tří @grid*
proměnných a rekompilaci Bootstrapu. Změňte proměnné mřížky v souboru variables.less a použijte jeden ze čtyř zdokumentovaných způsobů rekompilace . Pokud přidáváte více sloupců, nezapomeňte přidat CSS pro ty v grid.less.
Přizpůsobení mřížky funguje pouze na výchozí úrovni, mřížce 940px. Abyste zachovali responzivní aspekty Bootstrapu, budete si muset také přizpůsobit mřížky v responsive.less.
Výchozí a jednoduché rozvržení na střed o šířce 940 pixelů pro téměř všechny webové stránky nebo stránky poskytované jedním <div class="container">
.
- <body>
- <div class = "container" >
- ...
- </div>
- </body>
<div class="container-fluid">
poskytuje flexibilní strukturu stránky, minimální a maximální šířku a levý postranní panel. Je to 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>
Bootstrap podporuje několik dotazů na média, které vám pomohou lépe přizpůsobit vaše projekty na různých zařízeních a rozlišeních obrazovky. Zde je zahrnuto:
Označení | Šířka rozložení | Šířka sloupce | Šířka okapu |
---|---|---|---|
chytré telefony | 480px a méně | Fluidní sloupce, žádné pevné šířky | |
Portrétní tablety | 480 až 768 pixelů | Fluidní sloupce, žádné pevné šířky | |
Tablety na šířku | 768 až 940 pixelů | 44 pixelů | 20 pixelů |
Výchozí | 940px a více | 60 pixelů | 20 pixelů |
Velký displej | 1210px a více | 70 pixelů | 30 pixelů |
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-width
a max-width
.
Bootstrap tyto dotazy na média automaticky nezahrnuje, ale jejich pochopení a přidání je velmi snadné a vyžaduje minimální nastavení. Máte několik možností, jak zahrnout responzivní funkce Bootstrapu:
Proč to prostě nezahrnout? Po pravdě řečeno, ne všechno musí reagovat. Místo nabádání vývojářů, aby tuto funkci odstranili, považujeme za nejlepší ji povolit.
- // Telefony na šířku a dolů
- @media ( max - width : 480px ) { ... }
- // Telefon na šířku až tablet na výšku
- @media ( max - width : 768px ) { ... }
- // Tablet na výšku na šířku a plochu
- @media ( min - width : 768px ) and ( max - width : 940px ) { ... }
- // Velká plocha
- @media ( minimální šířka : 1200 pixelů ) { .. }