Cours de base

Les composants de Bootstrap sont en grande partie construits avec une nomenclature de modificateur de base. Nous regroupons autant de propriétés partagées que possible dans une classe de base, comme .btn, puis regroupons les styles individuels pour chaque variante dans des classes de modificateurs, comme .btn-primary ou .btn-success.

Pour construire nos classes de modificateurs, nous utilisons les boucles @each de Sass pour itérer sur une carte Sass. Ceci est particulièrement utile pour générer des variantes d'un composant par notre $theme-colors et créer des variantes réactives pour chaque point d'arrêt. Au fur et à mesure que vous personnalisez ces cartes Sass et recompilez, vous verrez automatiquement vos modifications reflétées dans ces boucles.

Consultez notre documentation sur les cartes et les boucles Sass pour savoir comment personnaliser ces boucles et étendre la base de Bootstrap. approche modificateur à votre propre code.

Modificateurs

De nombreux composants de Bootstrap sont construits avec une approche de classe de modificateur de base. Cela signifie que la majeure partie du style est contenue dans une classe de base (par exemple, .btn) tandis que les variations de style sont confinées aux classes de modificateurs (par exemple, .btn-danger). Ces classes de modificateurs sont construites à partir de la carte $theme-colors pour personnaliser le nombre et le nom de nos classes de modificateurs.

Voici deux exemples de la façon dont nous parcourons la carte $theme-colors pour générer des modificateurs pour .alert et .list-group composants.

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

Responsive

Ces boucles Sass ne se limitent pas non plus aux cartes de couleurs. Vous pouvez également générer des variantes réactives de vos composants. Prenons par exemple notre alignement réactif des listes déroulantes où nous mélangeons une boucle @each pour la carte $grid-breakpoints Sass avec une requête multimédia incluse.

// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .dropdown-menu#{$infix}-start {
      --bs-position: start;

      &[data-bs-popper] {
        right: auto;
        left: 0;
      }
    }

    .dropdown-menu#{$infix}-end {
      --bs-position: end;

      &[data-bs-popper] {
        right: 0;
        left: auto;
      }
    }
  }
}

Si vous modifiez vos $grid-breakpoints, vos modifications s'appliqueront à toutes les boucles itérant sur cette carte.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Pour plus d'informations et d'exemples sur la façon de modifier nos cartes et variables Sass, veuillez vous référer à la section Sass de la documentation Grid .

Créer le votre

Nous vous encourageons à adopter ces directives lors de la construction avec Bootstrap pour créer vos propres composants. Nous avons nous-mêmes étendu cette approche aux composants personnalisés dans notre documentation et nos exemples. Des composants comme nos légendes sont construits comme nos composants fournis avec des classes de base et de modificateur.

<div class="callout">...</div>

Dans votre CSS, vous auriez quelque chose comme ce qui suit où la majeure partie du style est effectuée via .callout. Ensuite, les styles uniques entre chaque variante sont contrôlés via la classe de modificateur.

// Base class
.callout {}

// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}

Pour les légendes, ce style unique est juste un border-left-color. Lorsque vous combinez cette classe de base avec l'une de ces classes de modificateurs, vous obtenez votre famille de composants complète :