Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 80% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu
birthday

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.

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

výsledok:

Jumbotron v Bootstrap
jumbotron.html

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:

Jumbotron v Bootstrap
jumbotron_flu­id.html

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 Bootstrap
odznaky_v_nad­pisech.html

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 v Bootstrap
odznaky_v_tla­citkach.html

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.

Odznaky v Bootstrap
odznaky_pilul­ky_odkazy.html

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


 

Predchádzajúci článok
Riešené úlohy k 9.-10. lekciu Bootstrap CSS frameworku
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Článok pre vás napísal David Čápka
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity (1)

 

 

Komentáre

Avatar
Miloslav Soukup:11. júna 19:13

Opět sice v bootstrapu 5 některé třídy už nefungují, ale takhle to alespoň donutí člověka googlit a vyhledávat, což je do praxe jistá výhoda. Ale i přesto za tento kurz děkuji.

 
Odpovedať
11. júna 19:13
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 1 správy z 1.