Bootstrap - Configuration de l'environnement

Lucas D. - July 19, 2024

Prérequis

Avant de commencer avec Bootstrap, vous devez avoir une compréhension de base du HTML et du CSS. HTML structure le contenu des pages web, tandis que CSS style et met en page le contenu. Connaître ces technologies vous aidera à comprendre et à travailler avec Bootstrap.

Pour travailler avec Bootstrap, vous aurez besoin d'un éditeur de texte pour écrire et modifier votre code HTML, CSS et JavaScript. Les éditeurs de texte populaires incluent :

Éditeur de texte	Fonctionnalités
Visual Studio Code	Coloration syntaxique, auto-complétion, terminal intégré
Sublime Text	Coloration syntaxique, auto-complétion, terminal intégré
Atom	Coloration syntaxique, auto-complétion, terminal intégré

Vous aurez également besoin d'un navigateur web pour visualiser et tester vos pages Bootstrap. Les navigateurs web modernes recommandés sont :

Google Chrome
Mozilla Firefox
Microsoft Edge

Ces navigateurs disposent d'outils de développement qui vous aident à inspecter et déboguer votre code. Ils prennent également en charge les dernières technologies web, de sorte que vos pages Bootstrap s'afficheront correctement.

Avoir un éditeur de texte et un navigateur web vous donnera les outils nécessaires pour créer des pages web réactives et attrayantes avec Bootstrap. Au fur et à mesure de ce tutoriel, vous apprendrez comment configurer Bootstrap dans votre projet et utiliser ses puissantes fonctionnalités.

Méthodes d'installation

Il existe deux méthodes principales pour intégrer Bootstrap dans votre projet : utiliser un réseau de diffusion de contenu (CDN) ou télécharger les fichiers Bootstrap.

Méthode 1 : Utilisation d'un CDN

Un CDN est un réseau de serveurs qui diffuse du contenu aux utilisateurs en fonction de leur localisation géographique. Lorsque vous utilisez un CDN pour inclure Bootstrap dans votre projet, vous créez un lien vers les fichiers Bootstrap hébergés sur les serveurs du CDN.

Pour ajouter le CSS Bootstrap via CDN, insérez la balise link suivante dans la section <head> de votre fichier HTML :

Conseil: Ajouter le CSS Bootstrap via CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

Pour ajouter le JavaScript Bootstrap via CDN, insérez la balise script suivante à la fin de la section <body> :

Conseil: Ajouter le JavaScript Bootstrap via CDN

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Avantages de l'utilisation d'un CDN	Inconvénients de l'utilisation d'un CDN
Facile à mettre en place	Nécessite une connexion internet
Économise la bande passante de votre serveur	Moins de contrôle sur la version de Bootstrap utilisée
Les fichiers sont mis en cache par le navigateur, ce qui entraîne des temps de chargement plus rapides	Risques potentiels de sécurité si le CDN est compromis

Méthode 2 : Téléchargement de Bootstrap

Le téléchargement de Bootstrap implique de télécharger les fichiers CSS et JavaScript compilés et de les inclure dans votre projet.

Pour télécharger Bootstrap :

Allez sur le site web de Bootstrap
Cliquez sur le bouton "Download"
Choisissez la version de Bootstrap que vous souhaitez télécharger
Cliquez sur "Download" pour obtenir les fichiers CSS et JavaScript compilés

Après avoir téléchargé le package, extrayez les fichiers dans un répertoire de votre projet. Ensuite, liez le fichier CSS Bootstrap local dans la section <head> de votre HTML :

Conseil: Lier le fichier CSS Bootstrap local

<link rel="stylesheet" href="chemin/vers/bootstrap.min.css">

Liez le fichier JavaScript Bootstrap local à la fin de la section <body> :

Conseil: Lier le fichier JavaScript Bootstrap local

<script src="chemin/vers/bootstrap.bundle.min.js"></script>

Avantages du téléchargement de Bootstrap	Inconvénients du téléchargement de Bootstrap
Fonctionne hors ligne	Nécessite des mises à jour manuelles des fichiers Bootstrap
Contrôle total sur la version de Bootstrap utilisée	Occupe de l'espace sur votre serveur
Peut être personnalisé avant d'être inclus dans le projet	Temps de chargement initial plus long si les fichiers ne sont pas mis en cache

Les deux méthodes ont leurs avantages et leurs inconvénients. Choisissez celle qui convient le mieux aux exigences et aux contraintes de votre projet.

Créer votre première page Bootstrap

Pour créer votre première page Bootstrap, vous devez établir la structure HTML de base et ajouter des classes Bootstrap aux éléments HTML.

Commencez par un modèle HTML basique :

Conseil: Modèle HTML de base

<!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>
  <!-- CSS Bootstrap -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <!-- Votre contenu ici -->

  <!-- JavaScript Bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Dans ce modèle, nous incluons le fichier CSS Bootstrap dans la section <head> en utilisant un lien CDN. Nous ajoutons également le fichier JavaScript Bootstrap à la fin de la section <body>.

Ensuite, ajoutez votre contenu à l'intérieur de la balise <body> et appliquez les classes Bootstrap aux éléments HTML. Bootstrap utilise un système basé sur les classes pour styliser et mettre en page les éléments.

Pour créer une barre de navigation responsive :

Conseil: Barre de navigation responsive

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Mon site web</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>

Nous utilisons des classes comme navbar, navbar-expand-lg, navbar-light, et bg-light pour créer une barre de navigation responsive avec un fond de couleur claire.

Voici un modèle de base pour une page Bootstrap :

Conseil: Modèle de page Bootstrap

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ma page Bootstrap</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- Contenu de la barre de navigation -->
  </nav>

  <div class="container mt-5">
    <h1>Bienvenue sur ma page Bootstrap</h1>
    <p>Ceci est un modèle de base pour une page Bootstrap.</p>
    <button type="button" class="btn btn-primary">Cliquez-moi !</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Ce modèle comprend une barre de navigation, un conteneur avec un titre, un paragraphe et un bouton. La classe container ajoute une marge intérieure au contenu, tandis que mt-5 ajoute une marge en haut du conteneur. Les classes btn et btn-primary stylisent le bouton.

En utilisant les classes Bootstrap, vous pouvez rapidement créer des pages web responsives et esthétiques sans écrire de CSS complexe.

Personnalisation de Bootstrap

Bien que Bootstrap fournisse un ensemble de styles par défaut, vous pourriez vouloir modifier l'apparence de votre site web pour correspondre à votre marque ou à vos préférences de design. Bootstrap vous permet de remplacer ses styles par défaut et d'utiliser du CSS personnalisé avec le framework.

Pour remplacer les styles Bootstrap par défaut, créez un fichier CSS personnalisé et liez-le après le fichier CSS de Bootstrap dans votre HTML :

Conseil: Lier le fichier CSS personnalisé

<link rel="stylesheet" href="path/to/bootstrap.min.css">
<link rel="stylesheet" href="path/to/custom.css">

Dans votre fichier CSS personnalisé, ciblez les classes Bootstrap et remplacez leurs propriétés. Par exemple, pour changer la couleur du bouton primaire :

Conseil: Remplacer la couleur du bouton primaire

.btn-primary {
  background-color: #ff0000;
  border-color: #ff0000;
}

.btn-primary:hover {
  background-color: #cc0000;
  border-color: #cc0000;
}

Ce code change la couleur de fond et la couleur de bordure des boutons avec la classe btn-primary en rouge (#ff0000) et en rouge plus foncé (#cc0000) au survol.

Lorsque vous utilisez du CSS personnalisé avec Bootstrap, il est important de comprendre comment fonctionne la spécificité. La spécificité détermine quels styles ont la priorité lorsqu'il y a des règles conflictuelles. Bootstrap utilise des noms de classe spécifiques pour appliquer des styles, donc vos styles personnalisés doivent être tout aussi ou plus spécifiques pour les remplacer.

Conseil: Remplacer les variables CSS de Bootstrap

:root {
  --primary: #ff0000;
  --secondary: #00ff00;
  --font-family-base: "Arial", sans-serif;
}