Tout ce que vous devez savoir sur Bootstrap 5

Vous avez déjà de bonne base en HTML5 et CCS3 et vous souhaitez accélérer votre processus de développement frontend ? Bootstrap est fait pour vous. Grace à une palette de composants mis à votre disposition et des classes pour personnaliser vos propres composants et les rendre responsive, vous pourrez créer très rapidement de magnifique page web. Dans cet article, nous allons découvrir Bootstrap, quels sont les modifications majeures Bootstrap 5 et comment installer Bootstrap. Cet article est le premier d’une série de 9 articles pour vous permettre de faire le tour Bootstrap et d'acquérir la maitrise de l'outil.

Vous trouverez le lien du prochain article à la fin de cet article !

C'est quoi Bootstrap ?

Bootstrap est une collection d’outils utiles à la création du design de sites et d’applications web.
-Wikipédia

Comme mentionné sur Wikipédia, Bootstrap est une collection d’outils. Cela signifie qu’avec Bootstrap, vous avez un cadre de travail dans le quel des choix esthétiques, techniques et des approches de développement ont été fait et vous ne devez plus que les utiliser. Cela signifie également que vous devez suivre et adopter ces choix. Au cas contraire, vous devrez vous-même développer des solutions pour vous adapter à ses choix !

Lorsqu’on parle de choix dans Bootstrap, cela fait le plus souvent références aux centaines de classes CSS qui vous vous permettre de donner rapidement du style à vos composants. Il s’agit de :

Boutons;
Formulaires;
Barre de navigation;
Tableau;
Boite de dialogue;
Etc.

Bootstrap met également à disposition de ses utilisateurs un ensemble de composants interactifs dont vous pourrez très facilement utiliser. Ces composant sont animés grâce au langage JavaScript. Il s’agit de :

Les carrousels;
Les modals;
Les accordéons;
Les collapses;
Etc.

Toutefois, ces choix ne sont pas définitifs. Vous pourrez très facilement personnaliser vos composants par exemple en modifiant les couleurs, les bordures, les ombres, etc. En dehors des choix esthétiques qui sont la marque de fabrique de Bootstrap, dans la version 5, plusieurs choix techniques ont également été fait.

Quels sont les choix techniques de Bootstrap 5 ?

Bootstrap 5 apporte plusieurs que vous ne trouverez pas sur les versions précédentes :

L’abandon de la prise en charge d’Internet Explorer : Si vous souhaitez que votre site web puisse fonctionner sur cet ancien navigateur, Bootstrap 5 n’est pas la solution qu’il vous faut. Peut-être devrez vous utiliser une version antérieure ?
L’utilisation des Flex pour les mises en pages : Bye bye aux Grids et aux Floats. Dans cette nouvelle version de Bootstrap, ce sont les Flex qui seront utilisé dans votre site web.

Quels sont les caractéristiques de Bootstrap 5

Vous devez obligatoirement utiliser du HTML5 : Cela implique que votre page dois obligatoirement commencer par la ligne

<!doctype html>

Bootstrap est mobile first : Cela signifie que le Framework vas d’abord définir la taille sur mobile avant de monter en taille en utilisant les média queries CSS. Pour cela, vous devez impérativement placer la balise suivante :

<meta name= "viewport"  content="device_width, initial-scale=1.0">

Comment installer Bootstrap ?

Pour avoir Bootstrap installer dans votre projet, vous pouvez procéder de 3 façons :

En téléchargeant les fichiers sources
En Utilisant les liens CDN
En utilisant npm pour vos projets javascript

Pour cela, vous devez vous rendre sur la page Download

Pour cet article, j’ai opté pour le téléchargement des fichiers sources.

Découvrir la structure de Bootstrap

Lorsque vous téléchargez Bootstrap, vous avez deux dossiers : css et JS. Chaque dossier contient un ensemble de fichiers. Commençons par les fichiers présents dans le répertoire css.
Dans le Répertoire CSS, nous pouvons constater que les fichiers sont regroupés en paire de 2. On utilise le plus souvent :

bootstrap.css : Il s’agit du fichier CSS de Bootstrap
bootstrap.min.css : Ici nous avons une version mimifiée du fichier css. Il est obtenu en élimant les espaces, retours à la ligne et les derniers ‘;’ des différentes classes css du fichier bootstrap.css.

Le choix de bootstrap.min.css est du au fait qu’il contient toutes les classes des autres fichiers et est beaucoup plus léger que bootstrap.css.

Vous constaterez également la présence des fichiers .map. Ces fichiers sont générés lors de la compilation ou de la minification des fichiers CSS et JavaScript de Bootstrap.
De façon analogue, le fichier bootstrap.bundle.min.js est le plus utilisé du coté javascript.

Installer Bootstrap dans son projet

Pour installer Bootstrap dans votre projet, vous devez le lier aux fichiers css et javascript de bootstrap.

Ajouter le CSS à une page web

Pour ajouter le CSS de Bootstrap à vos pages web, vous devez ajouter la ligne suivante avant la fin de la balise </head> de cette page.

<link rel="stylesheet" href="css/bootstrap.min.css">

Si vous utilisez les liens CDN (pour utilisez Boostrap en ligne), ajoutez plutôt

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

Si vous avez télécharger Bootstrap localement, Vous devez vous assurer que les fichiers bootstrap.min.css et bootstrap.bundle.min.js sont respectivement dans les repertoires css et js de votre projet.

Ajouter le JavaScript de Bootstrap à une page web

Pour ajouter le javascript de Bootstrap à vos pages web, vous devez ajouter la ligne suivante avant la fin de la balise </body> :

<script type="JavaScript" src="js/bootstrap.bundle.min.js"></script>

Si vous utilisez les liens CDN ajoutez plutôt :

<script type="JavaScript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

Félicitation, vous êtes enfin prêt à utiliser Bootstrap 5 sur votre projet !

LK Core