TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити Bootstrap 5 Jumbotron?

1

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

Що таке Jumbotron?

Jumbotron – це компонент Bootstrap, який займає всю ширину порту перегляду браузера і легко використовується для створення розділів героїв на повну ширину. Це як заклик до дії для демонстрації важливого вмісту та залучення користувачів. Хоча Jumbotron поширюється на всю ширину, ви можете вимкнути повну ширину, розмістивши його всередині елемента контейнера.

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

  • За замовчуванням займає всю ширину макета, ви також можете обмежитися визначеною шириною
  • Повністю чуйний компонент на всіх пристроях
  • Має радіус кордону (прихований при використанні на всю ширину)
  • Колір фону за замовчуванням – #eee
  • Будь -які компоненти Bootstrap, такі як сповіщення та значки, можна додати всередину jumbotron
  • Використовується як розділ із закликом до дії у шаблонах Bootstrap
  • Можна вставити будь -де в шаблони Bootstrap за допомогою класу CSS “.jumbotron"
  • Jumbotron використовує стилі за замовчуванням з головного "bootstrap.min.css" і може бути налаштований за допомогою вбудованих стилів.

Jumbotron повної ширини

Jumbotron додається за допомогою класу CSS “.jumbotron”, а будь -які компоненти можна додавати всередину jumbotron. Нижче наведено приклад, що містить заголовок H2, абзац та кнопку з використанням розділу на всю ширину.

Як створити Bootstrap 5 Jumbotron?

Повний ширини Bootstrap 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 заздалегідь скомпільовані файли CSS та JS Bootstrap. Але якщо ви хочете розмістити файли на своєму сервері, завантажте та завантажте необхідні файли з офіційного сайту. Зверніться до початкового шаблону для початку роботи з Bootstrap.

Bootstrap Jumbotron – немає повної ширини

Якщо вам не потрібна повна ширина, просто використовуйте клас ".jumbotron" без класів ".container" та ".jumbotron-fluid". Таким чином, ви можете вимкнути повну ширину, і ширина джамботрона буде шириною

контейнер.

Як створити Bootstrap 5 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 5 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 (індекс )


Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі