Kuinka luoda Bootstrap 5 Jumbotron?
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ä.
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.
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:
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 )