Aller au contenu principal

7-2 Modifier les variables Bootstrap

Bootstrap contient un fichier de variables SCSS qu'il est possible de modifier. L'idée cependant est de ne pas modifier le fichier source de Bootstrap, on ajoute plutôt un fichier dans notre application qui définit les variables de Bootstrap que nous voulons modifier. Bootstrap utilisera automatiquement nos valeurs de variables plutôt que les siennes.

Créer une feuille de style pour les variables​

Premièrement, créez une feuille de style qui sera responsable de contenir les variables SCSS.

  1. Créer un dossier styles. Sous le dossier src -> clic droit -> New -> Directory Imgur
  2. Nommer le dossier styles Imgur
  3. Sous ce nouveau dossier styles, créez un fichier de type Stylesheet Imgur
  4. Nommez la feuille de style _variables et choisissez SCSS comme type. Imgur

Importer la feuille de style variables dans styles.scss​

styles.scss est la feuille de style principale de l'application. Pour ajouter de nouveaux styles à l'application, il ne suffit que d'importer d'autres feuilles de style dans styles.scss.

info

Cela permet de garder le fichier styles.scss simple et facile à maintenir, plutôt que d'avoir un gros fichier contenant plein de styles mélangés.

Importez 'styles/variables' avant bootstrap:

src/styles.scss
/* Variables SCSS */
@import 'styles/variables';

/* Importing Bootstrap SCSS file. */
@import 'bootstrap/scss/bootstrap';

Modifier la couleur primaire Bootstrap​

La couleur primaire par défaut de Bootstrap est bleue. Imaginons que je veuille modifier cette couleur et qu'elle soit appliquée ensuite à tous les liens, boutons, etc.

Modifier chaque élément et remplacer la couleur par celle désirée serait fastidieux et introduirait possiblement plusieurs cas limites ou erreurs.

Dans mon cas, j'aimerais que la couleur primaire soit jaune (#ffe54c).

  1. Dans _variables.scss, définissez une variable $primary de la couleur désirée:

    src/styles/_variables.scss
    $primary: #ffe54c;

    Par contre, si vous regardez le site, rien n'a changé! C'est qu'aucun élément n'utilise le style de Bootstrap pour le moment.

    Nous pourrions faire en sorte que le bouton utilise Bootstrap plutôt que le style par défaut du navigateur.

  2. Modifier le bouton dans le composant projets-liste pour y ajouter les classes CSS btn btn-primary

    @Component({
    selector: 'app-projets-liste',
    imports: [],
    template: `
        <button (click)="ajouterProjet()" class="btn btn-primary">Ajouter un projet</button>

    //...

  3. Allez dans votre navigateur sur l'application et le bouton devrait avoir changé de couleur!

    http://localhost:4200

    img