Présentation et installation de Bootstrap 5

Bootstrap 5 est un Framework Html / CSS / JavaScript c’est-à-dire qu’il inclut à la fois une feuille de style CSS et un fichier JavaScript.

Ce framework fonctionne par le biais de classes CSS auxquelles on fait appel selon nos besoins, nous les verrons au fur et à mesure dans tout le cours.

Bootstrap 5 va vous permettre de créer facilement une multitude de sites internet au design professionnel et responsive très rapidement grâce à son système de classes CSS prédéfinies.

Avec Bootstrap 5 vous pourrez entre autres créer des :

Des Barres navigations.
Des menus complexes.
Des carrousels d’images.
De formulaires.
Des fenêtres modales.
Etc

Bootstrap c’est aussi un système de grille qui offre la possibilité de placer des éléments sur une page avec une grande facilité, le tout en mode responsive, les éléments de vos pages s’adapteront automatiquement à la résolution d’écran des visiteurs.

Tout ceci vous fera gagner un temps précieux dans la création de vos sites internet.

Les connaissances préalables à l’apprentissage de Bootstrap 5 sont uniquement le HTML et le CSS nul besoin de connaître le JavaScript.

Les différences entre Bootstrap 4 et 5

Bootstrap 5 est la toute dernière version du Framework, mais certains d’entre vous ont sans doute utilisé les versions précédentes de ce Framework. Voyons donc quelles sont les principales différences entre la version 4 et 5 de Bootstrap.

La différence majeure de la version de Bootstrap 5 et qu’il n’utilise plus contrairement aux versions précédentes, le JQuery qu’il remplace par le JavaScript original.
De nouvelles classes ont été ajoutées pour permettre une personnalisation beaucoup plus pointue de tous éléments qui composent Bootstrap 5 par rapport à la version 4 pourtant déjà bien fournie.
Un plus grand nombre d’animations supplémentaires sont disponibles pour enrichir le contenu de votre site.
De nouveaux Breakpoints viennent améliorer la partie responsive des sites internet construits avec le Framework.

Comment installer Bootstrap 5 ?

Il existe deux manières différentes d’utiliser Bootstrap 5, la première (celle que je préconise) est de passer par le serveur CDN de Bootstrap en copiant les liens des 3 fichiers nécessaires entres les balises de votre ou vos fichiers HTML.

Pour récupérer les liens vous devez vous rendre à cette adresse en cliquant sur le bouton ci-dessous.

Le fichier CSS

Le fichier JavaScript et la librairie Popper

Ce qui donne ceci :

La seconde manière moins pratique, consiste à télécharger les fichiers et les placer dans le même dossier que votre site et faire les liens nécessaires dans votre fichier HTML comme vous le feriez pour un fichier Css et JavaScript classique.

Cela peut être utile pour les développeurs qui souhaitent changer les valeurs des classes CSS de Bootstrap.

Néanmoins il est aussi possible de rajouter son propre fichier Css et le placer après le fichier Css de Bootstrap. De cette manière, votre fichier Css passera par-dessus le fichier Css de Bootstrap 5.