Komponentai

Bazinės klasės

„Bootstrap“ komponentai daugiausia sukurti naudojant bazinio modifikatoriaus nomenklatūrą. Sugrupuojame kuo daugiau bendrinamų savybių į bazinę klasę, pvz .btn., , tada sugrupuojame atskirus kiekvieno varianto stilius į modifikavimo klases, pvz ., .btn-primaryarba .btn-success.

Norėdami sukurti modifikatorių klases, naudojame Sass @eachkilpas, kad kartotume per Sass žemėlapį. Tai ypač naudinga generuojant mūsų komponento $theme-colorsvariantus ir kuriant reaguojančius variantus kiekvienam pertraukos taškui. Kai tinkinate šiuos Sass žemėlapius ir iš naujo kompiliuojate, automatiškai matysite pakeitimus, kurie atsispindės šiose kilpose.

Peržiūrėkite mūsų „Sass“ žemėlapių ir kilpų dokumentus , kaip tinkinti šias kilpas ir išplėsti „Bootstrap“ bazinio modifikatoriaus metodą savo kodui.

Modifikatoriai

Daugelis „Bootstrap“ komponentų yra sukurti naudojant bazinio modifikatoriaus klasės metodą. Tai reiškia, kad didžioji stiliaus dalis yra pagrindinėje klasėje (pvz., .btn), o stiliaus variantai apsiriboja modifikavimo klasėmis (pvz., .btn-danger). Šios modifikavimo klasės yra sukurtos iš $theme-colorsžemėlapio, kad būtų galima tinkinti mūsų modifikatorių klasių skaičių ir pavadinimą.

Čia pateikiami du pavyzdžiai, kaip pereiname per $theme-colorsžemėlapį, kad sugeneruotume .alertir .list-groupkomponentų modifikatorius.

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

Atsakingas

Šios Sass kilpos taip pat neapsiriboja spalvų žemėlapiais. Taip pat galite sukurti reaguojančius komponentų variantus. Paimkite, pavyzdžiui, mūsų atsakingą išskleidžiamųjų meniu derinimą, kai sumaišome Sass žemėlapio @eachkilpą $grid-breakpointssu medijos užklausa.

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

Jei pakeisite savo $grid-breakpoints, jūsų pakeitimai bus taikomi visoms kilpoms, kartojančioms tą žemėlapį.

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

Daugiau informacijos ir pavyzdžių, kaip modifikuoti Sass žemėlapius ir kintamuosius, rasite tinklelio dokumentacijos Sass skyriuje .

Kurti savo

Rekomenduojame vadovautis šiomis gairėmis, kai kuriate naudodami „Bootstrap“, kad sukurtumėte savo komponentus. Mes išplėtėme šį požiūrį į pasirinktinius komponentus savo dokumentuose ir pavyzdžiuose. Komponentai, tokie kaip mūsų figūrinės išnašos, yra sukurti kaip mūsų pateikti komponentai su bazinėmis ir modifikavimo klasėmis.

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

Savo CSS turėtumėte kažką panašaus į toliau pateiktą, kur didžioji dalis stiliaus kūrimo atliekama naudojant .callout. Tada unikalūs stiliai tarp kiekvieno varianto yra valdomi per modifikatorių klasę.

// Base class
.callout {}

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

Figūrinėms išnašoms tas unikalus stilius yra tik border-left-color. Sujungę tą bazinę klasę su viena iš tų modifikatorių klasių, gausite visą komponentų šeimą: