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 má na titulných stránkach, kde často slúži na prezentovanie kľúčových myšlienok nejakej služby. Bohužiaľ v Bootstrap 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">ICTdemy.com</h1>
    <p class="lead">A social network where you can learn everything you need, to discuss fabulous salaries in IT corporations or to make your own IT startups happen. All the knowledge in one place, completely free or at the lowest price on the market!</p>
    <hr class="my-4">
    <p>Are you ready? Just click</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">Make me a professional</a>
</div>

Celý obsah uzatvárame do elementu <div>. Hlavný výkrik umiestňujeme do nadpisu <h1>, ktorému dá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 v kurze ešte 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">ICTdemy.com</h1>
        <p class="lead">The social network where you can learn everything you need to know...</p>
        <hr class="my-4">
        <p>Are you ready? Just click</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Make me a professional</a>
    </div>
</div>

A výsledok:

Odznaky

Z rôznych internetových stránok určite 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 v rámci stránky.

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á na chyby a podobne,
• .bg-warning - žltá pre novinky,
• .bg-info - neutrálna modrá pre neutrálne tagy,
• .bg-light - svetlo sivá,
• .bg-dark - takmer čierna.

HTML kód odznaku môže vyzerať napríklad takto:

<span class="badge bg-warning">new</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> poznáme 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štýlovať zaguľatením rohov do podoby "piluliek" pridaním triedy .rounded-pill. Okrem elementov <span> môžeme na tvorbu ľubovoľných odznakov použiť aj odkazy:

V ďalšej lekcii, Bootstrap - List groups, sa budeme venovať tzv. list groups, ktoré sú univerzálnymi komponentmi na zoznamy.