Bootstrap

Lešení

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 12 sloupců s citlivým otočením

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

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.

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


Odsazení sloupků

4
4 posunutí 4
3 posun 3
3 posun 3
8 offset 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Vnoření sloupů

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ý .rowa sadu .span*sloupců do existujícího .span*sloupce.

Příklad

Vnořené řádky by měly obsahovat sadu sloupců, jejichž součet odpovídá počtu sloupců nadřazeného prvku. Například dva vnořené .span3sloupce by měly být umístěny v .span6.

Úroveň 1 sloupce
Úroveň 2
Úroveň 2 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     Úroveň 1 sloupce
  4.     <div class = "row" > 
  5.       <div class = "span6" > Úroveň 2 </div> 
  6.       <div class = "span6" > Úroveň 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Fluid grid system 12 responzivních, procentuálních sloupců

Kapalné sloupce

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

Procenta, ne pixely

Systém tekuté mřížky používá pro šířky sloupců procenta namísto pevných pixelů. Má také stejné varianty odezvy jako náš systém pevné mřížky, což zajišťuje správné proporce pro klíčová rozlišení obrazovky a zařízení.

Fluidní řady

Udělejte jakýkoli řádek tekutým jednoduše změnou .rowna .row-fluid. Sloupce zůstávají stejné, takže přepínání mezi pevným a proměnlivým rozložením je velmi jednoduché.

Označení

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Hnízdění tekutiny

Vnořování s proměnlivými mřížkami je trochu jiné: počet vnořených sloupců se nemusí shodovat s nadřazeným. Místo toho jsou vaše sloupce resetovány na každé úrovni, protože každý řádek zabírá 100 % nadřazeného sloupce.

Kapalina 12
tekutina 6
tekutina 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Úroveň 1 sloupce
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Úroveň 2 </div> 
  6.       <div class = "span6" > Úroveň 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Přizpůsobení mřížky

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

Proměnné v MÉNĚ

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.

Jak přizpůsobit

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

Zůstat reagovat

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.

Rozvržení Základní šablony pro vytváření webových stránek

Pevné rozložení

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

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

Fluidní rozložení

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

  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 Mediální dotazy pro různá zařízení a rozlišení

Responzivní zařízení

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
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ž 979 pixelů 42 pixelů 20 pixelů
Výchozí 980px a více 60 pixelů 20 pixelů
Velký displej 1210px a více 70 pixelů 30 pixelů

Vyžaduje metaznačku

Chcete-li zajistit, aby zařízení zobrazovala responzivní stránky správně, zahrňte metaznačku viewport.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

To, co dělají

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í

Pomocí dotazů na média

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:

  1. Použijte zkompilovanou responzivní verzi bootstrap-responsive.css
  2. Přidejte @import "responsive.less" a znovu zkompilujte Bootstrap
  3. Upravte a znovu zkompilujte responsive.less jako samostatný soubor

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.

  1.   // Telefony na šířku a dolů
  2.   @media ( max - width : 480px ) { ... }     
  3.  
  4.   // Telefon na šířku až tablet na výšku
  5.   @media ( max - width : 768px ) { ... }     
  6.  
  7.   // Tablet na výšku na šířku a plochu
  8.   @media ( min - width : 768px ) and ( max - width : 980px ) { ... }        
  9.  
  10.   // Velká plocha
  11.   @media ( minimální šířka : 1200 pixelů ) { .. }