11. diel - Bootstrap - Jumbotron a Badges

V predchádzajúcom kvíze, Kvíz - Formuláre v Bootstrap, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

V dnešnom Bootstrap tutoriále si predstavíme Jumbotron a odznaky.

Jumbotron

Jumbotron je veľký informačný box s výkrikom a typicky aj krátkymi informáciami, sprevádzanými nejakým tlačidlom. Svoje miesto nachádza na titulných stránkach, kde často slúži na prezentovanie kľúčových myšlienok nejakej služby. Bohužiaľ v Bootstrape 5 už nie je Jumbotron podporovaný. Stále však môžeme využiť špeciálne pomocné triedy a dosiahnuť tak rovnaký efekt.

Základná HTML štruktúra takejto stránky vyzerá nasledovne:

<div class="bg-light p-5 rounded-3 m-3">
    <h1 class="display-3">ITnetwork.cz</h1>
    <p class="lead">Sociální síť, kde se naučíte vše potřebné pro pobírání pohádkových platů v IT korporacích nebo pro uskutečnění vlastních IT startupů. Všechny znalosti česky, na jednom místě, zcela zdarma nebo za nejnižší cenu na trhu.</p>
    <hr class="my-4">
    <p>Jste připravení? Stačí kliknout.</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">Udělejte ze mě profíka</a>
</div>

Celý obsah uzatvárame do elementu <div>. Hlavný výkrik umiestňujeme do nadpisu <h1>, ktorému dodávame triedu .display-3 pre ešte väčší text ako sme si popísali v lekcii Bootstrap - Typografia. Text v odstavci zvýrazňujeme triedou .lead. Trieda my-4 pri elemente <hr> pridáva dolný a horný margin. K spacing utilities sa ešte v kurze dostaneme.

Výsledok v prehliadači:

Vyplnenie celej šírky

Všetko môžeme vykresliť aj bez okrúhlych rohov a tak, aby bola vyplnená celá šírka rodičovského elementu. To docielime priradením triedy .container-fluid:

<div class="container-fluid bg-light p-5">
    <div class="container p-5 bg-white rounded">
        <h1 class="display-3">ITnetwork.cz</h1>
        <p class="lead">Sociální síť, kde se naučíte vše potřebné...</p>
        <hr class="my-4">
        <p>Jste připravení? Stačí kliknout.</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Udělejte ze mě profíka</a>
    </div>
</div>

A výsledok:

Odznaky

Určite z rôznych internetových stránok poznáme tagy/štítky. Ide obvykle o malé obdĺžniky s textom ako "novinka", "zľava" alebo jednoducho s nejakými kategóriami, do ktorých príspevok patrí ("domáce", "správy", "konferencie"). Bootstrap tieto štítky implementuje ako takzvané badges (odznaky). Typicky ich pridávame do nadpisov, tlačidiel alebo ich vkladáme kamkoľvek na stránku.

Odznaky vkladáme kamkoľvek ako elementy <span> s triedou .badge. Ďalej opäť pridávame ďalšiu triedu podľa farby:

• .bg-primary - hlavná farba, ako predvolená modrá,
• .bg-secondary - druhá hlavná farba, predvolená šedá,
• .bg-success - zelená na zľavy a podobne,
• .bg-danger - červená pre chyby a podobne,
• .bg-warning - žltá pre novinky,
• .bg-info - neutrálna modrá pre neutrálne tagy,
• .bg-light - svetlunka sivá,
• .bg-dark - takmer čierna.

<span class="badge bg-warning">novinka</span>

Môžeme tiež nastaviť farbu pozadia s kontrastnou farbou popredia, a to pomocou triedy .text-bg-primary a podobne.

Odznaky v nadpisoch

Ukážme si, ako odznaky vyzerajú v nadpisoch:

Odznaky v tlačidlách

Odznaky je možné vkladať aj do tlačidiel. Element <button> je nám známy a zrejme nás neprekvapí, že sa k nemu pridáva trieda .btn a potom druhá trieda s farbou. Odznaky sa v tlačidlách typicky používajú na zobrazenie počtu položiek, s ktorými je možné cez dané tlačidlo pracovať. Pre význam počtu opäť môžeme použiť aj <span> s triedou .visually-hidden pre hlasové čítačky:

Odznaky ako pilulky

Odznaky môžeme naštylovať zaguľatením rohov do podoby "tabletok" pridaním triedy .rounded-pill. Okrem elementov <span> môžeme na tvorbu ľubovoľných odznakov použiť aj odkazy:

V budúcej lekcii, Bootstrap - List groups , sa budeme venovať tzv. list groups, čo je univerzálny komponent na zoznamy.