Bootstrap 4 Jumbotron Учебное пособие

<

div itemprop=”articleBody”>

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

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

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

Посмотреть демонстрацию компонента Bootstrap Jumbotron

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

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

Джамботрон полной ширины

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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 4 Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

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

Предлагает: Получите 97% скидку на конструктор сайтов Mobirise 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

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

<!DOCTYPE html>
<html>
<head>
<title>Custom Full width Bootstrap Jumbotron</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" 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>

<

p style=”text-align: center;”>Посмотреть демонстрацию компонента Bootstrap Jumbotron

    </div>

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *