В этой статье будет рассмотрена еще одну функцию, поддерживаемую 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 внутри, как показано в следующем примере -

Welcome to landing page!

This is an example for jumbotron.

Learn more


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



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok