Bootstrap è un framework CSS progettato per la creazione di siti Web reattivi e in particolare quei siti Web sviluppati per i cellulari prima di essere progettati per qualsiasi altro tipo di dispositivo. Questo framework è stato sviluppato utilizzando HTML, CSS e JavaScript ed è costituito da modelli per la creazione di vari elementi come pulsanti, forme, discese e molti altri. Inoltre, questo framework è open source ed è anche gratuito.

Come suggerisce il titolo dell'articolo, qui l'obiettivo principale della nostra discussione sarà Bootstrap 5. Pertanto, senza ulteriori indugi, iniziamo.

Cos'è Bootstrap 5?

Bootstrap 5 è ​​l'ultima versione del framework Bootstrap che consente ai suoi utenti di creare siti Web straordinari con fogli di stile CSS rapidi e una maggiore reattività. È stato lanciato nell'anno 2021 ed è supportato da quasi tutti i browser e le piattaforme. \

Caratteristiche di bootstrap

Alcune delle caratteristiche distintive di Bootstrap 5 sono le seguenti.

1. Questa versione più recente di Bootstrap è leggera e può essere personalizzata in base alle esigenze degli utenti.
2. Consiste in una reattività maggiore.
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. È più veloce, così, risparmiando molto tempo ed energia.

Bootstrap 5 vs. altre versioni

In confronto ad altre versioni, in particolare la versione 3 e la versione 4, Bootstrap 5 utilizza Vanilla JavaScript piuttosto che jQuery. Tuttavia, le versioni precedenti possono ancora essere utilizzate per la fissazione o la modifica della documentazione dei bug.

Ora che abbiamo un'introduzione di base di ciò che Bootstrap 5 è, costruiamo la nostra prima pagina web utilizzando questo framework.

Il mio primo programma Bootstrap5

Ai fini dell'utilizzo di Bootstrap 5, ovviamente devi installarlo prima. È possibile includere questo framework dalla rete di consegna dei contenuti o scaricarlo da bootstrap.com. Il primo approccio è preferito se non si desidera ospitare Bootstrap 5. Di seguito abbiamo dato il CDN di Bootstrap 5.

Per CSS

Per JavaScript

Ora che abbiamo la nostra CDN, creiamo una pagina Web utilizzando Bootstrap 5. Di seguito, abbiamo fornito una guida passo-passo.

Passo 1
Il primo passo per utilizzare Bootstrap 5 è ​​includere HTML5 Doctype in modo che Bootstrap 5 possa fare un uso completo di vari elementi HTML e proprietà CSS.

>

Oltre a HTML5 Doctype abbiamo anche incluso l'attributo Lang, insieme a un set di caratteri.

Passo 2
Come sappiamo che Bootstrap 5 sviluppa un sito Web con un approccio mobile-primo, pertanto, il passo successivo è quello di aggiungere un meta tag reattivo per assicurarsi che il sito Web creato di conseguenza sia reattivo al tatto e zooming.

Includere quanto segue il tag.

Passaggio 3
Una necessità di base di Bootstrap 5 è ​​quella di includere un contenitore allo scopo di avvolgere il contenuto del sito Web. Questi contenitori fondamentalmente avvolgono elementi all'interno di essi. Per utilizzare questi contenitori utilizzare le seguenti due classi.

1. .contenitore costruire un contenitore con larghezza fissa ma reattiva.
2. .Container-Fluid Per creare un contenitore a larghezza intera che si estende sulla larghezza completa del viewport.

Passaggio 4
Per questo passaggio aggiungeremo alcuni contenuti per creare la nostra pagina Web utilizzando il contenitore a larghezza fissa. Manteniamo il nostro programma molto semplice in modo che come principiante sia facile capire 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.

Nel codice sopra, usando la classe del contenitore abbiamo creato un elemento Div che nidifica ulteriormente un'intestazione e due paragrafi. Per vedere l'effetto completo di Bootstrap 5 Ridimensionare la finestra del browser. Nell'output di seguito, ti abbiamo mostrato come la pagina guarda le dimensioni dello schermo casuali.

Produzione
Quando la larghezza dello schermo è 837px e sopra.

Quando la larghezza dello schermo è 677px e minore.

Una pagina web è stata creata correttamente utilizzando Bootstrap 5.

Conclusione

Bootstrap 5 è ​​l'ultima versione del framework Bootstrap CSS che consente ai suoi utenti di creare siti Web che sono reattivi in ​​natura e con un approccio mobile. Questa versione ha fogli di stile rapidi e una maggiore reattività ed è stata lanciata nel 2021. Ha molte caratteristiche sorprendenti che lo distinguono dalle altre versioni. In confronto ad altre versioni, in particolare la versione 3 e la versione 4, Bootstrap 5 utilizza Vanilla JavaScript piuttosto che jQuery. Questo tutorial copre tutti i dettagli necessari su Bootstrap 5 insieme a un semplice programma.