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.

Globální styly pro resetování CSS, typografii a odkazy

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é Bootstrapped stránky ve vašem projektu.

  1. <!DOCTYPE html>
  2. <html lang = "cs" > 
  3.   ...
  4. </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 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ý v Bootstrapu využívá 12 sloupců , které se vykreslují v šířkách 724px, 940px (výchozí bez zahrnuty responzivní CSS) a 1170px. Pod výřezy o velikosti 767 pixelů se sloupce stanou tekutými a svisle se skládají.

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

Fluidní mřížkový systém 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á procenta pro šířky sloupců 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

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í

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 jediném 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.

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

  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 : 767px ) { ... }     
  6.  
  7.   /* Tablet na výšku na šířku a plochu */
  8.   @media ( min - width : 768px ) and ( max - width : 979px ) { ... }        
  9.  
  10.   /* Velká plocha */
  11.   @media ( min - width : 1200px ) { ... }

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é
.visible-tablet Viditelné
.visible-desktop Viditelné
.hidden-phone Viditelné Viditelné
.hidden-tablet Viditelné Viditelné
.hidden-desktop Viditelné Viditelné

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

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