Izingxenye

Amakilasi ayisisekelo

Izingxenye ze-Bootstrap zakhiwe kakhulu nge-base-modifier nomenclature. Sihlanganisa izakhiwo eziningi ezabelwe ngangokunokwenzeka zibe ikilasi lesisekelo, njengokuthi .btn, bese sihlanganisa izitayela ngazinye ngokuhlukile ngakunye zibe amakilasi okulungisa, njengokuthi .btn-primarynoma .btn-success.

Ukuze sakhe amakilasi ethu okulungisa, sisebenzisa @eachamaluphu akwa-Sass ukuze siphindaphinde kumephu ye-Sass. Lokhu kusiza kakhulu ekukhiqizeni okuhlukile kwengxenye yethu $theme-colorsnokudala okuhlukile okusabelayo kwephuzu ngalinye lokuhlukana. Njengoba wenza ngendlela oyifisayo lawa mamephu we-Sass futhi uhlanganisa futhi, uzobona ngokuzenzakalela izinguquko zakho ziboniswa kulawa maluphu.

Bheka amamephu wethu we-Sass kanye nama-loops amadokhumenti ukuze wenze ngendlela oyifisayo lawa maluphu futhi wandise indlela ye-Bootstrap yokuguqula isisekelo ibe yikhodi yakho.

Izilungisi

Izingxenye eziningi ze-Bootstrap zakhiwe ngendlela yekilasi le-base-modifier. Lokhu kusho ukuthi inqwaba yesitayela iqukethwe kusigaba sesisekelo (isb, .btn) kuyilapho ukuhluka kwesitayela kuphelele kumakilasi okulungisa (isb, .btn-danger). Lezi zigaba zokuguqula zakhiwe kusukela $theme-colorskumephu ukuze kwenziwe ngendlela oyifisayo inombolo negama lamakilasi ethu okulungisa.

Nazi izibonelo ezimbili zokuthi singena kanjani phezu $theme-colorskwemephu ukuze sikhiqize izilungisi ku- .alertand .list-groupcomponents.

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

Iyasabela

Lawa ma-loops akwa-Sass awakhawulelwe kumamephu anemibala, nawo. Ungakwazi futhi ukukhiqiza ukuhlukahluka okusabelayo kwezingxenye zakho. Thatha njengesibonelo ukuqondanisa kwethu okuphendulayo kokwehliswayo lapho sixuba @eachiluphu $grid-breakpointsyemephu ye-Sass kanye nombuzo wemidiya ohlanganisa.

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

Uma ushintsha eyakho $grid-breakpoints, izinguquko zakho zizosebenza kuwo wonke ama-loops aphindaphindayo kuleyo mephu.

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

Ukuze uthole ulwazi olwengeziwe nezibonelo zokuthi ungawashintsha kanjani amamephu wethu we-Sass nokuguquguqukayo, sicela ubheke ingxenye ye-Sass yemibhalo Yegridi .

Ukwakha eyakho

Sikukhuthaza ukuthi usebenzise le mihlahlandlela uma wakha nge-Bootstrap ukuze udale ezakho izingxenye. Sizinwebele ngokwethu le ndlela ezingxenyeni ezingokwezifiso ekubhalweni kwethu nezibonelo. Izingxenye ezinjengama-callouts ethu zakhiwe njengezingxenye zethu ezinikeziwe ezinamakilasi esisekelo nesiguquli.

<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: