TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda Bootstrap 5 Jumbotron?

2

Bootstrap on kehys, joka sisältää CSS: n, JavaScriptin, mukautuksen ja komponentit. Komponentteja käytetään ennalta määritettyjen kohteiden lisäämiseen mihin tahansa Bootstrap -mallipohjaan. Komponenteille vaadittavat tyylit on määritetty CSS -pääosassa, ja jotkin komponentit tarvitsevat myös esikäännetyn JavaScript -tiedoston komentosarjan. Tämä auttaa lisäämään useita saman komponentin esiintymiä kaikkialle sivustoon yhtenäisellä ilmeellä. Tässä artikkelissa keskustellaan Bootstrap jumbotron -komponentin lisäämisestä sivustoosi.

Mikä on Jumbotron?

Jumbotron on Bootstrap -komponentti, joka vie selaimen koko näkymäportin leveyden ja jota käytetään helposti koko leveyden sankariosien luomiseen. Se on kuin toimintakehotus, jossa esitetään tärkeää sisältöä ja houkutellaan käyttäjiä. Vaikka jumbotron leviää koko leveydelle, voit poistaa koko leveyden käytöstä asettamalla sen säiliöelementin sisään.

Jumbotron -komponentin ominaisuudet

  • Oletusarvoisesti asettelun koko leveys, voit myös rajoittaa määritellyn leveyden
  • Täysin reagoiva komponentti kaikissa laitteissa
  • Rajasäde (piilotettu, kun sitä käytetään koko leveydellä)
  • Taustan oletusväri on #eee
  • Kaikki Bootstrap -komponentit, kuten hälytykset ja merkit, voidaan lisätä jumbotroniin
  • Käytetään Bootstrap -mallien toimintakehotusosion tavoin
  • Voidaan lisätä mihin tahansa Bootstrap -malleihin käyttämällä ".jumbotron" CSS -luokkaa
  • Jumbotron käyttää oletustyylejä pääosassa "bootstrap.min.css", ja sitä voidaan muokata käyttämällä sisäisiä tyylejä.

Täysi leveys Jumbotron

Jumbotron lisätään käyttämällä .jumbotron CSS -luokkaa ja kaikki komponentit voidaan lisätä jumbotronin sisälle. Alla oleva esimerkki sisältää H2 -otsikon, kappaleen ja painikkeen, joka käyttää koko leveyttä.

Kuinka luoda Bootstrap 5 Jumbotron?

Täysi leveys Bootstrap Jumbotron

Koko leveyden jumbotronin koodi on annettu alla. Kuten näet koodin, luokkaa ".jumbotron-fluid" käytetään koko leveydellä yhdessä ".container" -merkin kanssa.

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

Yllä oleva jumbotron -koodi käyttää CDN -linkkejä, jotka on koottu Bootstrap CSS- ja JS -tiedostoiksi. Mutta jos haluat isännöidä tiedostoja palvelimellasi, lataa ja lähetä tarvittavat tiedostot viralliselta sivustolta. Katso käynnistysmallista Bootstrapin käytön aloittaminen.

Bootstrap Jumbotron – Ei täysleveyttä

Jos et halua koko leveyttä, käytä yksinkertaisesti ".jumbotron" -luokkaa ilman ".container"-ja ".jumbotron-fluid" -luokkia. Tällä tavalla voit poistaa koko leveyden käytöstä ja jumbotronin leveys on

kontti.

Kuinka luoda Bootstrap 5 Jumbotron?

Bootstrap Jumbotron -säiliö

Huomaa, että kun jumbotron -komponentti ei ole koko leveydeltään, reunan säde näkyy. Alla on täydellinen koodi yllä olevalle jumbotron -esimerkille ilman koko leveyttä:

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

Voit muokata jumbotronin fonttiväriä ja taustaväriä yksinkertaisella CSS: llä seuraavasti:

Kuinka luoda Bootstrap 5 Jumbotron?

Mukautettu Bootstrap Jumbotron

Yllä olevan mukautetun jumbotronin täydellinen koodi on alla:

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

Opi Bootstrap 5 (hakemisto )


Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja