Bootstrap Jumbotron
В этой главе будет объяснена ещё одна функция, поддерживаемая Bootstrap, — Jumbotron. Как следует из названия, этот компонент может увеличить размер заголовков и добавить больше отступов к содержимому целевой страницы. Шаги использования Jumbotron следующие:
- Создайте контейнер с классом.jumbotron. container <div>.
- В дополнение к увеличенному <h1> жирность шрифтаfont-weightуменьшается до 200.
Следующий пример демонстрирует это:
Пример
<div class="container">
<div class="jumbotron">
<h1>Добро пожаловать на целевую страницу!</h1>
<p>Это пример Jumbotron.</p>
<p><a class="btn btn-primary btn-lg" role="button">Подробнее</a>
</p>
</div>
</div>
Попробуйте »
Результат следующий:
Чтобы получить Jumbotron на всю ширину без скруглённых углов, используйте класс.containerвне всех классов.jumbotron, как показано в примере ниже:
Пример
<div class="jumbotron">
<div class="container">
<h1>Добро пожаловать на целевую страницу!</h1>
<p>Это пример Jumbotron.</p>
<p><a class="btn btn-primary btn-lg" role="button">Подробнее</a>
</p>
</div>
</div>
Попробуйте »
Результат следующий:
