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>

CSS:ssäsi olisi jotain seuraavan kaltaista, jossa suurin osa muotoilusta tehdään .callout. Sitten kunkin muunnelman välisiä ainutlaatuisia tyylejä ohjataan muokkausluokan kautta.

// Base class
.callout {}

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

Huomiotekstien kohdalla tämä ainutlaatuinen tyyli on vain border-left-color. Kun yhdistät kyseisen perusluokan johonkin näistä modifikaatioluokista, saat täydellisen komponenttiperheen: