Aller au contenu principal

📚 Introduction à Bootstrap

Maintenant que vous maßtrisez les bases du CSS, découvrons Bootstrap, un cadriciel (framework) CSS permettant d'accélérer le développement de nos pages Web.

Qu'est-ce que Bootstrap?​

Bootstrap est un framework CSS (ou bibliothĂšque) crĂ©Ă© Ă  l'origine par Twitter, fournissant une collection de styles CSS et de composants prĂȘts Ă  l'emploi. Au lieu de rĂ©inventer la roue Ă  chaque projet, Bootstrap offre:

  • Un systĂšme de grille adaptative pour organiser le contenu des les pages
  • Des composants dĂ©jĂ  stylisĂ©s (boutons, cartes, formulaires, navigation, etc.)
  • Des classes utilitaires pour espacer, colorer et positionner vos Ă©lĂ©ments
  • Une base de style (titres, paragraphes, etc.)
info

Bootstrap est un peu comme une boĂźte Ă  outils CSS: au lieu d'Ă©crire tout le CSS vous-mĂȘme, vous utilisez des classes dĂ©jĂ  crĂ©Ă©es.

Sans Bootstrap​

CrĂ©er un site, mĂȘme relativement simple, nĂ©cessite beaucoup de CSS personnalisĂ© pour des Ă©lĂ©ments communs (barre de navigation, cartes de contenu, etc.):

<!DOCTYPE html>
<html lang="fr">
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav>
      <ul>
          <li><a href="#">Accueil</a></li>
          <li><a href="#">À propos</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
  </nav>
  
  <div class="container">
      <div class="card">
          <h3>Carte 1</h3>
          <p>Contenu de la carte</p>
      </div>
      <div class="card">
          <h3>Carte 2</h3>
          <p>Contenu de la carte</p>
      </div>
  </div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Avec Bootstrap​

RĂ©sultat similaire, en utilisant des classes Bootstrap, sans-mĂȘme avoir Ă©crit de CSS personnalisĂ©! Remarquez mĂȘme la belle navigation optimisĂ©e pour appareils mobiles en prime! 😊

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Mon site</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Accueil</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">À propos</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  
  <div class="container mt-4">
      <div class="row">
          <div class="col-md-6 mb-3">
              <div class="card">
                  <div class="card-body">
                      <h3 class="card-title">Carte 1</h3>
                      <p class="card-text">Contenu de la carte</p>
                  </div>
              </div>
          </div>
          <div class="col-md-6">
              <div class="card">
                  <div class="card-body">
                      <h3 class="card-title">Carte 2</h3>
                      <p class="card-text">Contenu de la carte</p>
                  </div>
              </div>
          </div>
      </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>
Open on CodeSandboxOpen Sandbox

info

Avec Bootstrap, on utilise simplement des classes CSS prĂ©dĂ©finies au lieu d'Ă©crire tout le CSS nous-mĂȘmes. C'est plus rapide et le rĂ©sultat est dĂ©jĂ  adaptatif!

Vous pouvez toujours Ă©crire votre propre CSS, mais vous devriez avoir Ă  en Ă©crire moins!

Comment intĂ©grer Bootstrap Ă  votre projet​

Étape 1: TĂ©lĂ©charger Bootstrap​

  1. Allez sur le site officiel https://getbootstrap.com
  2. Cliquez sur le bouton Download img
  3. Téléchargez la version Compiled CSS and JS img
  4. Décompressez le fichier ZIP téléchargé

Étape 2: Organiser vos fichiers​

Fichiers importants

AprÚs avoir décompressé Bootstrap, copiez ces fichiers dans votre projet:

  • bootstrap.min.css → dans un dossier styles/
  • bootstrap.bundle.min.js → dans un dossier js/

Voici la structure cible et recommandée:

mon-projet/
├── index.html
├── styles/
│   └── bootstrap.min.css
└── js/
    └── bootstrap.bundle.min.js

Étape 3: Lier Bootstrap dans votre HTML​

Dans votre fichier index.html, ajoutez les liens vers les fichiers Bootstrap:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon site Bootstrap</title>
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="styles/bootstrap.min.css">
</head>
<body>
    <!-- Votre contenu ici -->
    
    <!-- Bootstrap JavaScript (Ă  la fin du body) -->
    <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Pourquoi le JavaScript Ă  la fin?

Le fichier JavaScript Bootstrap est placĂ© juste avant la fermeture de </body> pour que la page charge plus rapidement. Certains composants Bootstrap (comme les fenĂȘtres modales et les carousels) ont besoin de ce fichier JavaScript pour fonctionner.

Structure de base d'une page Bootstrap​

Voici un squelette HTML minimal pour commencer avec Bootstrap:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ma premiĂšre page Bootstrap</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <div class="container">
      <h1 class="mt-5">Bienvenue !</h1>
      <p class="lead">Ceci est ma premiĂšre page avec Bootstrap.</p>
      <button class="btn btn-primary">Un beau bouton</button>
  </div>
  
  <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Notez les classes Bootstrap utilisées :
  • container: centre le contenu et limite sa largeur maximale
  • mt-5: ajoute une marge en haut (margin-top)
  • lead: agrandit lĂ©gĂšrement le texte pour le rendre plus visible
  • btn btn-primary: crĂ©e un bouton primaire (stylisĂ© en bleu, la couleur primaire par dĂ©faut de Bootstrap).

Principe de fonctionnement de Bootstrap​

Bootstrap fonctionne entiÚrement avec des classes CSS. Au lieu d'écrire votre propre CSS, vous ajoutez des classes à vos éléments HTML.

Classes de base​

<!-- Boutons -->
<button class="btn btn-primary">Bouton primaire</button>
<button class="btn btn-success">Bouton succĂšs</button>
<button class="btn btn-danger">Bouton danger</button>

<!-- Texte coloré -->
<p class="text-primary">Texte en bleu</p>
<p class="text-success">Texte en vert</p>
<p class="text-danger">Texte en rouge</p>

<!-- ArriĂšre-plans -->
<div class="bg-primary text-white p-3">Fond bleu</div>
<div class="bg-warning p-3">Fond jaune</div>
<!DOCTYPE html>
<html lang="fr">
<head>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-4">
      <h3>Boutons</h3>
      <button class="btn btn-primary">Primaire</button>
      <button class="btn btn-success">SuccĂšs</button>
      <button class="btn btn-danger">Danger</button>
      <button class="btn btn-warning">Avertissement</button>
      
      <h3 class="mt-4">Textes colorés</h3>
      <p class="text-primary">Texte en bleu</p>
      <p class="text-success">Texte en vert</p>
      <p class="text-danger">Texte en rouge</p>
      
      <h3 class="mt-4">ArriĂšre-plans</h3>
      <div class="bg-primary text-white p-3 mb-2">Fond bleu avec texte blanc</div>
      <div class="bg-warning p-3 mb-2">Fond jaune</div>
      <div class="bg-success text-white p-3">Fond vert avec texte blanc</div>
  </div>
  
  <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Classes utilitaires courantes​

Bootstrap offre des classes utilitaires pour gérer rapidement l'espacement, l'alignement et l'affichage.

Espacement (margin et padding)​

Les classes d'espacement suivent ce format : {propriété}{cÎté}-{taille}

  • PropriĂ©tĂ© : m (margin) ou p (padding)
  • CĂŽtĂ© : t (top), b (bottom), s (start/left), e (end/right), x (horizontal), y (vertical), ou rien (tous les cĂŽtĂ©s)
  • Taille : 0 Ă  5 (0 = aucun, 5 = trĂšs grand)
<div class="mt-3">Marge en haut (margin-top: taille 3)</div>
<div class="mb-5">Marge en bas (margin-bottom: taille 5)</div>
<div class="p-4">Padding de tous les cÎtés (taille 4)</div>
<div class="px-3">Padding horizontal (gauche et droite)</div>
<div class="my-2">Marge verticale (haut et bas)</div>
<!DOCTYPE html>
<html lang="fr">
<head>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-4">
      <div class="bg-primary text-white p-3 mb-3">
          Padding de 3 sur tous les cÎtés (p-3)
      </div>
      
      <div class="bg-success text-white px-5 py-2 mb-3">
          Padding horizontal de 5 (px-5) et vertical de 2 (py-2)
      </div>
      
      <div class="bg-warning mt-5">
          Marge en haut de 5 (mt-5)
      </div>
  </div>
  
  <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Alignement du texte​

<p class="text-start">Texte aligné à gauche</p>
<p class="text-center">Texte centré</p>
<p class="text-end">Texte aligné à droite</p>

Transformation du texte​

<p class="text-lowercase">TEXTE EN MINUSCULES</p>
<p class="text-uppercase">texte en majuscules</p>
<p class="text-capitalize">premiĂšre lettre en majuscule</p>

Personnaliser Bootstrap avec votre propre CSS​

Vous pouvez toujours ajouter votre propre CSS pour personnaliser ou complémenter Bootstrap!

<!DOCTYPE html>
<html lang="fr">
<head>
    <!-- Bootstrap en premier -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <!-- Votre CSS ensuite -->
    <link rel="stylesheet" href="styles/app.css">
</head>
<body>
    <div class="container">
        <h1 class="titre-personnalise">Mon titre personnalisé</h1>
        <button class="btn btn-primary">Bouton Bootstrap</button>
    </div>
    
    <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
/* app.css */
.titre-personnalise {
    color: purple;
    font-family: 'Comic Sans MS', cursive;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* Modifier un bouton Bootstrap */
.btn-primary {
    background-color: darkgreen;
    border: none;
}
Ordre d'importance

Mettez toujours votre fichier CSS aprÚs celui de Bootstrap pour pouvoir modifier ses styles si nécessaire.

Structure finale du projet​

Voici à quoi devrait ressembler votre projet une fois Bootstrap intégré:

mon-projet/
├── index.html
├── contact.html
├── styles/
│   ├── bootstrap.min.css
│   └── app.css (votre CSS personnalisĂ©)
├── js/
│   └── bootstrap.bundle.min.js
└── images/
    └── (vos images)

Consulter la documentation Bootstrap​

Bootstrap offre des centaines de composants et classes. Il est impossible de tout mémoriser, ni de tout présenter dans ces notes de cours!

La documentation officielle est votre meilleure amie: https://getbootstrap.com/docs/5.3/getting-started/introduction/

astuce

Gardez la documentation Bootstrap ouverte dans un onglet pendant que vous développez. Vous l'utiliserez constamment pour trouver les bonnes classes!