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.

Vyžaduje HTML5 doctype

Bootstrap využívá prvky HTML a vlastnosti CSS, které vyžadují použití doctype HTML5. Nezapomeňte jej zahrnout na začátek každé stránky Bootstrapped ve vašem projektu.

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

Typografie a odkazy

V rámci souboru scaffolding.less nastavujeme základní globální styly zobrazení, typografie a odkazu. Konkrétně my:

Odstraňte okraj na 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

Obnovit pomocí Normalize

Od Bootstrapu 2 se tradiční reset CSS vyvinul tak, aby využíval prvky z Normalize.css , projektu Nicolase Gallaghera , který také pohání HTML5 Boilerplate .

Nový reset lze stále nalézt v reset.less , ale kvůli stručnosti a přesnosti bylo odstraněno mnoho prvků.

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.

Odsazení sloupků

4 posunutí 4

3 posun 3

8 offset 4

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

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

Kapalné sloupce

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í

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

<div class = "row-fluid" > 
  <div class = "span12" > 
    Úroveň 1 sloupce
    <div class = "row-fluid" > 
      <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

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.

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

<body>
  <div class = "container" > 
    ...
  </div>
</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.

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

Responzivní zařízení

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í

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
chytré telefony	480px a méně	Fluidní sloupce, žádné pevné šířky
Smartphony až tablety	767px a méně	Fluidní sloupce, žádné pevné šířky
Portrétní tablety	768px a více	42 pixelů	20 pixelů
Výchozí	980px a více	60 pixelů	20 pixelů
Velký displej	1200px 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.

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

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:

Použijte zkompilovanou responzivní verzi bootstrap-responsive.css
Přidejte @import "responsive.less" a znovu zkompilujte Bootstrap
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.

  // 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 : 980px ) { ... }        
 
  // Velká plocha
  @media ( minimální šířka : 1200 pixelů ) { .. }

Responzivní třídy utilit

Co jsou

Pro rychlejší vývoj optimalizovaný pro mobily použijte tyto základní třídy nástrojů pro zobrazení a skrytí obsahu podle zařízení.

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

Můžete například zobrazit <select>prvek pro navigaci na mobilních rozvrženích, ale ne na tabletech nebo počítačích.

Podpůrné třídy

Zde je uvedena tabulka tříd, které podporujeme, 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	Telefony480px a méně	Tablety767px a méně	Stolní počítače768px a více
`.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ý

Modelový případ

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

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

Skryto na...

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