Bootstrap 5 è ​​l'ultima versione del framework Bootstrap che consente ai suoi utenti di creare siti Web che sono reattivi in ​​natura e con un approccio mobile-first. Questo approccio specifica che il web design viene 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 fogli di stile rapido e maggiore reattività. Qui ti guideremo su come iniziare con Bootstrap 5, ma prima impariamo un po 'di più su Bootstrap 5.

Caratteristiche di Bootstrap 5

Bootstrap 5 ha molte funzionalità che lo fanno risaltare tra le altre versioni. Alcune di queste caratteristiche sono elencate di seguito.

1. Quest'ultima versione di Bootstrap è molto intuitiva.
2. Ha una rapida reattività.
3. È utile per lo sviluppo di siti Web progettati prima per i telefoni cellulari e altri dispositivi in ​​seguito.
4. Questo framework è compatibile con tutti i browser moderni.
5. È rapido, quindi, risparmiando molto tempo ed energia.

Bootstrap 5 vs. Bootstrap 3 e 4

Rispetto ad altre versioni bootstrap, in particolare alla versione 3 e alla versione 4, la differenza principale che può essere indicata tra le altre differenze è che Bootstrap 5 utilizza la vaniglia javascript piuttosto che jQuery.

Ottieni Bootstrap 5

Prima di poter iniziare a utilizzare Bootstrap 5, ovviamente devi scaricarlo prima e per questo, puoi includerlo dalla rete di consegna dei contenuti o scaricarlo e installarlo da Bootstrap.com. Per il bene di questo tutorial, includeremo Bootstrap 5 da CDN.

Per CSS

Per JavaScript

Ora che Bootstrap 5 è ​​incluso, sviluppiamo il nostro primo programma.

Iniziare con Bootstrap 5

Di seguito ti abbiamo fornito una guida passo-passo su come iniziare con Bootstrap 5.

1. Crea un documento HTML
Lo scopo di realizzare un file HTML utilizzando Bootstrap 5 è ​​quello di includere il doctype HTML5 in modo che questo framework possa fare un uso completo di vari elementi HTML e proprietà CSS.

Includere anche l'attributo Lang, insieme a un set di caratteri. Un altro che abbiamo aggiunto qui è il meta tag reattivo. Come sappiamo, Bootstrap 5 sviluppa un sito Web con un approccio mobile-primo, quindi, incluso un meta tag reattivo, assicura che il sito Web sia reattivo al tatto e zooming.

2. Aggiungi Bootstrap 5
Ora aggiungi semplicemente la CDN per CSS e JavaScript nel tuo file HTML per iniziare a utilizzare Bootstrap 5 senza alcun problema.

Entrambi i CDN sono stati aggiunti nel tag. Un altro approccio all'aggiunta della CDN di JavaScript nel file è prima del tag del corpo di chiusura.

3. Aggiungi elementi
Il codice sopra manca interamente il tag, quindi, per aggiungere alcuni contenuti, creare vari elementi HTML nel corpo del tuo file. Poiché lo scopo di questo post è mostrare la reattività di Bootstrap 5, quindi ti presentiamo qui con alcune conoscenze di base sulle classi di contenitori bootstrap.

Un requisito fondamentale di Bootstrap 5 è ​​quello di includere un contenitore allo scopo di avvolgere il contenuto del sito Web. Per utilizzare questi contenitori utilizzare le seguenti due classi.

1. .contenitore costruire un contenitore con larghezza fissa ma reattiva.
2. .Container-fluiD per ottenere un contenitore a larghezza intera che si estende sulla larghezza completa del viewport.

Qui useremo la classe Container-Fluid per dimostrare la nostra prima pagina reattiva usando Bootstrap 5.

Bootstrap 5

Bootstrap 5 è ​​l'ultima versione del framework Bootstrap che consente al suo utente di creare siti Web sorprendenti con CSS veloce
fogli di stile e maggiore reattività.

In confronto ad altre versioni in particolare versione 3 e versione 4, Bootstrap 5 utilizza Vanilla JavaScript piuttosto che
jQuery.

Usando la classe Container-Fluid abbiamo creato un elemento Div che nidifica ulteriormente a

elemento e due

elementi. Ridimensionare la finestra del browser su e giù per vedere l'effetto.

Produzione

Una pagina Web reattiva è stata creata correttamente utilizzando Bootstrap 5.

Conclusione

Per iniziare con Bootstrap 5 devi prima creare un file HTML di base includendo HTML5 Doctype in modo che Bootstrap 5 possa fare un uso completo di vari elementi HTML e proprietà CSS. Successivamente è necessario installare Bootstrap 5 o ottenere la sua CDN e includerlo nel documento HTML. Quindi puoi iniziare a creare gli elementi che vuoi mostrare sulla tua pagina web. Infine, salva il tuo file e voilà è stata creata la tua prima pagina Bootstrap 5. Questo tutorial ti guida un passo per passo su come iniziare con Bootstrap 5.