Tworzenie Jumbotron
Jumbotron wskazuje na duże pole do wywoływania szczególną uwagę na jakiegoś szczególnego treści lub informacji.
Jumbotron jest wyświetlany jako szare pole z zaokrąglonymi narożnikami. powiększa się również rozmiary czcionki tekstu w środku.
Wskazówka: Wewnątrz jumbotron można umieścić prawie każdy ważny kod HTML, łącznie z innymi Bootstrap elementów / klas.
Za pomocą <div>
elementu z klasy .jumbotron
stworzyć jumbotron:
Bootstrap Tutorial
Bootstrap jest najpopularniejszym HTML, CSS i JS ramy dla rozwoju elastycznych, ruchomych pierwsze projekty w internecie.
Jumbotron Wewnątrz Container
Umieścić jumbotron wewnątrz <div class="container">
Jeśli chcesz, aby jumbotron się 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>
Spróbuj sam " Jumbotron Poza Container
Umieścić jumbotron poza <div class="container">
jeśli chcesz jumbotron przedłużyć 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>
Spróbuj sam " Tworzenie Nagłówek
Strona tytułowa jest jak dzielnik przekroju.
.page-header
klasy dodaje poziomą linię pod nagłówkiem (+ dodaje jakąś dodatkową przestrzeń wokół elementu):
Przykład Nagłówek strony
Za pomocą <div>
element z klasy .page-header
, aby utworzyć nagłówek strony: