Создание JumboTron
JumboTron указывает на большую коробку для вызова дополнительного внимания к каким-то особым содержанием или информации.
JumboTron отображается в виде серого прямоугольника с закругленными углами. Он также увеличивает размеры шрифта текста внутри него.
Совет: Внутри JumboTron вы можете поставить практически любой действительный HTML, в том числе других Bootstrap элементов / классов.
Используйте <div> элемент с классом .jumbotron для создания JumboTron:
Bootstrap Учебное пособие
Bootstrap является самым популярным HTML, CSS, JS и рамки для создания гибких и мобильных первые проекты в Интернете.
JumboTron Внутри Контейнер
Поместите JumboTron внутри <div class="container"> если вы хотите, чтобы 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>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Попробуй сам " JumboTron Внешний контейнер
Поместите JumboTron вне <div class="container"> , если вы хотите, чтобы JumboTron продлить до краев экрана:
пример
<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 для создания заголовка страницы: