Komponentit

Perusluokat

Bootstrapin komponentit on suurelta osin rakennettu kantamuunnosnimikkeistöllä. Ryhmittelemme mahdollisimman monta jaettua ominaisuutta .btnperusluokkaan, kuten , ja ryhmittelemme sitten kunkin muunnelman yksittäiset tyylit muokkausluokkiin, kuten .btn-primarytai .btn-success.

Muokkausluokkien rakentamiseksi käytämme Sassin @eachsilmukoita iteroimaan Sass-kartan yli. Tämä on erityisen hyödyllistä luotaessamme komponentin $theme-colorsmuunnelmia ja luotaessa responsiivisia muunnelmia kullekin keskeytyspisteelle. Kun mukautat näitä Sass-karttoja ja käännät uudelleen, näet automaattisesti tekemäsi muutokset näissä silmukoissa.

Tutustu Sass-karttoihin ja -silmukoita koskeviin asiakirjoihin , kuinka voit mukauttaa näitä silmukoita ja laajentaa Bootstrapin perusmuokkaustapaa omaan koodiisi.

Muokkaimet

Monet Bootstrapin komponenteista on rakennettu perusmodifier-luokan lähestymistavalla. Tämä tarkoittaa, että suurin osa tyylistä sisältyy .btnperusluokkaan (esim. ), kun taas tyylimuunnelmat rajoittuvat muokkausluokkiin (esim. .btn-danger). Nämä muokkausluokat on rakennettu $theme-colorskartasta muokkausluokkien lukumäärän ja nimen mukauttamiseksi.

Tässä on kaksi esimerkkiä siitä, kuinka teemme silmukan $theme-colorskartan yli luodaksemme modifikaatioita .alertja .list-groupkomponenteille.

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

Responsiivinen

Nämä Sass-silmukat eivät myöskään rajoitu värikarttoihin. Voit myös luoda komponenteistasi reagoivia muunnelmia. Otetaan esimerkiksi responsiivinen kohdistamisemme pudotusvalikoista, joissa sekoitamme Sass-kartan @eachsilmukan $grid-breakpointsmediakyselyyn.

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

Jos muokkaat $grid-breakpoints, tekemäsi muutokset koskevat kaikkia silmukoita, jotka iteroidaan kyseisen kartan yli.

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

Lisätietoja ja esimerkkejä Sass-karttojen ja -muuttujien muokkaamisesta on Grid-dokumentaation Sass-osiossa .

Oman luominen

Kehotamme sinua noudattamaan näitä ohjeita, kun rakennat Bootstrapin avulla luodaksesi omia komponenttejasi. Olemme laajentaneet tätä lähestymistapaa mukautettuihin komponentteihin dokumentaatiossamme ja esimerkeissämme. Komponentit, kuten huomiotekstimme, on rakennettu samalla tavalla kuin tarjoamamme komponentit perus- ja muokkausluokilla.

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

In your CSS, you’d have something like the following where the bulk of the styling is done via .callout. Then, the unique styles between each variant is controlled via modifier class.

// Base class
.callout {}

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

For the callouts, that unique styling is just a border-left-color. When you combine that base class with one of those modifier classes, you get your complete component family: