Partie 4 : Maitriser Bootstrap

Ce guide couvre l'intégralité des concepts, syntaxes, classes, attributs et exemples présents dans la Partie 4 du document.

1. Concepts & Définitions

• Bootstrap : Un framework gratuit conçu pour permettre un développement plus rapide et plus facile des pages web réactives. Il comprend des modèles de conception basés sur HTML et CSS. (p. 216)
• Bootstrap 5 : La dernière version (sortie en 2021), qui propose de nouveaux composants, une feuille de style plus rapide et plus de réactivité. (p. 216)
• Avantages de Bootstrap : (p. 217)
  • Facile à utiliser : Pour les développeurs avec des connaissances de base en HTML et CSS.
  • Fonctionnalités réactives : Le CSS réactif s'adapte aux différents médias (téléphones, tablettes, ordinateurs).
  • Approche mobile first : Les styles "mobile first" font partie du framework de base.
  • Compatibilité du navigateur : Compatible avec les navigateurs modernes (Chrome, Firefox, Edge, Safari et Opera).
• CDN (Content Delivery Network) : Une méthode pour inclure Bootstrap 5 sur un site web sans avoir à le télécharger, en utilisant des liens externes (ex: jsDelivr). (p. 218)
• Système de grille (Grid System) : Le système de mise en page de Bootstrap, conçu avec Flexbox, qui propose jusqu'à 12 colonnes sur la page. Il est réactif et les colonnes se réorganisent automatiquement. (p. 220, 223)
• Conteneurs (Containers) : L'élément de mise en page le plus basique, utilisé par le système de grille. Leur rôle est de contenir, remplir et centrer le contenu. (p. 220)
• Classes contextuelles : Classes utilisées pour appliquer une signification à travers les couleurs (ex: .alert-success, .bg-primary, .table-danger). (p. 231, 241)
• Composants Bootstrap : Éléments d'interface réutilisables comme les barres de navigation, les cartes, les alertes, etc. (p. 259)
• Fil d'Ariane (Breadcrumbs) : Un type de navigation qui indique l'emplacement de la page actuelle dans une hiérarchie de navigation. (p. 276)

2. Syntaxes & Codes

• Inclusion de Bootstrap via CDN : (p. 218)

  <!-- Latest compiled and minified CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- Latest compiled JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
  

• Syntaxe des Conteneurs : (p. 220)

  <!-- Conteneur à largeur fixe -->
  <div class="container"> ... </div>
  
  <!-- Conteneur pleine largeur -->
  <div class="container-fluid"> ... </div>
  

• Syntaxe de la Grille : (p. 225)

  <!-- Structure de base de la grille -->
  <div class="row">
    <div class="col-*-*"> ... </div>
    <div class="col-*-*"> ... </div>
  </div>
  
  <!-- Grille avec gestion automatique de la largeur -->
  <div class="row">
    <div class="col"> ... </div>
    <div class="col"> ... </div>
  </div>
  

• Syntaxe des Tableaux : (p. 234)

  <table class="table">
    <thead> ... </thead>
    <tbody> ... </tbody>
  </table>
  

• Syntaxe des Boutons : (p. 257)

  <button type="button" class="btn btn-primary"> ... </button>
  

• Syntaxe des Formulaires : (p. 247)

  <form action="/action_page.php">
    <div class="mb-3">
      <label for="email" class="form-label">Email :</label>
      <input type="email" class="form-control" id="email">
    </div>
    ...
  </form>
  

• Syntaxe des Cartes (Cards) : (p. 283)

  <div class="card">
    <div class="card-body">
      ...
    </div>
  </div>
  

3. Attributs & Propriétés (Classes CSS)

Chapitre 1 : Intégrer Bootstrap

• Conteneurs (p. 220-222)
  • .container: Conteneur de largeur fixe réactif.
  • .container-fluid: Conteneur pleine largeur.
  • .container-sm|md|lg|xl|xxl: Conteneurs réactifs dont la max-width change aux points de rupture spécifiés.
  • Utilitaires de padding/marge : .pt-5 (padding-top), .p-5 (padding), .my-5 (margin-top et bottom).
  • Utilitaires de bordure/couleur : .border, .bg-dark, .text-white, .bg-primary.
• Grille (p. 224)
  • .row: Conteneur pour les colonnes de la grille.
  • .col-: Pour très petits appareils (< 576px).
  • .col-sm-: Pour petits appareils (≥ 576px).
  • .col-md-: Pour appareils moyens (≥ 768px).
  • .col-lg-: Pour grands appareils (≥ 992px).
  • .col-xl-: Pour appareils xlarge (≥ 1200px).
  • .col-xxl-: Pour appareils xxlarge (≥ 1400px).
  • Le * dans .col-sm-* est un nombre de 1 à 12.

Chapitre 2 : Classes CSS de Base

• Typographie (p. 229-232)
  • .h1 à .h6: Applique le style des titres à n'importe quel élément.
  • .mark ou <mark>: Met le texte en évidence avec un fond jaune.
  • .abbr ou <abbr>: Pour les abréviations, ajoute une bordure en pointillé et un curseur d'aide.
  • Couleurs de texte (.text-*): .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body, .text-light.
  • Opacité de texte : .text-black-50, .text-white-50.
  • Couleurs d'arrière-plan (.bg-*): .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, .bg-light.
• Tableaux (p. 234-242)
  • .table: Style de base pour un tableau.
  • .table-striped: Ajoute des rayures (lignes alternées) au tableau.
  • .table-bordered: Ajoute des bordures sur toutes les cellules.
  • .table-hover: Ajoute un effet de survol sur les lignes.
  • .table-dark: Applique un fond noir au tableau.
  • .table-borderless: Supprime toutes les bordures.
  • Classes contextuelles (.table-*): .table-primary, .table-success, etc. pour colorer les lignes ou cellules.
  • .table-responsive{-sm|-md|-lg|-xl|-xxl}: Rend le tableau défilable horizontalement sur certains écrans.
• Images (p. 243-245)
  • .rounded: Ajoute des coins arrondis.
  • .rounded-circle: Façonne l'image en cercle.
  • .img-thumbnail: Ajoute une bordure et un léger padding (vignette).
  • .float-start / .float-end: Fait flotter l'image à gauche ou à droite.
  • .mx-auto: Centre l'image horizontalement (nécessite .d-block).
  • .d-block: Change l'affichage en display: block.
  • .img-fluid: Rend l'image réactive (max-width: 100%; height: auto;).
• Formulaires & Contrôles (p. 247-255)
  • .form-control: Style de base pour les <input>, <textarea>.
  • .form-label: Style pour les <label>.
  • .form-select: Style pour les listes de sélection <select>.
  • Taille des contrôles : .form-control-lg, .form-control-sm, .form-select-lg, .form-select-sm.
  • .form-check: Conteneur pour les cases à cocher et radios.
  • .form-check-input: Style pour l'input dans un .form-check.
  • .form-check-label: Style pour le label dans un .form-check.
  • .form-switch: Transforme une case à cocher en interrupteur.
  • Validation : .was-validated sur le <form>, .valid-feedback et .invalid-feedback pour les messages.
• Boutons (p. 257-258)
  • .btn: Style de base pour un bouton.
  • Styles de couleur (.btn-*): .btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, .btn-link.
  • Styles de contour (.btn-outline-*): .btn-outline-primary, etc.

Chapitre 3 : Composants Bootstrap

• Barres de navigation (p. 261-264)
  • .navbar: Crée une barre de navigation.
  • .navbar-expand-sm|md|lg|xl|xxl: Définit à quel point de rupture la barre passe de verticale (mobile) à horizontale.
  • .navbar-nav: Conteneur pour les liens de navigation.
  • .nav-item: Élément de liste pour un lien.
  • .nav-link: Style pour le lien <a>.
  • .active: Met en évidence le lien actif.
  • .disabled: Désactive un lien.
  • .justify-content-center: Centre la barre de navigation.
  • .navbar-light: Pour utiliser avec des couleurs de fond claires (bg-light).
  • .navbar-dark: Pour utiliser avec des couleurs de fond sombres (bg-dark, bg-primary).
• Menus déroulants (p. 266-267)
  • .dropdown: Conteneur pour le menu.
  • .dropdown-toggle: Appliqué au bouton pour indiquer qu'il ouvre un menu.
  • data-toggle="dropdown": Attribut JavaScript nécessaire.
  • .dropdown-menu: Conteneur <ul> pour les options du menu.
• Alertes (p. 269-271)
  • .alert: Crée une boîte d'alerte.
  • Styles contextuels (.alert-*): .alert-success, .alert-info, etc.
  • .alert-link: Style les liens à l'intérieur d'une alerte.
  • .alert-dismissible: Permet de fermer l'alerte.
  • .btn-close et data-bs-dismiss="alert": Bouton pour fermer l'alerte.
  • .fade et .show: Animent la fermeture de l'alerte.
• Pagination (p. 272-276)
  • .pagination: Conteneur <ul> pour la pagination.
  • .page-item: Élément de liste <li>.
  • .page-link: Lien <a> à l'intérieur.
  • .active: État de la page actuelle.
  • .disabled: État désactivé.
  • Taille : .pagination-lg, .pagination-sm.
  • Alignement : .justify-content-center, .justify-content-end.
  • .breadcrumb: Conteneur pour le fil d'Ariane.
  • .breadcrumb-item: Élément du fil d'Ariane.
• Badges (p. 277)
  • .badge: Crée un badge.
  • Couleurs : Utilise les classes .bg-* (ex: .bg-secondary).
• Barres de progression (p. 279-281)
  • .progress: Conteneur de la barre.
  • .progress-bar: La barre de progression elle-même (sa largeur est définie par un style inline width).
  • .progress-bar-striped: Ajoute des rayures.
  • .progress-bar-animated: Anime les rayures.
• Cartes (Cards) (p. 283-287)
  • .card: Conteneur principal de la carte.
  • .card-body: Section principale pour le contenu.
  • .card-header: Section d'en-tête.
  • .card-footer: Section de pied de page.
  • .card-title: Style pour le titre de la carte.
  • .card-text: Style pour le texte.
  • .card-link: Style pour les liens.
  • .card-img-top / .card-img-bottom: Place une image en haut ou en bas de la carte.
  • .card-img-overlay: Permet de superposer du texte sur une image de carte.

4. Exemples Pratiques (Codes complets du PDF)

• Quatre colonnes de même largeur (p. 226)

  <div class="row">
    <div class="col-sm-3">.col-sm-3</div>
    <div class="col-sm-3">.col-sm-3</div>
    <div class="col-sm-3">.col-sm-3</div>
    <div class="col-sm-3">.col-sm-3</div>
  </div>
  

• Tableau avec lignes rayées et sombres (p. 239)

  <table class="table table-dark table-striped">
    <thead>
      <tr><th>Firstname</th><th>Lastname</th><th>Age</th></tr>
    </thead>
    <tbody>
      <tr><td>Mohamed</td><td>KINANI</td><td>25</td></tr>
      <tr><td>Laila</td><td>SAFIR</td><td>23</td></tr>
      <tr><td>Sami</td><td>MANSOURI</td><td>24</td></tr>
    </tbody>
  </table>
  

• Formulaire empilé avec validation (p. 255)

  <form action="/action_page.php" class="was-validated">
    <div class="mb-3 mt-3">
      <label for="uname" class="form-label">Username:</label>
      <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Please fill out this field.</div>
    </div>
    ...
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
  

• Barre de navigation standard (p. 261)

  <nav class="navbar navbar-expand-sm bg-light">
    <div class="container-fluid">
      <!-- Links -->
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
      </ul>
    </div>
  </nav>
  

• Carte avec image, titre et bouton (p. 286)

  <div class="card" style="width:400px">
    <img class="card-img-top" src="img_avatar1.png" alt="Card image">
    <div class="card-body">
      <h4 class="card-title">Sami LAMRINI</h4>
      <p class="card-text">Quelques exemples de textes.</p>
      <a href="#" class="btn btn-primary">Voir Profil</a>
    </div>
  </div>
  

5. Spécifications Techniques

• Points de rupture des conteneurs réactifs (p. 222)

  Classe	Super petit (<576px)	Petit (≥576px)	Moyen (≥768px)	Grand (≥992px)	Extra large (≥1200px)	XXL (≥1400px)
  .container-sm	100%	540px	720px	960px	1140px	1320px
  .container-md	100%	100%	720px	960px	1140px	1320px
  .container-lg	100%	100%	100%	960px	1140px	1320px
  .container-xl	100%	100%	100%	100%	1140px	1320px
  .container-xxl	100%	100%	100%	100%	100%	1320px

• Principe de la grille : 12 colonnes par .row. La somme des nombres dans les classes .col-*-* d'une ligne doit totaliser 12. (p. 225)
• Typographie par défaut : font-size de 1rem (16px) et line-height de 1.5. Les paragraphes <p> ont margin-top: 0 et margin-bottom: 1rem. (p. 229)
• Fonctionnement de .img-fluid : Applique max-width: 100% et height: auto à l'image. (p. 245)

6. Points Critiques

• Dépendances : Bootstrap 5 requiert l'inclusion du fichier CSS pour le style et du fichier JS (bundle) pour les composants interactifs (menus déroulants, alertes fermables, etc.). (p. 218)
• Grille vs Conteneur : La grille (.row et .col-*) doit être placée à l'intérieur d'un conteneur (.container ou .container-fluid).
• Couleurs et Texte : Les classes d'arrière-plan (.bg-*) ne définissent pas la couleur du texte. Il faut souvent ajouter une classe de texte (.text-*, ex: .text-white) pour la lisibilité. (p. 232)
• Centrage d'image : Pour centrer une image avec .mx-auto, elle doit être un élément de type bloc, d'où la nécessité d'ajouter la classe .d-block. (p. 244)
• Comportement de la Navbar : La classe .navbar-expand-* est cruciale. Elle détermine à quelle largeur d'écran la barre de navigation cesse d'être empilée verticalement. Sans cette classe, la barre sera toujours verticale. (p. 261-262)
• Attributs data-* : De nombreux composants interactifs (menus, alertes) dépendent d'attributs data-* (ex: data-bs-dismiss="alert") pour fonctionner. Ces attributs sont gérés par le JavaScript de Bootstrap.