Composants

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-primaryou .btn-success.

Pour construire nos classes de modificateurs, nous utilisons les @eachboucles 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-colorset 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 nos documents sur les cartes et les boucles Sass pour savoir comment personnaliser ces boucles et étendre l'approche de modification de base de Bootstrap à 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 à des classes de modificateurs (par exemple, .btn-danger). Ces classes de modificateurs sont construites à partir de la $theme-colorscarte pour personnaliser le nombre et le nom de nos classes de modificateurs.

Voici deux exemples de la façon dont nous parcourons la $theme-colorscarte pour générer des modificateurs aux composants .alertet .list-group.

// 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);
}

Sensible

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 @eachboucle pour la $grid-breakpointscarte 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 votre $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 vôtre

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. Les composants comme nos légendes sont construits comme nos composants fournis avec les 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 n'est qu'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 :