Как создать Jumbotron в Bootstrap 5?

<

div itemprop=»articleBody»>

Bootstrap — это фреймворк, который включает CSS, JavaScript, настройку и компоненты. Компоненты используются для добавления предопределенных элементов в любом месте шаблона Bootstrap. Стили, необходимые для компонентов, определены в основном CSS, а для некоторых компонентов также требуется сценарий из предварительно скомпилированного файла JavaScript. Это помогает добавить несколько экземпляров одного и того же компонента в любом месте сайта с единообразным внешним видом. В этой статье давайте обсудим, как добавить компонент jumbotron Bootstrap на ваш сайт.

Что такое Джамботрон?

Jumbotron — это компонент Bootstrap, который занимает всю ширину порта просмотра браузера и используется для простого создания полноразмерных разделов героев. Это похоже на окно с призывом к действию, чтобы продемонстрировать важный контент и привлечь пользователей. Хотя jumbotron распространяется на всю ширину, вы можете отключить полную ширину, поместив его внутри элемента контейнера.

Особенности компонента Jumbotron

  • По умолчанию занимает всю ширину макета, вы также можете ограничиться определенной шириной
  • Полностью отзывчивый компонент на всех устройствах
  • Имеет радиус границы (скрыт при использовании с полной шириной)
  • Цвет фона по умолчанию #eee
  • Любые компоненты Bootstrap, такие как предупреждения и значки, могут быть добавлены внутри jumbotron.
  • Используется как призыв к действию в шаблонах Bootstrap
  • Может быть вставлен в любое место в шаблонах Bootstrap с использованием класса CSS «.jumbotron».
  • Jumbotron использует стили по умолчанию из основного «bootstrap.min.css» и может быть настроен с помощью встроенных стилей.

Полноразмерный Jumbotron

Jumbotron добавляется с использованием класса CSS «.jumbotron», и любые компоненты могут быть добавлены внутри jumbotron. Пример ниже содержит заголовок H2, абзац и кнопку, использующую полноразмерную секцию.

Полноразмерный бутстрап Jumbotron
Полноразмерный бутстрап Jumbotron

Полный код для полноширинного джумботрона приведен ниже. Как вы можете видеть из кода, класс «.jumbotron-fluid» используется на всю ширину вместе с «.container».

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Jumbotron -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h2>WebNots Web Consulting Services</h2>
<p>WebNots Web Consulting Services company offers site building, migration and SEO services on WordPress and Weebly platforms. We also share our experience and knowledge through free articles, demos, eBooks, videos and glossary terms for the benefit of bloggers and webmasters community.</p>
<p><a href="https://www.webnots.com/free-ebooks-for-bloggers-and-webmasters/" target="_blank" class="btn
btn-primary btn-lg">Get Free eBooks for Bloggers</a></p>
</div>
</div>
<!-- End of Jumbotron -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

В приведенном выше коде jumbotron используются ссылки CDN, предварительно скомпилированные файлы Bootstrap CSS и JS. Но если вы хотите разместить файлы на своем сервере, скачайте и загрузите необходимые файлы с официального сайта. Обратитесь к начальному шаблону, чтобы начать работу с Bootstrap.

Bootstrap Jumbotron — без полной ширины

Если вам не нужна полная ширина, просто используйте класс «.jumbotron» без классов «.container» и «.jumbotron-fluid». Таким образом, вы можете отключить полную ширину, и ширина jumbotron будет равна ширине контейнера

.

Bootstrap Jumbotron внутри контейнера
Bootstrap Jumbotron внутри контейнера

Обратите внимание, что когда компонент jumbotron не занимает полную ширину, радиус границы будет виден. Ниже приведен полный код приведенного выше примера jumbotron без полной ширины:

<div class="jumbotron">
<h2 style="padding-bottom: 50px">This is an example of jumbotron component inside container.</h2>
<a href="https://www.webnots.com/" class="btn btn-warning btn-lg btn-block">Go to Home Page</a>
</div>

Настройка компонента Jumbotron

Вы можете использовать простой CSS для настройки цвета шрифта и цвета фона jumbotron, как показано ниже:

Пользовательский Bootstrap Jumbotron
Пользовательский Bootstrap Jumbotron

Полный код указанного выше кастомного jumbotron приведен ниже:

<!DOCTYPE html>
<html>
<head>
<title>Custom Full width Bootstrap Jumbotron</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style type="text/css">
.jumbotron{
margin-top: 15px;
padding: 17px;
color: #990000;
background-color: #FFFFCC;
}
</style>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Custom Jumbotron Component</h1>
<p>This is a custom jumbotron using H1, paragraph and full width button. You can add any other elements and customize the color, margins and paddings as you need.</p>
<p><a href="https://www.webnots.com/" class="btn btn-warning btn-lg btn-block">Go to Home Page</a></p>
</div>
</div>
</body>
</html>

Изучите Bootstrap 5 (Индекс)


Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.