TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur man skapar Bootstrap 5 Jumbotron?

16

Bootstrap är ett ramverk som inkluderar CSS, JavaScript, anpassning och komponenter. Komponenterna används för att lägga till fördefinierade objekt var som helst i Bootstrap -mallen. De stilar som krävs för komponenterna definieras i huvud -CSS och vissa komponenter behöver också skriptet från den förkompilerade JavaScript -filen. Detta hjälper till att lägga till flera instanser av samma komponent var som helst på webbplatsen med ett enhetligt utseende. Låt oss i denna artikel diskutera hur du lägger till Bootstrap jumbotron -komponent på din webbplats.

Vad är Jumbotron?

Jumbotron är en Bootstrap -komponent som upptar hela visningsportens bredd i webbläsaren och används för att enkelt skapa hjältesektioner i full bredd. Det är som en uppmaningsbox för att visa upp viktigt innehåll och locka användare. Även om jumbotron sprider sig till full bredd kan du inaktivera hela bredden genom att placera den i ett behållarelement.

Funktioner i Jumbotron Component

  • Som standard upptar hela bredden på layouten, du kan också begränsa till den definierade bredden
  • Helt lyhörd komponent på alla enheter
  • Har kantradie (dold när den används med full bredd)
  • Standard bakgrundsfärg är #eee
  • Alla Bootstrap -komponenter som varningar och märken kan läggas till i jumbotron
  • Används som en uppmaningsdel i Bootstrap -mallar
  • Kan infogas var som helst i Bootstrap -mallar med CSS -klassen ".jumbotron"
  • Jumbotron använder standardstilar från huvud "bootstrap.min.css" och kan anpassas med inline -format.

Fullbredd Jumbotron

Jumbotron läggs till med hjälp av ".jumbotron" CSS -klass och alla komponenter kan läggas till i jumbotron. Exemplet nedan innehåller en H2 -rubrik, ett stycke och en knapp med sektion i full bredd.

Hur man skapar Bootstrap 5 Jumbotron?

Full Width Bootstrap Jumbotron

Den fullständiga koden för jumbotron i full bredd ges nedan. Som du kan se koden används ".jumbotron-fluid" -klassen för hela bredden tillsammans med ".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>

Ovanstående jumbotron -kod använder CDN -länkar förkompilerade Bootstrap CSS- och JS -filer. Men om du vill vara värd för filerna på din server, ladda ner och ladda upp de nödvändiga filerna från den officiella webbplatsen. Se startmallen för att komma igång med Bootstrap.

Bootstrap Jumbotron – Ingen full bredd

Om du inte vill ha full bredd kan du helt enkelt använda klassen ".jumbotron" utan ".container" och ".jumbotron-fluid" klasser. På detta sätt kan du inaktivera hela bredden och jumbotronbredden är bredden på

behållare.

Hur man skapar Bootstrap 5 Jumbotron?

Bootstrap Jumbotron inuti behållaren

Observera att när jumbotronkomponenten inte upptar full bredd kommer kantradien att synas. Nedan är den fullständiga koden för ovanstående jumbotron -exempel utan full bredd:

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

Anpassa Jumbotron -komponenten

Du kan använda enkel CSS för att anpassa teckensnittsfärgen och bakgrundsfärgen på jumbotronen enligt nedan:

Hur man skapar Bootstrap 5 Jumbotron?

Anpassad Bootstrap Jumbotron

Den fullständiga koden för ovanstående anpassade jumbotron ges nedan:

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

Lär dig Bootstrap 5 (Index )


Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer