Bootstrap Jumbotron a záhlaví stránky
Vytvoření Jumbotronu
Jumbotron označuje velký rámeček pro upozornění na zvláštní obsah nebo informace.
Jumbotron se zobrazí jako šedý rámeček se zaoblenými rohy. Zvětší také velikost písma textu uvnitř.
Tip: Do jumbotronu můžete vložit téměř jakýkoli platný kód HTML, včetně dalších prvků/tříd Bootstrap.
Použijte <div>prvek s třídou .jumbotronk vytvoření jumbotronu:
Tutorial bootstrap
Bootstrap je nejpopulárnější HTML, CSS a JS framework pro vývoj responzivních mobilních projektů na webu.
Jumbotron uvnitř kontejneru
Umístěte jumbotron dovnitř, <div class="container">pokud chcete, aby se jumbotron NESAHAL k okraji obrazovky:
Příklad
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Jumbotron vnější kontejner
<div class="container">Pokud chcete, aby jumbotron sahal k okrajům obrazovky, umístěte jumbotron mimo :
Příklad
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Vytvoření záhlaví stránky
Záhlaví stránky je jako oddělovač sekcí.
Třída .page-headerpřidá vodorovnou čáru pod nadpis (+ přidá kolem prvku další mezeru):
Příklad záhlaví stránky
K vytvoření záhlaví stránky použijte <div>prvek s třídou :.page-header
Příklad
<div class="page-header">
<h1>Example Page Header</h1>
</div>