TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak stworzyć Bootstrap 5 Jumbotron?

2

Bootstrap to framework, który zawiera CSS, JavaScript, dostosowywanie i komponenty. Komponenty służą do dodawania wstępnie zdefiniowanych elementów w dowolnym miejscu szablonu Bootstrap. Style wymagane dla komponentów są zdefiniowane w głównym CSS, a niektóre komponenty wymagają również skryptu z prekompilowanego pliku JavaScript. Pomaga to dodać wiele wystąpień tego samego komponentu w dowolnym miejscu witryny o jednolitym wyglądzie. W tym artykule omówimy, jak dodać komponent Bootstrap jumbotron do Twojej witryny.

Co to jest Jumbotron?

Jumbotron to komponent Bootstrap, który zajmuje całą szerokość widoku okna przeglądarki i służy do łatwego tworzenia sekcji bohaterów o pełnej szerokości. To jest jak pole wezwania do działania, aby zaprezentować ważne treści i przyciągnąć użytkowników. Chociaż jumbotron rozprzestrzenia się na pełną szerokość, możesz wyłączyć pełną szerokość, umieszczając go w elemencie kontenera.

Cechy komponentu Jumbotron

  • Domyślnie zajmuje całą szerokość układu, możesz też ograniczyć się do zdefiniowanej szerokości
  • W pełni responsywny komponent na wszystkich urządzeniach
  • Ma promień obramowania (ukryty, gdy jest używany z pełną szerokością)
  • Domyślny kolor tła to #eee
  • Wszelkie komponenty Bootstrap, takie jak alerty i odznaki, można dodać do jumbotron
  • Używane jako sekcja wezwania do działania w szablonach Bootstrap
  • Można wstawić w dowolnym miejscu w szablonach Bootstrap za pomocą klasy CSS „.jumbotron"
  • Jumbotron używa domyślnych stylów z głównego „bootstrap.min.css” i można je dostosować za pomocą stylów wbudowanych.

Jumbotron o pełnej szerokości

Jumbotron jest dodawany za pomocą klasy CSS „.jumbotron”, a dowolne komponenty można dodawać wewnątrz jumbotronu. Poniższy przykład zawiera nagłówek H2, akapit i przycisk wykorzystujący sekcję o pełnej szerokości.

Jak stworzyć Bootstrap 5 Jumbotron?

Bootstrap o pełnej szerokości Jumbotron

Pełny kod dla jumbotronu o pełnej szerokości znajduje się poniżej. Jak widać w kodzie, klasa „.jumbotron-fluid” jest używana dla pełnej szerokości wraz z „.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>

Powyższy kod jumbotron używa prekompilowanych łączy CDN z plikami Bootstrap CSS i JS. Ale jeśli chcesz przechowywać pliki na swoim serwerze, pobierz i prześlij wymagane pliki z oficjalnej strony. Zapoznaj się z szablonem startowym, aby rozpocząć korzystanie z Bootstrap.

Bootstrap Jumbotron – brak pełnej szerokości

Jeśli nie chcesz pełnej szerokości, po prostu użyj klasy „.jumbotron” bez klas „.container” i „.jumbotron-fluid”. W ten sposób możesz wyłączyć pełną szerokość, a szerokość jumbotronu będzie szerokością

pojemnik.

Jak stworzyć Bootstrap 5 Jumbotron?

Bootstrap Jumbotron wewnątrz pojemnika

Zauważ, że gdy komponent jumbotron nie zajmuje pełnej szerokości, promień graniczny będzie widoczny. Poniżej znajduje się pełny kod dla powyższego przykładu jumbotron bez pełnej szerokości:

<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>

Dostosowywanie komponentu Jumbotron

Możesz użyć prostego CSS, aby dostosować kolor czcionki i kolor tła jumbotronu, jak poniżej:

Jak stworzyć Bootstrap 5 Jumbotron?

Niestandardowy Bootstrap Jumbotron

Pełny kod powyższego niestandardowego jumbotronu znajduje się poniżej:

<!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>

Dowiedz się o Bootstrapie 5 (Indeks )


Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów