Bootstrap Jumbotron i nagłówek strony
Tworzenie Jumbotronu
Jumbotron oznacza duże pudełko, które zwraca szczególną uwagę na jakąś specjalną treść lub informację.
Jumbotron jest wyświetlany jako szare pudełko z zaokrąglonymi rogami. Zwiększa również rozmiary czcionek tekstu w nim zawartego.
Wskazówka: Wewnątrz jumbotronu możesz umieścić prawie każdy poprawny kod HTML, w tym inne elementy/klasy Bootstrap.
Użyj <div>elementu z klasą, .jumbotronaby stworzyć jumbotron:
Samouczek Bootstrap
Bootstrap to najpopularniejszy framework HTML, CSS i JS do tworzenia responsywnych, mobilnych projektów internetowych.
Pojemnik wewnętrzny Jumbotron
Umieść jumbotron wewnątrz, <div class="container">jeśli chcesz, aby jumbotron NIE rozciągał się do krawędzi ekranu:
Przykład
<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>
Pojemnik zewnętrzny Jumbotron
Umieść jumbotron na zewnątrz, <div class="container">jeśli chcesz, aby jumbotron rozciągał się do krawędzi ekranu:
Przykład
<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>
Tworzenie nagłówka strony
Nagłówek strony jest jak dzielnik sekcji.
Klasa .page-headerdodaje poziomą linię pod nagłówkiem (+ dodaje trochę dodatkowej przestrzeni wokół elementu):
Przykładowy nagłówek strony
Użyj <div>elementu z klasą, .page-headeraby utworzyć nagłówek strony:
Przykład
<div class="page-header">
<h1>Example Page Header</h1>
</div>