Tenhle díl je jiný než tři předchozí. Není to výklad pro čtenáře, ale zkušební článek pro ověření šablony. Každý blok níž je živá ukázka: když se po nějaké úpravě rozbije, pozná se to právě tady.
Píše se to proto, že text článku není jediné, co se do něj dá vložit. Pod textem leží mřížka, kterou šablona dodává, a dá se v ní poskládat skoro cokoli, aniž by se psal jediný řádek vlastního stylu. Tenhle článek je zároveň ukázka i kontrola.
Obsah
Pravidlo, bez kterého to nedrží
Řádek mřížky má po stranách záporné okraje. Kdyby se napsal přímo do článku, přečuhoval by z textového sloupce o patnáct bodů na každou stranu. Proto se každý řádek obaluje do container-fluid, jehož odsazení ten záporný okraj přesně vyruší.
Jinými slovy: vnější obal, uvnitř řádek, uvnitř sloupce. Pokaždé stejně.
Dva sloupce vedle sebe
Levý sloupec zabírá na počítači polovinu šířky. Na telefonu se oba roztáhnou přes celou šířku a stoupnou pod sebe, protože šířka je zadaná až od velikosti md.
Pravý sloupec. Dohromady dávají dvanáct dílů, na které je šířka článku rozdělená.
<div class="container-fluid">
<div class="row">
<div class="col-md-6">Levý sloupec</div>
<div class="col-md-6">Pravý sloupec</div>
</div>
</div>
Obal má po stranách patnáct bodů odsazení, řádek v něm patnáct bodů záporného okraje. Vyruší se a blok lícuje s odstavcem nad sebou. Text uvnitř sloupce pak začíná o těch patnáct bodů dál, a to je ta mezera mezi sloupci.
Tři sloupce
První
Čtyři dvanáctiny.
Druhý
Také čtyři.
Třetí
A zbytek.
<div class="col-md-4">...</div> <!-- třikrát -->
Dílů je dvanáct, takže se dělí na dva, tři, čtyři i šest stejných sloupců.
Sloupce, které se na mobilu přeskládají
Pořadí v kódu nemusí být pořadí na obrazovce. Tenhle blok má na počítači obrázkovou část vpravo, na telefonu ale vyjede nahoru, aby čtenář nezačínal textem.
Text. V kódu stojí první, na počítači zůstává vlevo.
Tenhle blok je v kódu druhý, na telefonu se ale vysune nad text.
<div class="col-md-7 order-md-1">Text</div>
<div class="col-md-5 order-first order-md-2">Vysune se nahoru</div>
order-first platí od nejmenší obrazovky, order-md-2 ho od tabletu výš přebije.
Odsazený sloupec
Osm dílů odsazených o dva, tedy vystředěný blok užší než text kolem.
<div class="col-md-8 offset-md-2">Vystředěný blok</div>
Karty vedle sebe
Co karta umí
Rámeček s vlastním pozadím. h-100 jí řekne, ať je stejně vysoká jako sousedka, i když má kratší text.
Druhá karta
Kratší text, stejná výška.
<div class="col-md-6">
<div class="card h-100 p-3">...</div>
</div>
Co se ukáže jen na široké obrazovce
Tenhle odstavec je vidět jen na obrazovce široké aspoň 992 bodů. Na telefonu se nevykreslí vůbec.
A tenhle naopak jen na užší obrazovce. Na počítači ho nevidíte.
<div class="d-none d-lg-block">Jen na široké obrazovce</div>
<div class="d-lg-none">Jen na úzké obrazovce</div>
Na skrytí obsahu je dobré být opatrný. Co se nevykreslí, to čtenář na telefonu nemá, a vyhledávač to v obsahu stránky najde.
Odsazení, zarovnání a štítky
Řádek se svisle vystředěnými sloupci. Vlevo text, vpravo štítky, a drží v jedné ose bez ohledu na to, který je vyšší.
<div class="row align-items-center">
<div class="col-md-8">Text</div>
<div class="col-md-4 text-md-right">
<span class="badge badge-success">hotovo</span>
</div>
</div>
Odsazení se píše písmenem strany a číslem od nuly do pěti: mt-3 je odstup nahoře, pb-4 odsazení dole, mx-auto vystředí blok. Zarovnání textu obstará text-center nebo text-md-right, který se zapne až od tabletu výš.
Jak si to ověřit
Zužte okno prohlížeče. Nejdřív se přeskládá modrý blok nad text, pak se rozpadnou sloupce pod sebe a nakonec se prohodí oba bloky v části o široké obrazovce. Všechno výš je obyčejné HTML napsané přímo do článku, bez jediného řádku vlastního stylu.
