Bootstrap 5 est la dernière version du framework bootstrap qui permet à ses utilisateurs de créer des sites Web réactifs de nature et avec une approche mobile. Cette approche spécifie que la conception Web est d'abord développée pour les téléphones mobiles, puis pour d'autres appareils. Bootstrap 5 a été lancé en 2021 et possède de nombreuses fonctionnalités incroyables telles que des feuilles de style rapide et une réactivité améliorée. Ici, nous vous guiderons sur la façon de commencer avec Bootstrap 5, mais avant cela, apprenons un peu plus sur Bootstrap 5.

Caractéristiques du bootstrap 5

Bootstrap 5 possède de nombreuses fonctionnalités qui le distinguent entre autres versions. Quelques-unes de ces caractéristiques sont répertoriées ci-dessous.

1. Cette dernière version de Bootstrap est très conviviale.
2. Il a une réactivité rapide.
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 rapide, ce qui permet d'économiser beaucoup de temps et d'énergie.

Bootstrap 5 vs. Bootstrap 3 et 4

Par rapport aux autres versions bootstrap, en particulier la version 3 et la version 4, la principale différence qui peut être signalée parmi d'autres différences est que Bootstrap 5 utilise la vanille javascript plutôt que jQuery.

Obtenez Bootstrap 5

Avant de pouvoir commencer à utiliser Bootstrap 5, vous devez évidemment le télécharger d'abord et pour cela, vous pouvez soit l'inclure à partir du réseau de livraison de contenu, soit le télécharger et l'installer à partir de bootstrap.com. Pour le bien de ce tutoriel, nous allons inclure Bootstrap 5 de CDN.

Pour CSS

Pour javascript

Maintenant que Bootstrap 5 est inclus, développez notre premier programme.

Début avec bootstrap 5

Ci-dessous, nous vous avons fourni un guide étape par étape sur la façon de démarrer avec bootstrap 5.

1. Faire un document HTML
Le but de fabriquer un fichier HTML à l'aide de bootstrap 5 est d'inclure le doctype HTML5 afin que ce cadre puisse utiliser complètement les divers éléments HTML et les propriétés CSS.

Incluez également l'attribut Lang, ainsi qu'un jeu de caractères. Un autre que nous avons ajouté ici est l'étiquette de méta réactive. Comme nous le savons, Bootstrap 5 développe un site Web avec une approche de mobile axée sur le mobile, y compris une étiquette de méta réactive s'assure que le site Web est réactif sur le toucher et le zoom.

2. Ajouter Bootstrap 5
Maintenant, ajoutez simplement le CDN pour CSS et JavaScript dans votre fichier HTML pour commencer à utiliser Bootstrap 5 sans aucun problème.

Les deux CDN ont été ajoutés dans la balise. Une autre approche pour ajouter le CDN de JavaScript dans le fichier est avant la balise du corps de clôture.

3. Ajouter des éléments
Le code ci-dessus manque entièrement la balise, pour ajouter du contenu, créer divers éléments HTML dans le corps de votre fichier. Étant donné que le but de cet article est de montrer la réactivité de Bootstrap 5, nous vous présentons donc ici avec quelques connaissances de base sur les cours de conteneurs bootstrap.

Une exigence fondamentale de Bootstrap 5 est d'inclure un conteneur dans le but d'emballer le contenu du site Web. 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-fluiD pour obtenir un conteneur pleine largeur qui s'étend sur la largeur complète de la fenêtre.

Ici, nous utiliserons la classe de conteneur-fluid pour démontrer notre première page réactive à l'aide de 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.

En utilisant la classe de conteneur-fluide, nous avons créé un élément div qui niche un

élément, et deux

éléments. Échellez la fenêtre du navigateur de haut en bas pour voir l'effet.

Sortir

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

Conclusion

Pour commencer avec Bootstrap 5, vous devez d'abord faire un fichier HTML de base en incluant le doctype HTML5 afin que Bootstrap 5 puisse utiliser complètement les divers éléments HTML et les propriétés CSS. Ensuite, vous devez soit installer Bootstrap 5, soit obtenir son CDN et l'inclure dans votre document HTML. Ensuite, vous pouvez commencer à créer les éléments que vous souhaitez afficher sur votre page Web. Enfin, enregistrez votre fichier et le tour est. Ce tutoriel vous guide étape par étape sur la façon de commencer avec bootstrap 5.