Bootstrap je z principu věci složitý jako ruská ponorka. Všechny její čudlíky prostě znát nemůžete. Vybral jsem ty z nich, které by zasloužily vytáhnout z hlubin oceánu. Povídat si budeme o aktuální verzi tři, protože Bootstrap čtyřka je stále v alfa stádiu.

1) Bootlint validátor

2) Ne, nemusí být responzivní

Od-responzivnění se může hodit třeba když generujete tiskové verze nebo PDF z bootstrapího HTML. V zásadě stačí odstranit meta značku pro viewport a šířku u .container. Podívejte se ale raději na celý návod.

3) Pan Křížek a paní Stříška

Vypadá to jako blbost, ve skutečnosti jde ale o užitečný důsledek toho, že se autoři Bootstrapu snaží i části komponent vyrábět s ohledem na znovupoužitelnosti ve vašem kódu.

„Zavírací“ křížek, který můžete využít ve vašich vlastních komponentách:

<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>

Podobně lze pro vlastní komponenty ukrást i paní Stříšku, indikátor rozklikávání:

<span class="caret"></span>

See the Pen Bootstrap: Close Icon and Caret by Martin Michálek (@machal) on CodePen.

4) Všechno možné vodorovné centrování

Centrování v CSS je na seznamu děsných lidských problémů tak dlouho, že se s ním trápili snad i staří Egypťané. Autoři Bootstrapu to naštěsti vyřešili za vás. Stačí si pamatovat dvě třídy.

Pro blokové elementy to je .center-block:

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Použití jako mixin
.element {
  .center-block();
}

Pro inline a inline-block elementy pak třídu .text-center, ta dělá pouhé text-align: center.

5) Schovávání a zobrazování obsahu

Triviální problém? Těžko. Jen si spočítejte potřebné mixiny a třídy:

  • .show – zobrazení elementu. ( ve zdroji display: block !important)
  • .hidden – schování elementu. (display: none !important)
  • .invisible – nastavení „neviditelnosti“ elementu (visibility: hidden)
  • .text-hide – schování textu, třeba proto aby byla vidět ikonka na pozadí

…na konkrétních breakpointech

Schovávání je jednoduché – třída má formát .hidden-(breakpoint). Pro tichou likvidaci elementu na největších displejích tedy použijeme .hidden-lg.

Třída pro zobrazení má formu .visible-(breakpoint)-(hodnota-display). Pro zobrazení inline-block elementu jen na nejmenších displejích použijeme .visible-xs-inline-block. Podívejte se prosím raději na všechny kombinace tříd.

…pro tisk

Podobně jako u breakpointů máme sadu tříd pro zobrazení (.visible-print-block, .visible-print-inline, .visible-print-inline-block) a jedinou pro schování – .hidden-print.

…pro obsah určený slepeckým čtečkám

  • .sr-only – zobrazit jen na slepeckých čtečkách („Screen Reader Only“)
  • .sr-only-focusable – schová se, ale pokud se na něj uživatel dostane lineárním procházením (třeba klávesnicí), znovu se zobrazí – respektive, slepecký odečítač jej přečte
<a class="sr-only sr-only-focusable" 
  href="#content">
    Jdi na obsah stránky
</a>
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

6) Mixina pro velikost

Nic jako dostavba Temelína, prostě jen drobnost co vám může zjednodušit zapisování rozměrů ve vlastním LESS kódu:

.size(@width; @height) {
  width: @width;
  height: @height;
}

.square(@size) {
  .size(@size; @size);
}

// Použití
.my-icon { 
  .square(64px); 
}

7) Automatické vytečkování delšího textu

Ano, i mixina pro vytečkování jednořádkového textu pomocí Text Overflow je v Bootstrapu vestavěná.

.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Použití
.nav-item {
  display: inline-block;
  .text-overflow();
}

8) Změna vizuální hierarchie nadpisů

Často se stává, že logika struktury dokumentu je jiná než vizuální hierarchie stránky. Víte, že i tohle je v Bootstrapu vestavěné v podobě tříd .h1.h6?

<h2 class="h3">
  Nadpis druhé úrovně, který 
  bude vypadat jako třetí úrovně
</h2>  

9) * { box-sizing: border-box; }

Opakování je matka moudrosti. I tenhle, většině profesionálních kodérů dobře známý zápis, může uživatelům Bootstrapu zamotat hlavu.

Hlavně těm, co kolem CSS chodí jako kolem horké kaše. A že jich je hodně! Vždyť jsou jednou z hlavních cílových skupin Bootstrapu.

Pokud se ve vašem CSS kódu „podivně“ počítají výšky a šířky, může za to box-sizing. Přepne vám veškeré styly do border-boxu. Podivnosti nastanou i při vkládání komponent třetích stran – třeba Google Maps.

10) Data-atributy pro konfiguraci JS komponent

Nezapomeňte, že během jednoduchých použití Bootstrapu nemusíte komponenty konfigurovat javascriptovým kódem. U většiny komponent si vystačíte s data-atributy.

Takový dropdown sice můžete označit a inicializovat „klasicky“ v JS kódu:

$('.dropdown-toggle').dropdown()

Elegantnější je ale udělat to v data-atributu přímo v HTML:

<button data-toggle="dropdown">
  Dropdown
</button>  

11) Vlastní třídy pro layout

Tohle je jedno z oblíbených témat na Bootstrap školeních. Někomu prostě nevoní zápis layoutu, který si Bootstrap v klasickém užití vynucuje:

<div class="row">
  <div class="col-sm-8 col-lg-9" 
    role="main">
    ...
  </div>
  <div class="col-sm-4 col-lg-3" 
    role="complementary">
    ...
  </div>
</div>

Nic ale nebrání hezkému zápisu tohoto typu:

<div class="content-container">
  <div role="main">...</div>
  <div role="complementary">...</div>
</div>

Jak na to? Stačí Bootstrap používat doporučovaným způsobem – s pomocí CSS preprocesoru. Mixiny pro layout jsou k dispozici, takže v LESS kódu napíšeme:

.content-container {
  .make-row();
}

[role="main"] {
  .make-sm-column(8);
  .make-lg-column(9);  
}

[role="complementary"] {
  .make-sm-column(4);
  .make-lg-column(3);
}

Výsledný CSS kód bude totožný s předchozím. Bootstrap samozřejmě nabízí mnohem více mixin pro tvorbu layoutu.


Líbilo? Ocením, když článek nasdílíte ostatním. Máte další tipy? Neváhejte je přidat do komentářů. Díky!

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii Frontend frameworky.

Detailně: layout v Bootstrapu 4

28. 3. 2017 v příručce

Nový systém pro tvorbu rozvržení stránky v chystané verzi Bootstrapu. Pořádně do hloubky.

Rozhovor: S Adamem Kudrnou o Bootstrapu

16. 3. 2016 na blogu

Jak Bootstrap používají ve VisionApps? Vyplatí se živé HTML prototypy? Jak je spojit s grafikou? A proč Adam dává někdy přednost Material UI?

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč