Získej svůj iPhone v nové soutěži! Získej svůj iPhone v nové soutěži!
Nová překladatelská soutěž ITnetwork.cz o telefon iPhone, sluchátka Beats a další věcné ceny za 4 hodiny práce.
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

9. díl - Bootstrap - Jumbotron a Badges

HTML a CSS Bootstrap Bootstrap - Jumbotron a Badges

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Bootstrap - Další možnosti formulářů, jsme dokončili formuláře. V dnešním Bootstrap tutoriálu si představíme komponentu Jumbotron a odznaky.

Jumbotron

Tato obscénně pojmenovaná komponenta provází Bootstrap již od samých počátků a jistě jste se s ní již setkali. Jedná se o 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.

Základní HTML struktura komponenty vypadá následovně:

<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>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>

Celý obsah uzavíráme do elementu <div> se třídou .jumbotron. 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 o typografii v Bootstrapu. Text v odstavci zvýrazňujeme třídou .lead. Pokud přemýšlíte co dělá třída my-4 u elementu <hr>, tak mu přidává dolní margin. Ke spacing utilities se ještě v kurzu dostaneme.

Výsledek:

Jumbotron v Bootstrap
jumbotron.html

Fluid jumbotron

Jumbotron můžeme vykreslit i bez kulatých rohů a tak, aby vyplnil celou šířku rodičovského elementu. Toho docílíme přiřazením třídy .jumbotron-fluid k divu s jumbotronem a obalením obsahu do ještě jednoho elementu <div> se třídou .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ýsledek:

Jumbotron v Bootstrap
jumbotron_flu­id.html

Odznaky

Určitě z různých internetových stránek znáte 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 tzv. 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:

  • .badge-primary - Hlavní barva, jako výchozí modrá
  • .badge-secondary - Druhá hlavní barva, výchozí šedá
  • .badge-success - Zelená na slevy apod.
  • .badge-danger - Červená pro chyby apod.
  • .badge-warning - Žlutá pro novinky
  • .badge-info - Neutrální modrá pro neutrální tagy
  • .badge-light - Světlounce šedá
  • .badge-dark - Téměř černá
  • .badge-white - Zcela bílá

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

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

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. Ta si sice projdeme až příště, nicméně element <button> snad všichni znáte a že se k němu přidává třídu .btn a potom druhá třída s barvou nás určitě nepřekvapí :) 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 .sr-only 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 .badge-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.


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
2 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Všechny články v sekci
Bootstrap
Miniatura
Následující článek
Bootstrap - List groups
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!