Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 11 - Bootstrap - Jumbotron a Badges

V předchozím kvízu, Kvíz - Formuláře v Bootstrap, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

V dnešním Bootstrap tutoriálu si představíme Jumbotron a odznaky.

Jumbotron

Jumbotron je velký informační box s výkřikem a typicky i krátkými informacemi, doprovázenými nějakým tlačítkem. Své místo nalézá na titulních stránkách, kde často slouží pro prezentování klíčových myšlenek nějaké služby. Bohužel v Bootstrapu 5 již není Jumbotron podporován. Stále však můžeme využít speciálních pomocných tříd a dosáhnout tak stejného efektu.

Základní HTML struktura takovéto stránky vypadá následovně:

<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 uzavíráme do elementu <div>. Hlavní výkřik umisťujeme do nadpisu <h1>, kterému dodáváme třídu .display-3 pro ještě větší text jak jsme si popsali v lekci Bootstrap - Typografie. Text v odstavci zvýrazňujeme třídou .lead. Třída my-4 u elementu <hr> přidává dolní a horní margin. Ke spacing utilities se ještě v kurzu dostaneme.

Výsledek v prohlížeči:

Jumbotron
jumbotron.html

Vyplnění celé šířky

Vše můžeme vykreslit i bez kulatých rohů a tak, aby byla vyplněná celá šířka rodičovského elementu. Toho docílíme přiřazením třídy .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ýsledek:

HTML fluid rozložení webu v Bootstrapu
kostra_webu_flu­id.html

Odznaky

Určitě z různých internetových stránek známe tagy/štítky. Jedná se obvykle o malé obdélníčky s textem jako "novinka", "sleva" nebo jednoduše s nějakými kategoriemi, do kterých příspěvek patří ("domácí", "zprávy", "konference"). Bootstrap tyto štítky implementuje jako takzvané badges (odznaky). Typicky je přidáváme do nadpisů, tlačítek nebo je vkládáme kamkoli na stránku.

Odznaky vkládáme kamkoli jako elementy <span> s třídou .badge. Dále opět přidáváme další třídu podle barvy:

  • .bg-primary - hlavní barva, jako výchozí modrá,
  • .bg-secondary - druhá hlavní barva, výchozí šedá,
  • .bg-success - zelená na slevy a podobně,
  • .bg-danger - červená pro chyby a podobně,
  • .bg-warning - žlutá pro novinky,
  • .bg-info - neutrální modrá pro neutrální tagy,
  • .bg-light - světlounce šedá,
  • .bg-dark - téměř černá.

HTML kód odznaku může vypadat například takto:

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

Můžeme také nastavit barvu pozadí s kontrastní barvou popředí, a to pomocí třídy .text-bg-primary a podobně.

Odznaky v nadpisech

Ukažme si, jak odznaky vypadají v nadpisech:

Odznaky v Bootstrap
odznaky_v_nad­pisech.html

Odznaky v tlačítkách

Odznaky lze vkládat i do tlačítek. Element <button> je nám znám a zřejmě nás nepřekvapí, že se k němu přidává třída .btn a potom druhá třída s barvou. Odznaky se v tlačítkách typicky používají pro zobrazení počtu položek, se kterými lze přes dané tlačítko pracovat. Pro význam počtu opět můžeme použít i <span> se třídou .visually-hidden pro hlasové čtečky:

Odznaky v Bootstrap
odznaky_v_tla­citkach.html

Odznaky jako pilulky

Odznaky můžeme nastylovat zakulacením rohů do podoby "pilulek" přidáním třídy .rounded-pill. Kromě elementů <span> můžeme k tvorbě libovolných odznaků použít i odkazy:

Odznaky v Bootstrap
odznaky_pilul­ky_odkazy.html

V příští lekci, Bootstrap - List groups, se budeme věnovat tzv. list groups, což je univerzální komponenta na seznamy.


 

Předchozí článek
Kvíz - Formuláře v Bootstrap
Všechny články v sekci
Kompletní kurz CSS frameworku Bootstrap
Přeskočit článek
(nedoporučujeme)
Bootstrap - List groups
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
603 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity