Bootstrap 5 è ​​la versione più recente del framework Bootstrap che consente ai suoi utenti di creare siti Web reattivi creati con tecnica mobile-first. Bootstrap 5 è ​​stato lanciato nell'anno 2021 e ha molte caratteristiche distintive come ha fogli di stile rapidi e maggiore reattività. In questo tutorial, dimostreremo come è possibile creare una semplice pagina Web utilizzando Bootstrap 5.

Cominciamo.

Come creare la tua prima pagina Web utilizzando Bootstrap 5

Includi Bootstrap 5

Il primo passo è ovviamente aggiungere Bootstrap 5 nel tuo file HTML. Ai fini di includere Bootstrap 5 Ottieni una CDN per CSS e JavaScript e aggiungerlo nel tuo file come abbiamo mostrato di seguito.

Oltre alla CDN abbiamo anche aggiunto un set di caratteri UTF-8 insieme a un meta tag reattivo. In questo tag, la larghezza è impostata sulla larghezza del dispositivo, il che significa che la larghezza della pagina Web cambierà in corrispondenza alla larghezza del dispositivo, mentre la scala iniziale è impostata su 1, il che significa che quando la pagina Web viene caricata dal browser Per la prima volta il livello di zoom sarà 1.

Crea una barra di navigazione

Dopo aver incluso Bootstrap 5 nel nostro file, ora creeremo una barra di navigazione in alto utilizzando varie classi Bootstrap 5.

Di seguito spiegheremo le varie classi utilizzate per creare una barra di navigazione.

1. IL .Navbar viene utilizzato per avvolgere una barra di navigazione insieme a .Navbar-Expand-Sm per crollo reattivo, nel frattempo il .BG-Secondary E .navbar-dark sono i diversi schemi di colore forniti alla barra di navigazione.
2. IL .contenitore La classe avvolge tutti gli elementi di una barra di navigazione con una larghezza fissa.
3. IL .bianco-bianco E .centro di testo Le classi corrispondono al colore e all'allineamento dell'intestazione principale del sito Web.
4. IL .navbar-nav viene utilizzato per creare una barra di navigazione che abbia un'altezza massima ed è leggera e supporta anche i distorsioni. Nel frattempo, .ML-Auto Imposta il margine sinistro degli elementi dell'elenco su Auto.
5. IL .Nav-Item, E .Nav-link vengono utilizzati per creare vari elementi dell'elenco nella barra di navigazione.
6. IL .attivo La classe rende attivo un link.

Produzione

Una barra di navigazione è stata creata con successo.

Aggiunta di contenuti

Ora che abbiamo creato con successo una barra di navigazione, aggiungeremo alcuni contenuti sul sito Web. Nel codice seguente, stiamo solo aggiungendo un po 'di testo alla sezione "About noi".

Chi siamo

CIAO. Benvenuti nella mia prima pagina web. Questa è una pagina web reattiva che ho creato usando bootstrap 5. Bootstrap è la versione più recente del framework Bootstrap che consente ai suoi utenti di creare siti Web reattivi con una tecnica mobile-first. Questo approccio afferma che il web design è stato sviluppato per la prima volta per i telefoni cellulari e successivamente per altri dispositivi.

Bootstrap 5 è ​​stato lanciato nell'anno 2021 e ha molte caratteristiche straordinarie come ha fogli di stile rapidi e maggiore reattività.

Varie classi utilizzate per aggiungere contenuti nella pagina Web sono spiegate qui.

1. IL .riga La classe crea una riga in cui posizioneremo il nostro testo, nel frattempo, .allineare-items-sinistra La classe allinea il contenuto a sinistra.
2. IL .col La classe genera una colonna, mentre il .text-col La classe fornisce un colore predefinito al testo.

Nota: Allo scopo di aggiungere contenuti, abbiamo praticamente costruito un sistema di griglia sopra. Un sistema a griglia in bootstrap 5 utilizza vari contenitori, righe e colonne per regolare e allineare il contenuto.

Produzione

Alcuni contenuti sono stati aggiunti alla pagina web.

Aggiunta di galleria di immagini

Per rendere il nostro sito Web più interessante, stiamo aggiungendo alcune immagini costruendo un altro sistema di griglia.

Qui abbiamo spiegato le lezioni utilizzate sopra.

1. IL .Col-MD-4 La classe crea quattro colonne di uguale larghezza e specifica che la larghezza del dispositivo è media o maggiore di 768px, nel frattempo, la larghezza del contenitore è 720px.
2. IL .MT-3 La classe fornisce una parte superiore del margine al layout della griglia.
3. IL .Col-LG-3 La classe crea 3 colonne di uguale larghezza e afferma che la larghezza del dispositivo è grande con dimensioni dello schermo maggiore o uguale a 992px.
4. Infine le immagini sono rese reattive il .img-fluiclasse d.

Produzione

Una galleria di immagini reattiva è stata aggiunta con successo.

Aggiunta di un pulsante

Infine, aggiungeremo un pulsante sul nostro sito Web.

Contattaci

Le classi utilizzate per creare il pulsante sono discusse di seguito.

1. IL .MT-2 Imposta la parte superiore del margine del pulsante.
2. Ai fini della personalizzazione del nostro pulsante stiamo usando il .btn classe, nel frattempo, il .btn-secondario la classe specifica il colore del pulsante e il .Btn-Large La classe afferma la dimensione del pulsante.

Produzione
Ecco come appare la pagina web completa.

Una semplice pagina web è stata creata correttamente utilizzando Bootstrap 5.

Nota: Per valutare la reattività della pagina Web ridimensionare il browser Web su e giù.

Conclusione

Ai fini della creazione della prima pagina Web utilizzando Bootstrap 5, è necessario avere una comprensione di base di varie classi integrate Bootstrap 5. Una necessità di base di questo framework è un contenitore che avvolge elementi al suo interno. Le classi di container possono essere utilizzate con altre classi per creare varie entità che una pagina web ha come barra di navigazione, griglia di immagine, pulsanti, ecc. In questo articolo, abbiamo dimostrato con l'aiuto di un esempio appropriato come è possibile creare la tua prima pagina web usando Bootstrap 5.