Íhlutir

Grunnflokkar

Íhlutir Bootstrap eru að mestu byggðir með grunnbreytingarheiti. Við flokkum eins marga sameiginlega eiginleika og mögulegt er í grunnflokk, eins og .btn, og flokkum síðan einstaka stíla fyrir hvert afbrigði í breytingaflokka, eins og .btn-primaryeða .btn-success.

Til að byggja upp breytiklasa okkar notum við @eachlykkjur Sass til að endurtaka yfir Sass kort. Þetta er sérstaklega gagnlegt til að búa til afbrigði af íhlut hjá okkur $theme-colorsog búa til móttækileg afbrigði fyrir hvern brotpunkt. Þegar þú sérsníður þessi Sass kort og endurtekið saman muntu sjálfkrafa sjá breytingarnar þínar endurspeglast í þessum lykkjum.

Skoðaðu Sass kortin og lykkjuskjölin okkar til að sjá hvernig á að sérsníða þessar lykkjur og útvíkka grunnbreytingaraðferð Bootstrap í þinn eigin kóða.

Breytingar

Margir af íhlutum Bootstrap eru smíðaðir með grunnbreytingarflokksaðferð. Þetta þýðir að meginhluti stílsins er innifalinn í grunnflokki (td .btn) á meðan stílafbrigði eru bundin við breytingaflokka (td .btn-danger). Þessir breytingaflokkar eru byggðir út frá $theme-colorskortinu til að sérsníða fjölda og heiti breytingaflokkanna okkar.

Hér eru tvö dæmi um hvernig við lykkjum yfir $theme-colorskortið til að búa til breytingar á .alertog .list-groupíhlutunum.

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

Móttækilegur

Þessar Sass lykkjur takmarkast heldur ekki við litakort. Þú getur líka búið til móttækileg afbrigði af íhlutunum þínum. Tökum til dæmis móttækilega röðun okkar á fellilistanum þar sem við blandum @eachlykkju fyrir $grid-breakpointsSass kortið með miðlunarfyrirspurn.

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

Ef þú breytir $grid-breakpoints, munu breytingarnar þínar gilda um allar lykkjur sem endurtaka sig yfir það kort.

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

Fyrir frekari upplýsingar og dæmi um hvernig á að breyta Sass kortum okkar og breytum, vinsamlegast skoðaðu Sass hlutann í Grid skjölunum .

Að búa til þitt eigið

Við hvetjum þig til að samþykkja þessar leiðbeiningar þegar þú smíðar með Bootstrap til að búa til þína eigin íhluti. Við höfum útvíkkað þessa nálgun sjálf til sérsniðnu íhlutanna í skjölum okkar og dæmum. Íhlutir eins og útskýringar okkar eru smíðaðir alveg eins og íhlutir sem við fáum með grunn- og breytingaflokkum.

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

Í CSS þínum, þú vilt hafa eitthvað eins og eftirfarandi þar sem megnið af stílnum er gert með .callout. Síðan er einstökum stílum á milli hvers afbrigða stjórnað með breytingaflokki.

// Base class
.callout {}

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

Fyrir útkallana er þessi einstaka stíll bara border-left-color. Þegar þú sameinar þennan grunnflokk við einn af þessum breytingaflokkum færðu heildarfjölskyldu íhluta þinna: