В этой статье будет рассмотрена еще одну функцию, поддерживаемую Bootstrap - Jumbotron. Как видно из названия, этот компонент может дополнительно увеличить размер заголовков и добавить много разницы для контента целевой страницы. Чтобы использовать Jumbotron -

• Создайте контейнер div с классом .jumbotron.
• В дополнение к более крупному h1 размер шрифта уменьшается до 200px.

Следующий пример демонстрирует это -

<div class = "container">
 
   <div class = "jumbotron">
      <h1>Welcome to landing page!</h1>
      <p>This is an example for jumbotron.</p>
      
      <p>
         <a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
      </p>
   </div>
  
</div>

Чтобы получить Jumbotron полной ширины, и без закругленных углов, используйте .jumbotron класс вне всех .container классов и вместо того, чтобы добавить .container внутри, как показано в следующем примере -

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!