Aller au contenu principal

Module Bootstrap.1 – Introduction Bootstrap

Objectif​

Comprendre ce qu'est Bootstrap, pourquoi l'utiliser, quand l'utiliser, et installer Bootstrap pour créer rapidement des interfaces professionnelles.

Théorie​

Qu'est-ce que Bootstrap ?​

Bootstrap = Framework CSS open-source développé par Twitter (maintenant maintenu par la communauté).

Caractéristiques :

  • ✅ Framework CSS complet
  • ✅ Système de grille responsive
  • ✅ Composants UI prêts à l'emploi
  • ✅ Utilitaires CSS
  • ✅ JavaScript pour interactions
  • ✅ Personnalisable

Version actuelle : Bootstrap 5.x (2021+)

Pourquoi Bootstrap ?​

1. Rapidité de développement​

Sans Bootstrap :

/* Créer un bouton de zéro */
.button {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: blue;
    color: white;
    border: none;
    cursor: pointer;
    /* + hover, active, disabled, etc. */
}

Avec Bootstrap :

<button class="btn btn-primary">Cliquer</button>

Gain de temps : Composants prêts à l'emploi.

2. Responsive par défaut​

Sans Bootstrap :

/* Créer une grille responsive de zéro */
.container { }
.row { }
.col { }
/* + media queries pour chaque breakpoint */

Avec Bootstrap :

<div class="container">
    <div class="row">
        <div class="col-md-6">Colonne 1</div>
        <div class="col-md-6">Colonne 2</div>
    </div>
</div>

Gain : Responsive automatique.

3. Composants professionnels​

Composants inclus :

  • Navigation (navbar, breadcrumbs, pagination)
  • Boutons et groupes de boutons
  • Cards
  • Formulaires
  • Modals
  • Dropdowns
  • Carousels
  • Et bien plus...

Avantages :

  • ✅ Testés et optimisés
  • ✅ Accessibles (WCAG)
  • ✅ Compatibles navigateurs
  • ✅ Documentation complète

4. Communauté et écosystème​

Avantages :

  • Grande communauté
  • Nombreux thèmes et templates
  • Plugins et extensions
  • Support actif
  • Documentation excellente

Quand utiliser Bootstrap ?​

✅ Utiliser Bootstrap quand :​

  • Prototypage rapide : Créer un MVP rapidement
  • Applications internes : Dashboards, admin panels
  • Sites corporate : Sites vitrines, landing pages
  • Équipe non-design : Développeurs sans designer
  • Délais serrés : Besoin de résultats rapides
  • Consistance : Besoin d'une interface cohérente

❌ Ne pas utiliser Bootstrap quand :​

  • Design unique : Besoin d'un design très personnalisé
  • Performance critique : Bundle size important
  • Petit projet : Overhead inutile
  • Déjà un design system : Conflits possibles

Alternatives à Bootstrap​

Frameworks CSS populaires :

  • Tailwind CSS : Utility-first (approche différente)
  • Bulma : Moderne, sans JavaScript
  • Foundation : Flexible, enterprise
  • Materialize : Material Design
  • Semantic UI : Sémantique

Choisir selon :

  • Philosophie (components vs utilities)
  • Taille du bundle
  • Personnalisation
  • Préférences de l'équipe

Installation Bootstrap​

Méthode 1 : CDN (rapide pour tests)​

CSS :

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

JavaScript :

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

Avantages :

  • ✅ Rapide à mettre en place
  • ✅ Pas d'installation
  • ✅ Cache CDN

Inconvénients :

  • ❌ Pas de personnalisation
  • ❌ Dépendance externe

Méthode 2 : npm (recommandé)​

Installation :

npm install bootstrap

Import dans SCSS :

// Import Bootstrap complet
@import "~bootstrap/scss/bootstrap";

// Ou imports sélectifs
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/buttons";

Import JavaScript :

// Import complet
import 'bootstrap';

// Ou imports sélectifs
import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/modal';

Méthode 3 : Download​

Téléchargement :

  • Aller sur getbootstrap.com
  • Télécharger les fichiers compilés
  • Inclure dans le projet

Structure Bootstrap​

Fichiers principaux :

bootstrap/
├── css/
│   └── bootstrap.min.css
├── js/
│   └── bootstrap.bundle.min.js
└── scss/
    ├── _variables.scss
    ├── _mixins.scss
    ├── _grid.scss
    ├── _buttons.scss
    └── ...

Versions Bootstrap​

Bootstrap 5 (actuel) :

  • Pas de jQuery (JavaScript vanilla)
  • CSS custom properties
  • Améliorations accessibilité
  • Nouveaux composants

Bootstrap 4 (legacy) :

  • Support jQuery
  • Moins moderne
  • Toujours utilisé

Recommandation : Utiliser Bootstrap 5 pour les nouveaux projets.

Exercices guidés​

Exercice 1 : Installation CDN​

Créez une page HTML avec :

  • Bootstrap CSS via CDN
  • Bootstrap JS via CDN
  • Testez avec une classe .btn

Exercice 2 : Installation npm​

Installez Bootstrap avec npm :

  • npm install bootstrap
  • Importez dans votre projet
  • Compilez et testez

Exercice 3 : Première page Bootstrap​

Créez une page avec :

  • Container Bootstrap
  • Grille responsive
  • Boutons Bootstrap
  • Navigation Bootstrap

Exercice 4 : Documentation​

Explorez la documentation Bootstrap :

  • getbootstrap.com
  • Identifiez les composants principaux
  • Comprenez la structure

Exercice 5 : Comparaison​

Comparez :

  • Page avec Bootstrap
  • Page sans Bootstrap
  • Comprenez les avantages

❌ Erreurs fréquentes​

Erreur 1 : Oublier le JavaScript​

❌ Mauvais :

<link href="bootstrap.css" rel="stylesheet">
<!-- Pas de JS = composants interactifs ne fonctionnent pas -->

✅ Bon :

<link href="bootstrap.css" rel="stylesheet">
<script src="bootstrap.bundle.min.js"></script>

Pourquoi : Composants interactifs (modals, dropdowns) nécessitent JS.

Erreur 2 : Confondre Bootstrap 4 et 5​

❌ Mauvais :

<!-- Bootstrap 4 avec jQuery -->
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>

✅ Bon :

<!-- Bootstrap 5 sans jQuery -->
<script src="bootstrap.bundle.min.js"></script>

Pourquoi : Bootstrap 5 n'utilise plus jQuery.

Erreur 3 : CDN en production​

❌ Mauvais :

<!-- CDN en production (dépendance externe) -->

✅ Bon :

<!-- Fichiers locaux en production -->
<link href="css/bootstrap.min.css" rel="stylesheet">

Pourquoi : Contrôle, performance, pas de dépendance externe.

Erreur 4 : Importer tout Bootstrap​

❌ Mauvais :

@import "bootstrap"; // Tout Bootstrap

✅ Bon :

// Imports sélectifs
@import "bootstrap/grid";
@import "bootstrap/buttons";

Pourquoi : Réduire la taille du bundle.

Erreur 5 : Ignorer la personnalisation​

❌ Mauvais :

<!-- Bootstrap par défaut, pas de personnalisation -->

✅ Bon :

// Personnaliser avant l'import
$primary: #custom-color;
@import "bootstrap";

Pourquoi : Personnalisation = identité visuelle.

🚀 Mini-projet​

Mission : Créer votre première page Bootstrap

Créez une page HTML avec Bootstrap :

Contenu :

  1. Navigation (navbar)
  2. Hero section
  3. Section avec grille (3 colonnes)
  4. Cards Bootstrap
  5. Boutons variés
  6. Footer

Installation :

  • Utilisez CDN pour commencer
  • Ou npm si vous préférez

Critères :

  • ✅ Bootstrap installé correctement
  • ✅ Navigation fonctionnelle
  • ✅ Grille responsive
  • ✅ Composants utilisés
  • ✅ Page professionnelle

Objectif : Comprendre Bootstrap et créer votre première page avec le framework.

Validation : Vous pouvez passer au module suivant quand vous comprenez Bootstrap, l'avez installé, et avez créé une page fonctionnelle.