Bootstrap Jumbotron и заголовок страницы
Создание Джамботрона
Джамботрон обозначает большую коробку для привлечения дополнительного внимания к какому-то особому контенту или информации.
Джамботрон отображается в виде серого прямоугольника с закругленными углами. Он также увеличивает размер шрифта текста внутри него.
Совет: внутри jumbotron вы можете поместить практически любой допустимый HTML, включая другие элементы/классы Bootstrap.
Используйте <div>элемент с классом .jumbotronдля создания jumbotron:
Учебник по начальной загрузке
Bootstrap — это самая популярная среда HTML, CSS и JS для разработки адаптивных мобильных проектов в Интернете.
Джамботрон внутри контейнера
Поместите джамботрон внутрь, <div class="container">если вы хотите, чтобы джамботрон НЕ доходил до края экрана:
Пример
<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
Поместите джамботрон снаружи, <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>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Создание заголовка страницы
Заголовок страницы похож на разделитель разделов.
Класс .page-headerдобавляет горизонтальную линию под заголовком (+ добавляет дополнительное пространство вокруг элемента):
Пример заголовка страницы
Используйте <div>элемент с классом .page-headerдля создания заголовка страницы:
Пример
<div class="page-header">
<h1>Example Page Header</h1>
</div>