11. diel - Bootstrap - Jumbotron a Badges

V predchádzajúcom cvičení, Riešené úlohy k 9.-10. lekciu Bootstrap CSS frameworku, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V minulej lekcii, Riešené úlohy k 9.-10. lekciu Bootstrap CSS frameworku , sme dokončili formulára. V dnešnom Bootstrap tutoriálu si predstavíme komponent Jumbotron a odznaky.

Jumbotron

Táto veľkolepo pomenovaná komponenta sprevádza Bootstrap už od samých počiatkov a iste ste sa s ňou už stretli. Jedná sa o 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úžia pre prezentácie kľúčových myšlienok nejaké služby.

Základné HTML štruktúra komponenty vyzerá nasledovne:

<div class="jumbotron">
    <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>
    <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">Udělejte ze mě profíka</a>
    </p>
</div>

Celý obsah uzatvárame do elementu <div> sa triedou .jumbotron. 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 o typografii v Bootstrap. Text v odseku zvýrazňujeme triedou .lead. Ak premýšľate čo robí trieda my-4 u elementu <hr>, tak mu pridáva dolnej a hornej margin. Ku spacing utilities sa ešte v kurze dostaneme.

výsledok:

Fluid jumbotron

Jumbotron môžeme vykresliť aj bez okrúhlych rohov a tak, aby vyplnil celú šírku rodičovského elementu. To docielime priradením triedy .jumbotron-fluid k divu s jumbotronem a obalením obsahu do ešte jedného elementu <div> sa triedou .container.

<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <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>Jsme připravení? Stačí kliknout.</p>
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">Udělejte ze mě profíka</a>
        </p>
    </div>
</div>

A výsledok:

Odznaky

Určite z rôznych internetových stránok poznáte tagy / štítky. Ide zvyčajne o malé obdĺžničky s textom ako "novinka", "zľava" alebo jednoducho s nejakými kategóriami, do ktorých príspevok patrí ( "domáce", "správy", "konferencia"). Bootstrap tieto štítky implementuje ako tzv. Odznaky (odznaky). Typicky je pridávame do nadpisov, tlačidiel alebo je 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:

• .badge-primary - Hlavné farba, ako predvolené modrá
• .badge-secondary - Druhá hlavná farba, východiskové šedá
• .badge-success - Zelená na zľavy a pod.
• .badge-danger - Červená pre chyby apod.
• .badge-warning - Žltá pre novinky
• .badge-info - Neutrálny modrá pre neutrálne tagy
• .badge-light - Svetlučko šedá
• .badge-dark - Takmer čierna
• .badge-white - Úplne biela

HTML kód odznaku môže vyzerať napr. Nasledovne:

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

Odznaky v nadpisoch

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

Odznaky v tlačidlách

Odznaky možné vkladať aj do tlačidiel. Tá si síce prejdeme až nabudúce, však element <button> snáď všetci poznáte a že sa k nemu pridáva triedu .btn a potom druhá trieda s farbou nás určite neprekvapia Odznaky sa v tlačidlách typicky používajú pre zobrazenie počtu položiek, s ktorými možno cez dané tlačidlo pracovať. Pre význam počtu opäť môžeme použiť aj <span> sa triedou .sr-only pre hlasové čítačky.

Odznaky ako tabletky

Odznaky môžeme nastylovať zakulacením rohov do podoby "tabletiek" pridaním triedy .badge-pill. Okrem elementov <span> môžeme k tvorbe ľ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.