TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare Bootstrap 5 Jumbotron?

2

Bootstrap è un framework che include CSS, JavaScript, personalizzazione e componenti. I componenti vengono utilizzati per aggiungere elementi predefiniti in qualsiasi punto del modello Bootstrap. Gli stili richiesti per i componenti sono definiti all’interno del CSS principale e alcuni componenti necessitano anche dello script dal file JavaScript precompilato. Ciò aiuta ad aggiungere più istanze dello stesso componente in qualsiasi punto del sito con un aspetto uniforme. In questo articolo discutiamo come aggiungere il componente jumbotron Bootstrap nel tuo sito.

Cos’è Jumbotron?

Jumbotron è un componente Bootstrap che occupa l’intera larghezza della porta di visualizzazione del browser e utilizzato per creare facilmente sezioni di eroe a larghezza intera. È come una casella di invito all’azione per mostrare contenuti importanti e attirare gli utenti. Sebbene il jumbotron si estenda all’intera larghezza, è possibile disabilitare l’ intera larghezza posizionandolo all’interno di un elemento contenitore.

Caratteristiche del componente Jumbotron

  • Per impostazione predefinita occupa l’intera larghezza del layout, puoi anche limitare la larghezza definita
  • Componente completamente reattivo su tutti i dispositivi
  • Ha un raggio del bordo (nascosto se utilizzato con l’intera larghezza)
  • Il colore di sfondo predefinito è #eee
  • Qualsiasi componente Bootstrap come avvisi e badge può essere aggiunto all’interno di jumbotron
  • Utilizzato come una sezione di invito all’azione nei modelli Bootstrap
  • Può essere inserito ovunque sui modelli Bootstrap utilizzando la classe CSS ".jumbotron"
  • Jumbotron utilizza stili predefiniti dal "bootstrap.min.css" principale e può essere personalizzato utilizzando gli stili in linea.

Jumbotron a tutta larghezza

Jumbotron viene aggiunto utilizzando la classe CSS ".jumbotron" e qualsiasi componente può essere aggiunto all’interno di jumbotron. L’esempio seguente contiene un’intestazione H2, un paragrafo e un pulsante che utilizza una sezione a larghezza intera.

Come creare Bootstrap 5 Jumbotron?

Jumbotron Bootstrap a tutta larghezza

Di seguito è riportato il codice completo per il jumbotron a larghezza intera. Come puoi vedere dal codice, la classe ".jumbotron-fluid" viene utilizzata per l’intera larghezza insieme al ".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>

Il codice jumbotron di cui sopra utilizza i collegamenti CDN precompilati Bootstrap CSS e file JS. Ma se vuoi ospitare i file sul tuo server, scarica e carica i file richiesti dal sito ufficiale. Fare riferimento al modello di partenza per iniziare con Bootstrap.

Bootstrap Jumbotron – Nessuna larghezza completa

Se non si desidera l’intera larghezza, utilizzare semplicemente la classe ".jumbotron" senza le classi ".container" e ".jumbotron-fluid". In questo modo puoi disabilitare l’intera larghezza e la larghezza del jumbotron sarà la larghezza del

contenitore.

Come creare Bootstrap 5 Jumbotron?

Bootstrap Jumbotron all’interno del contenitore

Si noti che quando il componente jumbotron non occupa l’intera larghezza, il raggio del bordo sarà visibile. Di seguito è riportato il codice completo per l’esempio jumbotron sopra senza larghezza totale:

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

Personalizzazione del componente Jumbotron

Puoi usare semplici CSS per personalizzare il colore del carattere e il colore di sfondo del jumbotron come di seguito:

Come creare Bootstrap 5 Jumbotron?

Jumbotron Bootstrap personalizzato

Il codice completo per il jumbotron personalizzato di cui sopra è riportato di seguito:

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

Impara Bootstrap 5 (Indice )


Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More