in English

Toupet

Utilisez nos fichiers source Sass pour tirer parti des variables, des cartes, des mixins et des fonctions pour vous aider à créer plus rapidement et à personnaliser votre projet.

Sur cette page

Utilisez nos fichiers source Sass pour tirer parti des variables, des cartes, des mixins, etc.

Structure du fichier

Dans la mesure du possible, évitez de modifier les fichiers principaux de Bootstrap. Pour Sass, cela signifie créer votre propre feuille de style qui importe Bootstrap afin que vous puissiez la modifier et l'étendre. En supposant que vous utilisez un gestionnaire de packages comme npm, vous aurez une structure de fichiers qui ressemble à ceci :

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Si vous avez téléchargé nos fichiers source et que vous n'utilisez pas de gestionnaire de packages, vous souhaiterez créer manuellement quelque chose de similaire à cette structure, en séparant les fichiers source de Bootstrap des vôtres.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Importation

Dans votre custom.scssfichier , vous importerez les fichiers Sass source de Bootstrap. Vous avez deux options : inclure tout Bootstrap ou choisir les pièces dont vous avez besoin. Nous encourageons ce dernier, mais sachez qu'il existe certaines exigences et dépendances entre nos composants. Vous devrez également inclure du JavaScript pour nos plugins.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

Une fois cette configuration en place, vous pouvez commencer à modifier n'importe laquelle des variables et cartes Sass dans votre fichier custom.scss. Vous pouvez également commencer à ajouter des parties de Bootstrap sous la // Optionalsection selon vos besoins. Nous vous suggérons d'utiliser la pile d'importation complète de notre bootstrap.scssfichier comme point de départ.

Valeurs par défaut des variables

Chaque variable Sass dans Bootstrap inclut le !defaultdrapeau vous permettant de remplacer la valeur par défaut de la variable dans votre propre Sass sans modifier le code source de Bootstrap. Copiez et collez les variables selon vos besoins, modifiez leurs valeurs et supprimez l' !defaultindicateur. Si une variable a déjà été affectée, elle ne sera pas réaffectée par les valeurs par défaut dans Bootstrap.

Vous trouverez la liste complète des variables de Bootstrap dans scss/_variables.scss. Certaines variables sont définies sur null, ces variables ne génèrent pas la propriété à moins qu'elles ne soient remplacées dans votre configuration.

Les remplacements de variables doivent intervenir après l'importation de nos fonctions, mais avant le reste des importations.

Voici un exemple qui change le background-coloret colorpour le <body>lors de l'importation et de la compilation de Bootstrap via npm :

// Required
@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Répétez si nécessaire pour toute variable dans Bootstrap, y compris les options globales ci-dessous.

Commencez avec Bootstrap via npm avec notre projet de démarrage ! Dirigez-vous vers le référentiel de modèles twbs/bootstrap-npm-starter pour voir comment créer et personnaliser Bootstrap dans votre propre projet npm. Inclut le compilateur Sass, le préfixe automatique, Stylelint, PurgeCSS et les icônes Bootstrap.

Cartes et boucles

Bootstrap comprend une poignée de cartes Sass, des paires clé-valeur qui facilitent la génération de familles de CSS associées. Nous utilisons les cartes Sass pour nos couleurs, les points d'arrêt de la grille, etc. Tout comme les variables Sass, toutes les cartes Sass incluent le !defaultdrapeau et peuvent être remplacées et étendues.

Certaines de nos cartes Sass sont fusionnées en cartes vides par défaut. Ceci est fait pour permettre une expansion facile d'une carte Sass donnée, mais se fait au prix de rendre légèrement plus difficile la suppression d'éléments d'une carte.

Modifier la carte

Toutes les variables de la $theme-colorscarte sont définies comme des variables autonomes. Pour modifier une couleur existante dans notre $theme-colorscarte, ajoutez ce qui suit à votre fichier Sass personnalisé :

$primary: #0074d9;
$danger: #ff4136;

Plus tard, ces variables sont définies dans la $theme-colorscarte de Bootstrap :

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Ajouter à la carte

Ajoutez de nouvelles couleurs à $theme-colors, ou à toute autre carte, en créant une nouvelle carte Sass avec vos valeurs personnalisées et en la fusionnant avec la carte d'origine. Dans ce cas, nous allons créer une nouvelle $custom-colorscarte et la fusionner avec $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Supprimer de la carte

Pour supprimer des couleurs de $theme-colors, ou de toute autre carte, utilisez map-remove. Sachez que vous devez insérer $theme-colorsentre nos exigences juste après sa définition dans variableset avant son utilisation dans maps:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Clés requises

Bootstrap suppose la présence de certaines clés spécifiques dans les cartes Sass telles que nous les utilisons et les étendons nous-mêmes. Lorsque vous personnalisez les cartes incluses, vous pouvez rencontrer des erreurs lorsque la clé d'une carte Sass spécifique est utilisée.

Par exemple, nous utilisons les touches , et de primarypour successles liens, les boutons et les états de formulaire. Le remplacement des valeurs de ces clés ne devrait poser aucun problème, mais leur suppression peut entraîner des problèmes de compilation Sass. Dans ces cas, vous devrez modifier le code Sass qui utilise ces valeurs.danger$theme-colors

Les fonctions

Couleurs

À côté des cartes Sass que nous avons, les couleurs de thème peuvent également être utilisées comme variables autonomes, comme $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

Vous pouvez éclaircir ou assombrir les couleurs avec Bootstrap tint-color()et les shade-color()fonctions. Ces fonctions mélangeront les couleurs avec le noir ou le blanc, contrairement aux fonctions natives lighten()et de Sass darken()qui modifieront la luminosité d'une quantité fixe, ce qui souvent ne conduit pas à l'effet souhaité.

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

En pratique, vous appelleriez la fonction et passeriez les paramètres de couleur et d'épaisseur.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Contraste des couleurs

Afin de respecter les exigences de contraste des Web Content Accessibility Guidelines (WCAG) , les auteurs doivent fournir un contraste de couleur de texte minimum de 4,5:1 et un contraste de couleur non textuel minimum de 3:1 , à quelques exceptions près.

Pour vous aider, nous avons inclus la color-contrastfonction dans Bootstrap. Il utilise l' algorithme de rapport de contraste WCAG pour calculer les seuils de contraste en fonction de la luminance relative dans un sRGBespace colorimétrique afin de renvoyer automatiquement une couleur de contraste claire ( #fff), sombre ( #212529) ou noire ( #000) en fonction de la couleur de base spécifiée. Cette fonction est particulièrement utile pour les mixins ou les boucles où vous générez plusieurs classes.

Par exemple, pour générer des échantillons de couleurs à partir de notre $theme-colorscarte :

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

Il peut également être utilisé pour des besoins de contraste ponctuels :

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

Vous pouvez également spécifier une couleur de base avec nos fonctions de palette de couleurs :

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Évasion SVG

Nous utilisons la escape-svgfonction pour échapper les caractères <, >et #pour les images d'arrière-plan SVG. Lors de l'utilisation de la escape-svgfonction, les URI de données doivent être entre guillemets.

Fonctions d'addition et de soustraction

Nous utilisons les fonctions addet subtractpour envelopper la calcfonction CSS. L'objectif principal de ces fonctions est d'éviter les erreurs lorsqu'une valeur "sans unité" 0est passée dans une calcexpression. Des expressions comme calc(10px - 0)renverront une erreur dans tous les navigateurs, bien qu'elles soient mathématiquement correctes.

Exemple où le calcul est valide :

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Exemple où le calcul est invalide :

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Mélanges

Notre scss/mixins/répertoire contient une tonne de mixins qui alimentent des parties de Bootstrap et peuvent également être utilisés dans votre propre projet.

Schémas de couleurs

Un mixin abrégé pour la prefers-color-schemerequête multimédia est disponible avec la prise en charge des jeux de couleurs light, darket personnalisés.

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}