Bootstrap est un cadre CSS conçu pour créer des sites Web réactifs et en particulier les sites Web développés pour les mobiles avant d'être conçus pour tout autre type d'appareil. Ce cadre a été développé à l'aide de HTML, CSS et JavaScript, et se compose de modèles pour créer divers éléments tels que les boutons, les formulaires, les dropdowns et bien d'autres. De plus, ce cadre est open source et est également gratuit.

Comme le titre de l'article le suggère, ici l'objectif principal de notre discussion sera Bootstrap 5. Par conséquent, sans plus tarder, commençons.

Qu'est-ce que Bootstrap 5?

Bootstrap 5 est la dernière version du framework bootstrap qui permet à ses utilisateurs de créer des sites Web incroyables avec des feuilles de style CSS rapides et une réactivité améliorée. Il a été lancé en 2021 et est soutenu par presque tous les navigateurs et plateformes. \

Caractéristiques de Bootstrap

Certaines des caractéristiques distinctives de Bootstrap 5 sont les suivantes.

1. Cette nouvelle version de Bootstrap est légère et peut être personnalisée en fonction des besoins des utilisateurs.
2. Il consiste en une réactivité accrue.
3. Il est utile pour développer des sites Web conçus pour les téléphones mobiles en premier et d'autres appareils plus tard.
4. Ce cadre est compatible avec tous les navigateurs modernes.
5. Il est plus rapide, ainsi, économisant beaucoup de temps et d'énergie.

Bootstrap 5 vs. Autres versions

En comparaison avec d'autres versions, en particulier la version 3 et la version 4, Bootstrap 5 utilise Vanilla Javascript plutôt que JQuery. Cependant, les anciennes versions peuvent toujours être utilisées pour la fixation des bogues ou la modification de la documentation.

Maintenant que nous avons une introduction de base de ce qu'est Bootstrap 5, créons notre première page Web en utilisant ce framework.

Mon premier programme bootstrap5

Dans le but d'utiliser Bootstrap 5, vous devez évidemment l'installer d'abord. Vous pouvez soit inclure ce framework à partir du réseau de livraison de contenu, soit le télécharger et l'installer à partir de bootstrap.com. La première approche est préférée si vous ne voulez pas héberger le bootstrap 5. Ci-dessous, nous avons donné le CDN de bootstrap 5.

Pour CSS

Pour javascript

Maintenant que nous avons notre CDN, créons une page Web à l'aide de bootstrap 5. Ci-dessous, nous avons fourni un guide étape par étape.

Étape 1
La première étape de l'utilisation de Bootstrap 5 consiste à inclure le doctype HTML5 afin que Bootstrap 5 puisse utiliser complet divers éléments HTML et les propriétés CSS.

>

En dehors de HTML5 Doctype, nous avons également inclus l'attribut Lang, ainsi qu'un jeu de caractères.

Étape 2
Comme nous le savons, Bootstrap 5 développe un site Web avec une approche axée sur les mobiles, par conséquent, la prochaine étape consiste à ajouter une méta-balise réactive pour s'assurer que le site Web construit en conséquence est réactif sur le toucher et le zoom.

Inclure le balise suivant.

Étape 3
Une nécessité de base de Bootstrap 5 est d'inclure un conteneur dans le but d'emballer le contenu du site Web. Ces conteneurs enveloppent essentiellement des éléments à l'intérieur d'eux. Afin d'utiliser ces conteneurs, utilisez les deux classes suivantes.

1. .récipient Pour construire un conteneur avec une largeur fixe mais réactive.
2. .conteneur-fluide Pour faire un conteneur pleine largeur qui s'étend sur la largeur complète de la fenêtre.

Étape 4
Pour cette étape, nous ajouterons du contenu pour créer notre page Web à l'aide du conteneur à largeur fixe. Nous gardons notre programme très simple pour qu'en tant que débutant, il est facile de comprendre Bootstrap 5.

Bootstrap 5

Bootstrap 5 est la dernière version du framework bootstrap qui permet à son utilisateur de créer des sites Web incroyables avec Speedy CSS
Styleshets et réactivité améliorée.

En comparaison avec d'autres versions spécifiquement la version 3 et la version 4, Bootstrap 5 utilise la vanille javascript plutôt que
jquery.

Dans le code ci-dessus, en utilisant la classe de conteneurs, nous avons créé un élément DIV qui niche un titre et deux paragraphes. Pour voir l'effet complet de Bootstrap 5 Resimez le dimensionnement de la fenêtre de votre navigateur. Dans la sortie ci-dessous, nous vous avons montré à quoi ressemble la page sur des tailles d'écran aléatoires.

Sortir
Lorsque la largeur de l'écran est de 837px, et au-dessus.

Lorsque la largeur de l'écran est de 677px et moins.

Une page Web a été créée avec succès à l'aide de bootstrap 5.

Conclusion

Bootstrap 5 est la dernière version du CSS Bootstrap Framework qui permet à ses utilisateurs de créer des sites Web réactifs et avec une approche mobile-d'abord. Cette version a des feuilles de style rapide et une réactivité améliorée et a été lancé en 2021. Il a de nombreuses fonctionnalités incroyables qui le distinguent des autres versions. En comparaison avec d'autres versions, en particulier la version 3 et la version 4, Bootstrap 5 utilise Vanilla Javascript plutôt que JQuery. Ce tutoriel couvre tous les détails nécessaires sur Bootstrap 5 ainsi qu'un programme simple.