Topic outline

  • General

    Collapse all Expand all

    Préparation avant de commencer le cours :
    1. afin de suivre correctement ce cours sur Bootstrap, il faut avoir de bonnes bases en HTML/CSS, et en SCSS pour ceux qui recherche un usage "avancé"
    2. veuillez ouvrir la documentation officielle de Bootstrap, sur la dernière version (4.3)
    3. ce cours mélange de la théorie et de la pratique (TD/TP). Veuillez préparer un dossier "bootstrap" dans votre environnement de travail, et utiliser votre sandbox afin de pouvoir tester toutes les notions que nous aborderons ensemble au fur et à mesure.
    4. vous pourrez vous servir de cette feuille de triche qui récapitule toutes les classes de Bootstrap

  • Présentation

    Logo Bootstrap

    Bootstrap est le framework CSS le plus populaire du moment. Lancé en 2011 par Twitter, et open-source, il est vraiment LE framework CSS le plus utilisé. Beaucoup de concurrents existent, avec leurs avantages propres, mais Bootstrap reste néanmoins le framework le plus complet du "marché". De part sa richesse, il reste toutefois un framework assez lourd comparé à des concurrents qui mettent l'accent sur la légèreté, mais qui sont moins complets. En revanche, Bootstrap à posé certaines bases que vous reconnaîtrez aisément dans les autres framework (le système de grille par exemple).

    La version actuelle de Bootstrap est la 4.3. Elle ne diverge pas trop des anciennes versions. En revanche Bootstrap est entrain de préparer une version 5 qui va totalement supprimer la dépendance avec JQuery, ce qui pourrait poser certains problèmes de rétro-compatibilité par la suite, et de méthodes de travail.

    Avantages :

    • vous utilisez une bibliothèque qui offre de nombreux composants "déjà codés" (gain de temps, et code propre)
    • les composants de Bootstrap sont testés pour fonctionner dans le maximum de cas possibles (cross-platform, cross-browser, cross-device). Vous n'avez normalement pas à vous soucier du rendu dans chaque cas de figure
    • le rendu des différents composant est soigneusement travaillé, donc vous bénéficiez d'une esthétique propre, et dans les tendances actuelles
    • une large communauté pourra répondre à vos questions techniques, en plus de la doc officielle très fournie
    • ....(voir autres avantages ? )...


    Inconvénients :

    • vous alourdissez "de facto" votre site
    • votre site ressemblera à tous les autres sites utilisant Bootstrap
    • vous "investissez" dans un produit qui n'est pas parfait (exemple de la v5)
    • vous êtes obligés de vous plier à la logique Bootstrap
    • ...(autres ?)...


  • Fonctionnement

    Pour une utilisation classique de Bootstrap (cqfd : sans recompiler les sources), l’utilisation est assez aisée. Vous devez simplement appeler dans votre page les fichiers CSS et JS nécéssaires à Bootstrap, et commencer à y intégrer les différents composants que vous jugerez utiles. Bootstrap est un framework CSS, mais il a besoin de Javascript pour fonctionner. Cela veux dire que vous aller devoir utiliser un peu de JS pour faire fonctionner certains des modules proposés par Bootstrap. En outre, BS se base sur JQuery pour l'aspect JS, donc vous devrez forcément avoir JQuery disponible dans vos pages pour que Bootstrap fonctionne correctement. Idem pour la librairie Popper.js.

    Une fois BS installé, vous bénéficierez d'un style par défaut retravaillé d'une majorité des balises HTML, des classes CSS qui correspondent aux besoins récurrents des développeurs, et des composants "dynamiques" (ex : fenêtres modales, carrousel, bandeau de navigation, etc...) qui apporteront des fonctionnalités essentielles à votre site. Le tout, en codant un minimum.

    Attention : la v5 de BS qui sortira prochainement n'utilisera plus JQuery, mais du VanillaJS.

  • Installation

    Image header HTML

    Comme d'habitude, vous pouvez faire le choix d'utiliser un CDN, ou bien de télécharger Bootstrap en local. Voici les fichiers minimum à appeler dans la balise <head> de vos pages :

    1. bootstrap.css (le fichier CSS principal de BS)
    2. jquery.js (un JQuery compatible avec votre version de BS)
    3. popper.js (une librairie très utilisé par BS, au même titre que JQuery)
    4. bootstrap.js (le fichier JS principal de BS)


    Vous pouvez évidemment appeler les fichiers minifiés pour optimiser la gestion de vos assets. L'ordre d'appel des fichiers est importants. De plus, Bootstrap nécessite la mise en place de la balise <!doctype html> au début de vos documents, et aussi l'ajout de la balise <meta viewport> afin de fonctionner correctement.

    Pour les plus aventuriers, vous pouvez télécharger la version source de Bootstrap afin de modifier quelques paramètres et voir la structure réelle de Bootsrap, mais nous ne nous attarderons pas sur ce point, nous nous contenterons d'un usage "packagé" de Bootstrap.

    Important : Commencez dès maintenant à vous faire une sandbox dédiée à Bootstrap sur votre machine en local, et créez un dossier dédié sur l'espace web mis à votre disposition pour la formation. Je vous demande de tester les différents composants au fur et à mesure que nous les découvrirons ensemble.

  • Dispositions des éléments

    Nous allons voir ici les grandes lignes qui permettent d'agencer vos éléments dans vos pages web grâce à Bootstrap. Ce sont des règles génériques qui fixent les grandes lignes de dispositions des blocs constituant votre page.


    Les conteneurs

    La classe .container vous permet de définir un bloc de conteneur dont la taille est défini par les règles de Bootstrap (par exemple : 1140px en large-screen). C'est un conteneur simple qui ne prends pas forcément toute la largeur de l'écran, mais qui s'affichera au centre.

    La classe .container-fluid fonctionne de la même manière que .container, mais en pleine largeur.


    Les seuils de rupture responsive

    Bootstrap vous offre par défaut un fonctionnement responsive basé sur quelques seuils de résolutions reconnus comme "représentatifs" de la réalité des différents périphériques du marché :

    1. petit périphérique : > 576px
    2. moyen périphérique : > 768px
    3. grand périphérique : > 992px
    4. très grand périphérique : > 1200px


    BS étant conçu en mode mobile-first, les résolutions en dessous de 576px sont en fait les règles "par défaut". Tous ces seuils, et les media-queries qui vont avec peuvent être redéfinis via la modification puis la re-compilation des fichiers sources Sass.

    Voici un exemple de différents seuils de rupture :

    Seuils de rupture responsive


    Le système de grille

    Bootstrap propose un système de grille pour agencer tous vos blocs de contenu dans des lignes séparés en 12 colonnes. Que vous soyez en large-screen, ou en xs, chaque ligne propose toujours 12 colonnes pour agencer votre contenu. Bien souvent, vous exploiterez plusieurs colonnes en large-screen afin d'afficher plusieurs blocs sur la même ligne, et plus vous descendrez en résolution, plus vos blocs s'étaleront sur les 12 colonnes disponibles. Une ligne peux contenir plusieurs blocs de 12 colonnes, dans ce cas ils s'empilent les uns sur les autres, donnant l'impression qu'il y a plusieurs lignes. Mais en réalité, nous sommes toujours dans la même "row".

    Structure de base :

    Pour commencer vous devrez créer un conteneur. Ensuite viens la ligne, et ensuite viens les blocs de colonnes.

     <div class="container">
       <div class="row">
         <div class="col">
          Content
         </div>
       </div>
     </div>

    Voici une image représentative  :

    Représentation de la grille Bootstrap

    Il y a de nombreuse façons de personnaliser la grille, avec différentes options. Mais le plus important est de connaitre les différentes classes de colonnes :

    Ici, le caractère étoile * représente le nombre de colonnes de votre bloc.

    • .col-* : très petites résolutions. Pas besoin de suffixes, c'est le comportement par défaut
    • .col-sm-* : petites résolutions
    • .col-md-* : moyennes résolutions
    • .col-lg-* : grandes résolutions
    • .col-xl-* : très grandes résolutions


    Pour toutes les autres possibilités, je vous renvoi à la doc officielle qui est très exhaustive, et aux innombrables tutoriels. Le système de grille de Bootstrap étant basé sur les flexbox, il a a une grande souplesse (alignements verticaux, dimensionnement automatique, gouttières, centrage, etc etc...)

  • Reboot et styles par défaut

    reset bootstrap

    Dans votre sandbox, vous pouvez tester les styles par défauts. Bootstrap redéfini automatiquement de nombreux paramètres CSS par défaut, afin que le rendu des différents éléments de votre page soit le même sur tous les supports envisageables (navigateurs, périphériques, OS,...).

    Mettez des titres h1 et h2, ainsi que des listes et des tableaux dans votre sandbox. Vous constaterez qu'ils n'ont pas le même style que d'habitudes. Tous les éléments sont redéfinis avec les valeurs par défaut de Bootstrap.

    Vous pouvez vérifier toutes les règles CSS qui proviennent du fichier _reboot.scss  dans votre console. Supprimer l'appel à Bootstrap dans votre <head> pour constater la différence de style.

    Ces nouvelles valeurs s'appliquent pour un grand nombre de balises HTML (formulaire, adresse, polices par défaut, etc...)

  • Classes proposées par Bootstrap

    En plus de redéfinir les balises HTML standard, Bootstrap vous offre tout un panel de classes vous permettant de donner des styles déjà prêt. Si par exemple vous souhaitez mettre un texte en paragraphe, mais avec un look de titre H1, vous pouvez écrire quelque chose comme ça :

    <p class="display-1">Mon texte s'affichera comme un titre H1</p>

    Ici, la classe .display-1, fournie par BS, vous permettra d'appliquer le style H1 à un élément qui n'en est pas un. Pratique.


    Un autre exemple sur les <p> : vous pouvez leur attribuer une class .lead, (ce qui pourrez se traduire ici par important, ou principal) afin de donner plus d'impact à votre paragraphe comparé aux paragraphes "standards" :

    <p class="lead">Je suis un p lead car je raconte quelque chose qui doit être mis en avant aux yeux de l'utilisateur.</p>


    Pour clôturer cette section, je vous propose de tester la classe .img-thumbnail sur les images. Cette classe va vous permettre de donner un style "thumbnail" (donc "vignette" ou "timbre", littéralement "ongle de pouce") à une image. Vous aurez alors une jolie bordure très fine avec des coins légèrement arrondis, et un petit padding pour mettre en valeur votre vignette :

    <img src="chemin/vers/image.jpg" class="img-thumbnail">


    Voila, nous ne ferons pas le tour de toutes les classes proposées par BS, car il y en a de nombreuses. Je vous invite à jeter un œil à la doc pour voir un peu les possibilités proposées. Vous pouvez par exemple tester les nombreuses classes associées aux tableaux. 

    Sachez juste que cela existe, et si vous utilisez BS, prenez le réflexe d'aller vérifier l'existence d'une classe qui répond à vos besoins avant de vous jeter tête baissée dans l'écriture de vos propres classes CSS. C'est pour cela que BS existe, pour vous faire gagner du temps, et surtout pour vous proposer une esthétique et une technique en adéquation avec les tendances actuelles.

  • Classes utilitaires

    Les classes utilitaires de Bootstrap vont vous permettre d'utiliser des propriétés CSS existantes, mais sans avoir à les définir vous même. Contrairement au .lead ou au .active, "inventés" de toute pièce par Bootstrap, les classes utilitaires ne font qu'apporter des propriétés CSS standard à un élément. 

    Comme nous l'avons vu plus haut, la classe .mb-0 signifie juste que nous voulons un margin-bottom à 0 pixel sur un élément. Vous auriez pu définir ça de manière classique, en sélectionnant votre élément dans une règle CSS, et en lui appliquant la règle margin-bottom: 0px;. Mais toujours dans un souci d'avoir à écrire le moins de code "redondant" possible, et aussi de bénéficier des avantages et de la sécurité de la "couche" Bootstrap, vous pouvez utiliser les classe utilitaires.

    Certaines de ces classes touchent à des propriétés très basiques, comme les marges. Tandis que d'autres offre des possibilités un peu plus originales tel que les "stretched link".


    Structure des classes

    La plupart des classes utilitaires sont "dynamiques". J'entends par la qu'elles s'appellent suivant une logique souple qui vous offre de multiples possibilités de personnalisation. 

    Pour reprendre l'exemple des marges, voici comment ça se présente :

    1. la lettre m signifie que vous souhaitez jouer sur les marges
    2. les lettres t, b, l, r vous permettent de spécifié de quel côté vous voulez appliquer votre marge (pour top, bottom, left et right)
    3. les chiffres 0, 1, 2, 3, 4, 5 vous permettent de définir la taille de la bordure (0 = pas de marge, 3 = marge par défaut, 5 = grandes marges)


    Donc pour déterminer les marges d'un élément, vous pouvez écrire :

    <div class="alert alert-warning m-0" role="alert"> // Pas de marge (0)

    <div class="alert alert-success ml-3" role="alert"> // Marge par défaut à gauche (1rem)

    <div class="alert alert-warning alert-dismissible fade show mt-5" role="alert"> // Grande marge en haut (3rem)

    Voici le rendu :

    On voit clairement que les marges sont différentes sur chaque élément. Attention : dans cet exemple, la cascade est toujours présente, donc certains éléments (tel que les alertes) ont déjà des marges par défaut. Donc votre classes utilitaires va venir se greffer "par dessus" des règles déjà existantes.

    Marges avec bootstrap

    -> Faites le test dans votre sandbox.

    Cet exemple sur les marges s'applique exactement de la même manière pour les padding. En revanche, pour les autres types de propriétés, vous allez utiliser d'autres suffixes, préfixes, et valeurs, en fonction de chaque propriétés. Je vous encourage à faire un tour sur la partie "Utilities" de la doc Bootsrap pour voir les différentes possibilités. Mais avant, voyons ensemble quelques autres exemples.


    Les couleurs

    Bootstrap propose un ensemble de classes utilitaires pour déterminer différents style de couleurs suivant la nature de vos éléments. Dans ce cas, les couleurs sont vraiment reliés à un "type" de données. En voici quelques une :

    • primary : donne aux éléments une couleur bleu
    • secondary : donne aux éléments une couleur grise
    • success : donne aux éléments une couleur verte
    • danger : donne aux éléments une couleur rouge
    • warning : donne aux éléments une couleur orange


    Ces classes utilitaires peuvent s'appliquer à de nombreux éléments ou composants, voici un exemple de nos alertes avec un rendu différent :


    <div class="alert alert-success" role="alert">
  Texte affiché dans un bloc d'alerte de type "success" (donc vert)
</div>

<div class="alert alert-warning" role="alert">
  <h4 class="alert-heading">Titre Alerte</h4>
  <p>Vous venez de réaliser une alerte avec une classe warning (donc jaune)</p>
  <hr>
  <p class="mb-0">Avec des infos plus précises et plus complètes.</p>
</div>

<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>Salut !</strong> Vous venez de réaliser une alerte avec une classe danger (donc rouge)
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>


    Ici, ce sont les classes utilitaires success, warning et danger qui ont été utilisés avec le composant alert. Et ça donne ceci :

    Classes couleur Bootstrap


    Les bordures

    Utilisez la doc pour faire plusieurs blocs qui utilisent les classes utilitaires liées aux bordures. Vous pouvez mélanger les classes.

    Les liens étirés

    Faites de même pour l'exemple simple des liens étirés, et constatez que votre div est bien cliquable malgré que le lien soit seulement sur le bouton (JS).

  • Intégration de composants

    Les composants sont des éléments créés de toutes pièces par BS. Ils sont un mélange de balises HTML et de classes CSS propres à BS, ayant pour but de mettre à dispositions des développeurs des éléments très fréquemment utilisés. En effet, on vous demandera régulièrement dans différents projets d'intégrer des choses tels que :

    • des messages d'alerte
    • des sliders
    • des boutons
    • des breadcrumbs
    • des barres de navigation
    • etc etc... 

    Composants Bootstrap

    Tous ces éléments récurrents sont un peu les "pièces détachées" d'un site web. Comme une voiture est normalement constituée d'un volant, de roues, et de sièges, un site web à ces propres pièces détachées. A vous de piocher dedans selon les besoins de votre projet.

    Je vous encourage à jeter un œil à la partie "Components" de la doc de BS, afin de vous faire une idée de l'ensemble des composants disponibles, et de voir leur rendu et la manière de s'en servir. De plus, les termes anglais employés pour les composants font partis du jargon que vous devez maîtriser pour parler "front-end". Vous devez savoir à quoi correspond un "Tooltip", une "Modal", un "Jumbotron" etc... Donc pensez à réviser votre vocabulaire afin de pouvoir communiquer plus facilement avec vos collègues, responsables ou clients.


    Javascript


    Les composants, un peu plus complexes que les balises HTML simples et les classes CSS, nécessitent parfois l'usage de JS. Il peux s'avérer nécessaire d'écrire beaucoup de JS pour obtenir une exécution "fonctionnelle" de certains composants, mais BS est conçu de telle manière, que la majorité des composants ne nécessitent pas beaucoup de JS pour être opérationnels. Donc nous nous contenterons d'un usage basique des composants, avec un minimum de JS, pour les faire fonctionner. En réalité, c'est via l'ajout de classes CSS, ou de certains attributs HTML tels que role="xxx", que les composants de BS vont avoir un comportement ou un affichage "dynamique". C'est via ces classes et ces attributs que Bootstrap va "comprendre" quels composants vous utilisez, et les réglages que vous attendez, sans forcément avoir besoin de le définir en JS.

  • Composants simples

    Nous allons découvrir les composants simples que propose Bootstrap via l'utilisation du composant "alert". Pour ceux qui découvre tout ça, une alerte est un bloc de texte qui surgit à l'écran suite à une action de l'utilisateur.

    Exemples d'alertes sur l'envoi d'un message via un formulaire de contact :

    • "Votre message a bien été envoyé" (alerte de succès)
    • "Vous n'avez pas saisi correctement votre e-mail" (alerte d'erreur)
    • etc...


    Voici comment intégrer un message d'alerte simple :

    <div class="alert alert-warning" role="alert">
      Texte affiché dans un bloc d'alerte de type "warning" (donc jaune)
    </div>

    Ce code va vous afficher le texte du contenu dans un simple bloc de type alerte, faites le test dans votre sandbox. Remarquez les classes .alert et .alert-warning utilisées pour spécifier à BS que cette div doit avoir un comportement et un rendu d'alerte. Ici, le .alert-warning ne sert qu'a spécifier la couleur de l'alerte (background, mais aussi le texte).

    alerte bootstrap simple


    Alerte avec un contenu un peu plus travaillé :

    <div class="alert alert-success" role="alert">
      <h4 class="alert-heading">Titre Alerte</h4>
      <p>Vous venez de réaliser une alerte avec un style et un agencement un peu plus complexe que l'alerte simple.</p>
      <hr>
      <p class="mb-0">Avec des infos plus précises et plus complètes.</p>
    </div>

    Ici, certains éléments HTML et classes CSS sont ajoutés pour avoir ce rendu :

    • .alert-succes : permet simplement d'avoir une autre couleur
    • .alert-heading : permet de spécifier que l'alerte à un titre
    • .mb-0 : est une classe dynamique. Cela veut dire qu'on veut une margin-bottom à 0 pixels (mb-0) sur cet élément.

    alerte bootstrap avec contenu


    Alerte avec une fonction de fermeture via un clic utilisateur sur une croix :

    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>Salut !</strong> Certaines fonctionnalités dynamiques peuvent être incorporées directement via du HTML/CSS. Vous pouvez fermer cette alerte.
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    Ici, de nombreux éléments sont ajoutés aux balises HTML afin de pouvoir leur donner les rôles et les comportements attendu :

    • .alert-dissmisible : veux dire que c'est une alerte qui peut se fermer, et prépare la div à recevoir une icône de fermeture
    • .fade et .show : permet de donner un effet de fermeture plus "smooth" qu'une disparition basique
    • <button> et ses classes et attributs définissent la petite croix qui permettra la fermeture
    • etc...

    alerte bootstrap qui peut se fermer


    Voici quelques autres exemples de composants simples :
    • breadcrumbs
    • boutons
    • badges
    • listes
    • etc...

  • Composants complexes

    Si dans votre site vous souhaitez intégrer ce que l'on appel "un carrousel", il y a un composant pour ça. Vous devrez respecter la structure proposée par BS, et ce sera le framework qui se chargera d'afficher vos images, et de mettre en place le Javascript nécessaire à l'animation et au rendu de votre carrousel.


    Voici un exemple d'intégration du code du carrousel :

    Cet exemple comporte :

    • des slides : le minimum pour un carrousel. Les slides sont les images qui vont défiler à l'intérieur de votre carrousel
    • des contrôles : ce sont les petites flèches droite/gauche qui vont vous permettre d'avancer ou de reculer dans le défilement du carrousel
    • des indicateurs : sont des petits traits qui vont vous permettre de savoir à quel position du slide vous êtes
    • des titres : permet d'incorporer du texte sur chaque slide, par dessus les images


    Les contrôles, indicateurs et titres sont optionnels. Je les rajoute pour vous montrer comment intégrer des options à vos composants.


    <div class="container">
        <div class="bd-example">
          <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
              <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="bordeaux.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>Bordeaux</h5>
                  <p>La ville du vin et des dunes du Pyla !</p>
                </div>
              </div>
              <div class="carousel-item">
                <img src="lyon.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>Lyon</h5>
                  <p>La ville de guignol et de la quenelle !</p>
                </div>
              </div>
              <div class="carousel-item">
                <img src="sanfransisco.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>San Fransisco</h5>
                  <p>La ville de la haute-technologie et des hippies !</p>
                </div>
              </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
             <span class="carousel-control-prev-icon" aria-hidden="true" style="background-color:lightgrey;"></span>
             <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
             <span class="carousel-control-next-icon" aria-hidden="true" style="background-color:lightgrey;"></span>
             <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>

    Explications sur quelques éléments qui composent cet exemple :

    • data-ride="carousel" : permet de lancer le composant carrousel sans avoir a le faire en JS
    • data-target="#carouselExampleCaptions" data-slide-to="0" class="active" : permet de configurer la cible des indicateurs (quel carrousel et quel slide) + déterminer le quel doit être actif au chargement
    • class="carousel-item active" : permet de définir un bloc comme étant un des slides du carrousel. Le .active veux dire que c'est celui ci qui est affiché en premier.
    • class="carousel-caption d-none d-md-block" : permet de déterminer une légende à votre carrousel
    • a class="carousel-control-prev" : permet de créer le contrôle "image précédente" (petite flèche latérales)
    • span class="carousel-control-prev-icon" : permet de définir le contenu du contrôle "précédent" (par défaut, une flèche)


    Voici un screenshot d'un exemple de slider :

    Vous remarquerez l'image du slide, les contrôles (flèches sur les côtés), les indicateurs (tirets blancs en bas) et la légende (texte en bas). Le style est très simple, et c'est un screenshot, mais vous pouvez voir plusieurs exemples fonctionnels dans la doc de Bootstrap.

    carrousel bootsrap


    Autres exemples de composants complexes :

    • fenêtres modales
    • popovers
    • cartes
    • formulaires
    • etc...

  • Personnalisation


    Les thèmes

    Dans cette section, nous allons voir différentes manières de modifier ou de surcharger le thème original de BS. Elles ont toutes leur avantages et leurs inconvénients et nécessite pus ou moins de technique pour être mise en oeuvre. 

    Pour recompiler Bootstrap, il vous faudra être à l'aise avec les notions de SASS et les outils de compilation. Je vous propose de tester les toutes les méthodes pour ceux qui sont vraiment à l'aise avec SASS. Pour les autres ça n'est pas grave si vous n'y arrivez pas aujourd'hui, mais il faut savoir que ça existe, et s’entraîner pour y arriver. Vous devez tous me faire au moins l'intégration de thèmes existant, et la création de votre thème via des feuilles de style standards.

    Création de thème avec Bootstrap


    Utiliser un thème existant

    La solution de facilité : utiliser un thème déjà réalisé. Vous trouverez de nombreux sites qui vous en proposent, mais certains sont payant. Voici un exemple de thèmes gratuits : https://startbootstrap.com/themes/. Tester en deux ou trois sur vos TP Bootstrap pour voir les différents rendus.


    Personnaliser son thème via un simple fichier CSS

    La c'est très simple. Il vous suffit de créer votre ficher mon-theme-bootstrap.css, et de commencer à le personnaliser. Vous pouvez le faire en SASS pour ceux qui le souhaitent. Normalement, un thème redéfini les grandes lignes d'un style déjà existant (ex : changer les polices, la couleur de fond, et différents éléments, etc...).

    Par exemple, faites moi un thème spécial pour les pricing (ex : mes-pricing.css), en changeant la couleur de fond du body, et en mettant les bordures des cartes en pointillés. Vous pouvez maintenant changer totalement le rendu de votre page en appelant - ou non - votre fichier thème. Faites le test.

    Cette technique est facile à mettre en oeuvre, mais le problèmes c'est que vous ne faites que surcharger le thème standard de Bootstrap. Si vous souhaitez redéfinir réellement les règles de style de BS, il va falloir recompiler ses fichiers sources.


    Recompiler Bootstrap en changeant des valeurs système

    Si vous souhaitez modifier BS pour qu'il se comporte différemment, c'est possible via la re-compilation des fichiers sources. Commencez par télécharger tout Bootstrap, et mettez en place le processus de compilation comme nous avons pu le voir dans les cours sur SCSS. Je vous laisse rechercher la méthode la plus appropriée selon les outils que vous utilisez habituellement (Koala, ligne de commande, plugin éditeur, Gulp, etc...). 

    Une fois opérationnel, vous pourrez redéfinir les .primary en green au lieu de bleu si ça vous chante, mettre un gris clair à la place du blanc pour la couleur de fond du body, etc... L'avantage de cette méthode est que vous avez votre Bootstrap maison, encapsulé dans un seul fichier. L'inconvénient, c'est que si vous souhaitez mettre votre version de Bootstrap à jour, vous perdez toutes vos modifications.

    Exemple : changez la valeur du rouge par défaut dans le fichier _variables.scss de Bootstrap

    //$red:     #dc3545 !default;
    $red:     red !default;


    Recompiler Bootstrap en utilisant les valeurs système dans un thème

    La on frôle la perfection, mais la solution est encore un peu plus complexe à mettre en oeuvre. 

    L'idée s'est d'avoir un thème séparé de Bootstrap, tout en ayant accès au fichiers sources de BS. Du coup, vous pouvez créer votre thème en utilisant les variables de BS, et si vous changer de fichiers sources (pour une version plus récente par exemple), votre thème reste à peu près opérationnel car vous n'avez pas modifié les valeurs directement dans le noyau de Bootstrap. Il peut toutefois y avoir quelques problèmes de compatibilité à résoudre suivant les divergences entre les deux versions de BS.

    C'est un peu la même logique que les thèmes enfants dans Wordpress. Cette technique est tellement souple que vous pouvez même redéfinir les variables système dans votre thème sans avoir à toucher aux fichiers sources. Vous pouvez essayer de redéfinir la variable $red pour votre thème par exemple. 

    Voici une possibilité de personnalisation de votre thème :

    $red: blue !important;
    body{
     background-color: $red;
    }
    .card{
      border-style:dashed;
    }

  • Bootstrap 5

    Différence entre 4 et 5 : 

    https://www.geeksforgeeks.org/difference-between-bootstrap-4-and-bootstrap-5/

    https://superdevresources.com/bootstrap5-vs-bootstrap4-whats-new/


    Doc officielle :

    https://getbootstrap.com/


  • Exercices

    Pour ceux qui souhaitent mettre l'accent sur le développement front-end, et sur l'apprentissage de Bootstrap, je vous conseille de vous entraîner au maximum via la réalisation de ce genre de maquettes :