Aller au contenu principal

Module Bootstrap.8 – Bootstrap avancé

Objectif​

Maîtriser les fonctionnalités avancées Bootstrap : custom build, intégration SCSS, personnalisation poussée pour créer des builds optimisés.

Théorie​

Custom build​

Custom build = Compiler Bootstrap avec seulement les parties nécessaires.

Avantages :

  • ✅ Bundle plus petit
  • ✅ CSS optimisé
  • ✅ Personnalisation complète

Processus :

  1. Importer Bootstrap SCSS
  2. Personnaliser les variables
  3. Importer seulement les parties nécessaires
  4. Compiler

Exemple :

// _custom-bootstrap.scss

// 1. Functions et variables
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// 2. Personnalisation
$primary: #custom-color;
$enable-rounded: false; // Désactiver border-radius

// 3. Mixins
@import "~bootstrap/scss/mixins";

// 4. Imports sélectifs
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/cards";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/utilities/api";

Intégration SCSS​

Structure recommandée :

scss/
├── abstracts/
│   └── _variables.scss
├── bootstrap/
│   └── _custom-bootstrap.scss
└── main.scss

main.scss :

// 1. Variables personnalisées
@import "abstracts/variables";

// 2. Bootstrap personnalisé
@import "bootstrap/custom-bootstrap";

// 3. Overrides additionnels
.custom-component {
    // Styles personnalisés
}

Désactiver des fonctionnalités​

Variables de configuration :

// Désactiver border-radius
$enable-rounded: false;

// Désactiver shadows
$enable-shadows: false;

// Désactiver gradients
$enable-gradients: false;

// Désactiver transitions
$enable-transitions: false;

// Désactiver grid
$enable-grid-classes: false;

Avantages :

  • Réduire la taille du CSS
  • Simplifier si non utilisé

Personnalisation poussée​

Créer des variantes de composants​

Nouveaux boutons :

// Créer .btn-brand
.btn-brand {
    @extend .btn-primary;
    background-color: $brand-color;
    border-color: $brand-color;
    
    &:hover {
        background-color: darken($brand-color, 10%);
    }
}

Étendre la grille​

Colonnes supplémentaires :

// Ajouter col-13, col-14, etc.
@for $i from 13 through 24 {
    .col-#{$i} {
        flex: 0 0 percentage($i / 24);
        max-width: percentage($i / 24);
    }
}

Nouveaux utilitaires​

Créer vos propres utilitaires :

// Ajouter à utilities/api
$utilities: map-merge(
    $utilities,
    (
        "cursor": (
            property: cursor,
            values: pointer grab not-allowed
        )
    )
);

Build tools​

Webpack​

Configuration :

// webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    }
};

Vite​

Configuration automatique :

// style.scss importé dans main.js
@import "bootstrap";

Vite gère SCSS nativement.

Gulp​

Configuration :

// gulpfile.js
const sass = require('gulp-sass')(require('sass'));

gulp.task('bootstrap', function() {
    return gulp.src('scss/main.scss')
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(gulp.dest('css'));
});

Optimisation avancée​

Tree-shaking​

Imports sélectifs :

// Importer seulement ce qui est utilisé
@import "bootstrap/grid";
@import "bootstrap/buttons";
// Pas de carousel si non utilisé

Purge CSS​

Configuration :

// postcss.config.js
module.exports = {
    plugins: [
        require('@fullhuman/postcss-purgecss')({
            content: ['./src/**/*.html', './src/**/*.js'],
            safelist: ['btn-primary', 'modal']
        })
    ]
};

Source maps​

Activer pour développement :

// Compilation avec source maps
sass scss:css --source-map

Exercices guidés​

Exercice 1 : Custom build​

Créez un build personnalisé :

  • Imports sélectifs
  • Variables personnalisées
  • Comparez la taille avant/après

Exercice 2 : Intégration SCSS​

Intégrez Bootstrap dans votre structure SCSS :

  • Variables dans abstracts
  • Bootstrap personnalisé
  • Overrides organisés

Exercice 3 : Désactiver fonctionnalités​

Testez la désactivation :

  • Désactivez rounded
  • Désactivez shadows
  • Comparez la taille

Exercice 4 : Nouveaux composants​

Créez des variantes :

  • Nouveaux boutons
  • Nouveaux utilitaires
  • Utilisez @extend

Exercice 5 : Build tool​

Configurez un build tool :

  • Webpack ou Vite
  • Compilation automatique
  • Watch mode

❌ Erreurs fréquentes​

Erreur 1 : Importer tout Bootstrap​

❌ Mauvais :

@import "bootstrap"; // Tout

✅ Bon :

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

Pourquoi : Réduire la taille.

Erreur 2 : Variables après imports​

❌ Mauvais :

@import "bootstrap";
$primary: #custom; // Trop tard

✅ Bon :

$primary: #custom; // Avant
@import "bootstrap";

Pourquoi : Variables doivent être définies avant.

Erreur 3 : Oublier les dépendances​

❌ Mauvais :

@import "bootstrap/buttons"; // Sans variables

✅ Bon :

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/buttons";

Pourquoi : Dépendances nécessaires.

Erreur 4 : Build non optimisé​

❌ Mauvais :

// Tout Bootstrap + overrides partout

✅ Bon :

// Imports sélectifs + personnalisation organisée

Pourquoi : Performance et maintenabilité.

Erreur 5 : Pas de purge CSS​

❌ Mauvais :

/* CSS non utilisé inclus */

✅ Bon :

// Purge CSS configuré

Pourquoi : Réduire la taille finale.

🚀 Mini-projet​

Mission : Créer un build Bootstrap personnalisé optimisé

Créez un build complet :

Custom build :

  • Imports sélectifs (seulement ce qui est utilisé)
  • Variables personnalisées
  • Fonctionnalités désactivées si non utilisées

Intégration :

  • Structure SCSS organisée
  • Build tool configuré
  • Purge CSS activé

Optimisation :

  • Bundle size réduit
  • Performance optimale
  • Personnalisation complète

Critères :

  • ✅ Build personnalisé fonctionnel
  • ✅ Bundle optimisé (taille réduite)
  • ✅ Personnalisation complète
  • ✅ Build tool configuré
  • ✅ Production ready

Objectif : Maîtriser les fonctionnalités avancées Bootstrap pour créer des builds optimisés.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez le custom build, l'intégration SCSS et avez créé un build optimisé.