Bootstrap 1/3¶

Bootstrap est un cadriciel (framework) front-end qui offre une structure de styles et de mise en page permettant aux développeurs de ne pas réinventer la roue à chaque projet. Il fournit une collection de composantes (components) ainsi que plusieurs classes CSS facilitant la création de sites Web réactifs (responsive).

Annonce¶

Tutorat

Installation¶

Pour installer Bootstrap, vous n'avez qu'à inclure ces deux balises dans votre HTML.

Nous utilisons la version 5.3.3 du framework.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

integrity & crossorigin 🤔

L’attribut integrity est utilisé pour des raisons de sécurité. C'est le hash (sommes de contrôle cryptographiques) du fichier original. L’attribut, crossorigin pour sa part, indique que la requête à cdn.jsdelivr.net doit être faite sans envoyer de témoins (cookies), identifiants ou autres informations de l’utilisateur.

Voici un aperçu du HTML de départ.

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <!-- Code de la page ici -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

Couleurs¶

Les couleurs bootstrap sont représentées par des identifiants auxquels sont assignées des couleurs prédéfinies.

Voici la liste des identifiants associés à leur couleur respective.

Variables¶

Ces identifiants (primary, secondary, light, dark, etc.) sont utilisés dans des variables CSS, ce qui permet de personnaliser facilement les couleurs de Bootstrap.

Par exemple, si on souhaite changer la couleur associée à primary, on peut tout simplement réécrire les variables concernées :

:root {
  --bs-primary: #6610f2;
  --bs-primary-rgb: 102, 16, 242;
}

Préfix des variables

Afin de ne pas interférer avec d'autres variables potentielles d'un projet, Bootstrap permet d'ajouter un préfix aux variables. Par défaut, le préfix est bs-.

Pour connaitre le nom des variables Bootstrap, il suffit de consulter la documentation officielle ou encore, consulter l'inspecteur du navigateur.

Classes¶

Bootstrap fournit un vaste ensemble de classes CSS prêtes à l’emploi.

Par exemple, pour appliquer différents styles associés à la couleurs danger, voici quelques classes CSS disponibles.

.text-danger           // Couleur de texte
.bg-danger             // Couleur de fond
.border-danger         // Couleur de bordure
.btn-danger            // Couleur de bouton
.btn-outline-danger    // Couleur de bouton
.alert-danger          // Couleur de message
.badge-danger          // Couleur de pastille
.table-danger          // Couleur de tableau
.link-danger           // Couleur de lien

Dans l'exemple ci-dessous, on voit l'effet des classes CSS Bootstrap sur du code HTML.

Exercice rapide

Change le nom des classes CSS avec différents identifiants Bootstrap. Par exemple, remplace les mentions danger par primary ou warning et observe le résultat.

Mode sombre (darkmode)¶

Mode sombre

Pour activer le mode sombre, il suffit d’ajouter l'attribut data-bs-theme="dark" à l'élément <html> ou <body> de votre page :

<html data-bs-theme="dark">

Points d'arrêt¶

¹

Un point d'arrêt, point de rupture ou en anglais, breakpoint, est une condition où la mise en page du site Web change pour s’adapter à différentes tailles d’écran.

Le breakpoint est une notion importante des « media queries » en CSS.

Voici un exemple traditionnel de gestion de breakpoint :

.col {
  width: 50%;
}

@media (max-width: 992px) { // 👈 Breakpoint
  .col {
    width: 100%;
  }
}

En Bootstrap, plusieurs points de rupture (breakpoints) sont prédéfinis !

Portez une attention particulière à la colonne des suffixes. Nous y reviendrons 😜.

Point de rupture	Suffixe de classe	Dimensions	CSS
Extra petit	`xs`	`<576px`	`@media (max-width: 575.98px) {}`
Petit	`sm`	`≥576px`	`@media (min-width: 576px) {}`
Moyen	`md`	`≥768px`	`@media (min-width: 768px) {}`
Large	`lg`	`≥992px`	`@media (min-width: 992px) {}`
Extra large	`xl`	`≥1200px`	`@media (min-width: 1200px) {}`
Extra extra large	`xxl`	`≥1400px`	`@media (min-width: 1400px) {}`

Navigateur de breakpoint 😱

Responsively App Downloads est un outil intéressant pour visionner en un coup d'oeil le site sur plusiers appareils.

Conteneurs¶

Un conteneur Bootstrap c'est simplement une classe CSS qu'on assigne à un <div> dans le but de définir sa largeur.

<div class="container">
  ...
</div>

Les tailles des conteneurs selon les différents points de rupture de la page.

CSS	sm	md	lg	xl	xxl
`.container`	`540px`	`720px`	`960px`	`1140px`	`1320px`
`.container-sm`	`540px`	`720px`	`960px`	`1140px`	`1320px`
`.container-md`	`100%`	`720px`	`960px`	`1140px`	`1320px`
`.container-lg`	`100%`	`100%`	`960px`	`1140px`	`1320px`
`.container-xl`	`100%`	`100%`	`100%`	`1140px`	`1320px`
`.container-xxl`	`100%`	`100%`	`100%`	`100%`	`1320px`
`.container-fluid`	`100%`	`100%`	`100%`	`100%`	`100%`

Démonstration

Système de grille (grid system)¶

Documentation officielle

Bootstrap vient avec un système de grille à 12 colonnes. Il nous permet d'ajouter facilement des colonnes sans avoir à écrire une seule ligne de CSS. Voici la syntaxe :

<div class="container">
  <div class="row">
    <div class="col">Colonne 1</div>
    <div class="col">Colonne 2</div>
    <div class="col">Colonne 3</div>
    <div class="col">etc.</div>
  </div>
</div>

Lorsqu'on veut spécifier une taille de colonne, on doit ajuster la classe CSS .col et lui spécifier une proportion sur 12 colonnes. Voici un exemple :

On peut également utiliser les suffixes de point de rupture. Ainsi nos colonnes deviennent responsive!

Enfin, la notion d'offset permet d'espacer les colonnes par la gauche.

Ordre CSS¶

Bootstrap, flex et order

Espacement¶

La gestion des espacements en Bootstrap est beaucoup plus simple qu'il n'y parait. Il suffit de connaitre la syntaxe.

Les classes CSS sont construites de la façon suivante : {propriété}{côté}-{taille} et {propriété}{côté}-{breakpoint}-{taille}

Propriété

m = margin
p = padding

Côté

t = top
b = bottom
s = left (start)
e = right (end)
x = l'axe des x
y = l'axe des y

Taille

0 = 0
1 = 0.25rem
2 - 0.5rem
3 - 1rem
4 - 1.5rem
5 - 3rem
auto

Exemples de classes d'espacement

.m-0     .my-4     .mt-md-5
.p-1     .ps-2     .px-xxl-51

Typographie¶

Styles de titre

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Styles de titre extra gros

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Emphase de paragraph (plus gros)

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Alignement du texte

.text-start
.text-center
.text-end

Exercices¶

Exercice - JavaScript & Bootstrap
Changer le thème du site en JavaScript

Exercice - JavaScript & Bootstrap
Peinture à classe

Exercice - HTML & Bootstrap
Casse-grille

Devoir¶

Devoir 1 formatif - remise 12 septembre minuit

Devoir - HTML & Bootstrap
Tarte aux pommes

Illustration breakpoint : https://webandcrafts.com/blog/beginners-guide-to-responsive-web-design ↩