Bootstrap est un framework
front-end contenant une collection d’outils utiles à la création
et au design de sites et d’applications web en front end.
Il contient des codes HTML et CSS
ainsi que des extensions JavaScript en option,
permettant la création de formulaires, de boutons, d’outils de navigations et d’autres éléments
interactifs à intégrer dans une application.
Ces deux balises doivent être importé dans votre balise head.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
npm i bootstrap
Bootstrap utilise une palette de couleurs basée sur le système de conception de Google Material Design. Chaque couleur a un nom et une valeur hexadécimale. Par exemple, le nom de la couleur primaire est primary et sa valeur hexadécimale est #0d6efd. Nous utilisons ces noms et valeurs de couleurs pour les classes de couleur.
Il existe 6 couleurs de base :
Les couleurs peuvent être utilisées pour les classes de texte, les arrière-plans et les bordures.
Les conteneurs sont l'élément de mise en page le plus basique dans Bootstrap et sont nécessaires lors de l'utilisation de notre système de grille par défaut. Les conteneurs sont utilisés pour contenir, espacer et (parfois) centrer le contenu à l'intérieur d'eux. Bien que les conteneurs puissent être imbriqués, la plupart des mises en page n'exigent pas un conteneur imbriqué.
Note : Les conteneurs ne peuvent pas être placés à l'intérieur d'un élément de grille.
Note : Les conteneurs appliquent une marge horizontale qui se réduit en fonction de la taille de l'écran.
Bootstrap propose trois types de conteneurs :
.container, qui définit une largeur maximale à chaque point de rupture responsive
.container-{point de rupture}, qui a une largeur de 100% jusqu'au point de rupture spécifié
.container-fluid, qui a une largeur de 100% à tous les points de rupture
Le système de grille de Bootstrap utilise une série de conteneurs, de lignes et de colonnes pour agencer et aligner le contenu. Il est construit avec flexbox et est entièrement responsive. Ci-dessous se trouve un exemple et une explication approfondie de la manière dont le système de grille s'assemble.
Les grilles Bootstrap sont composées de 12 colonnes. Elles peuvent être utilisées pour créer des mises en page de toutes formes et tailles.
Les colonnes sont entourées de gutters (marges) négatives de moitié. Cela signifie que toutes les colonnes comportent des marges à leur gauche et à leur droite, qui sont alignées avec les marges des colonnes adjacentes. Cela permet de créer facilement des mises en page contenant des colonnes de largeurs différentes.
Les breakpoints Bootstrap sont les points de rupture de la grille responsive. Ils déterminent à quel moment la grille passe d'une disposition à une autre.
Les points de rupture Bootstrap sont les suivants :
Les points de rupture servent à définir la largeur minimale à partir de laquelle la grille change de disposition. Par exemple, si vous utilisez le point de rupture sm, les colonnes seront horizontales à partir de 576px de largeur.
Les points de rupture Bootstrap sont définis dans le fichier bootstrap-grid.css.
Vous pouvez également définir vos propres points de rupture en modifiant les variables $grid-breakpoints dans le fichier bootstrap-grid.css.
Vous pouvez personnaliser Bootstrap en modifiant les variables css, cela vous permet de modifier les couleurs, les polices, les tailles, etc.
Pour personnaliser Bootstrap, vous devez modifier les variables dans le fichier bootstrap.css.
Pour modifier les variables, vous devez :
Vous pouvez également personnaliser Bootstrap en modifiant les variables sass, cela vous permet de modifier les couleurs, les polices, les tailles, etc.
Bootstrap propose de nombreux composants prêts à l'emploi. Vous pouvez les utiliser en copiant-collant le code html dans votre page.
Note : les composants Bootstrap utilisent du javascript. Pour que les composants fonctionnent, vous devez importer le fichier bootstrap.js dans votre html.
Voici quelques exemples de composants Bootstrap :
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereBref, vous avez compris Bootstrap est un framework CSS qui permet de créer des sites web responsive rapidement. Il est très utilisé dans le monde du web et il est très facile de trouver des ressources sur internet pour vous aider à l'utiliser.
Pour aller plus loin, je vous conseille de vous intéresser à la documentation officielle de Bootstrap.
Maintenant que vous avez vu les bases de Bootstrap, je vous propose de créer votre propre site web en utilisant Bootstrap. Appuyer vous sur la documentation.
Vous devez vous inspirer de cette page qui présente un formulaire de commande.
Le lien vers le code source de la page est ici. (fichier billing.html)
- Créer dans un premier temps la structure HTML de la page.
- Ensuite, vous devez utiliser Bootstrap pour styliser votre page.
- Enfin, vous devez utiliser les breakpoints de Bootstrap pour rendre votre page responsive.