Qu’est-ce que Bootstrap

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.

Installer bootstrap

via CDN

Ces deux balises doivent être importé dans votre balise head.

CSS :

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

JS :

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

via NPM

npm i bootstrap

Les bases de Bootstrap

Les couleurs

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 :

• #0d6efd (primary)
• #6c757d (secondary)
• #198754 (success)
• #dc3545 (danger)
• #ffc107 (warning)
• #0dcaf0 (info)

Les couleurs peuvent être utilisées pour les classes de texte, les arrière-plans et les bordures.

1. Les conteneurs

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 :

• Les conteneurs fixes (fixed) : ils ont une largeur fixe qui ne change pas avec la taille de l'écran.
• Les conteneurs fluides (fluid) : ils ont une largeur de 100% et s'adaptent à la taille de l'écran.
• Les conteneurs responsives : ils ont une largeur fixe jusqu'à un certain point de rupture (breakpoint) et ensuite ils deviennent fluides.

.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

2. Les grilles

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.