Компонентлар

Төп класслар

Bootstrap компонентлары күбесенчә баз-модификатор номенклатурасы белән төзелгән. Без мөмкин кадәр күбрәк уртак характеристиканы төп класска бүлеп куябыз , һәм .btnаннан соң һәр вариант өчен индивидуаль стильләрне модификатор классларына бүлеп куябыз ..btn-primary.btn-success

Модификатор классларыбызны төзү өчен, без @eachSass карталарын кабатлау өчен Sass әйләнәләрен кулланабыз. Бу аеруча компонентның $theme-colorsвариантларын булдыру һәм һәр өзек өчен җаваплы вариантлар булдыру өчен бик файдалы. Бу Sass карталарын көйләгәндә һәм компиляцияләгәндә, сез бу үзгәрешләрдә чагылган үзгәрешләрне автоматик рәвештә күрерсез.

Бу циклларны ничек көйләргә һәм Bootstrap-ның модификатор ысулын үз кодыгызга киңәйтергә безнең Sass карталарын һәм цикл документларын карагыз .

Modзгәртүчеләр

Bootstrap компонентларының күбесе база-модификатор класс алымы белән төзелгән. Димәк, стилизациянең төп өлеше төп класска (мәсәлән, .btn) керә, стиль вариацияләре модификатор класслары белән чикләнә (мәсәлән, .btn-danger). $theme-colorsБу модификатор класслары безнең модификатор классларның санын һәм исемен көйләү өчен картадан төзелгән .

Менә ике мисал, без компонентларга үзгәртүләр ясау өчен картадан ничек әйләнеп кайтуыбыз $theme-colors..alert.list-group

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

Onsаваплы

Бу Sass цикллары төс карталары белән генә чикләнми. Сез шулай ук ​​үз компонентларыгызның җаваплы вариацияләрен ясый аласыз. Мисал өчен, тамчыларның җаваплы тигезләнешен алыгыз, анда без Sass картасы өчен @eachциклны $grid-breakpointsмедиа соравы белән кушабыз.

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

Әгәр дә сез үзгәртсәгез $grid-breakpoints, сезнең үзгәртүләр шул картада кабатланган барлык циклларга кагылачак.

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

Безнең Sass карталарын һәм үзгәрүчәннәрне ничек үзгәртү турында күбрәк мәгълүмат һәм мисаллар өчен , Челтәр документларының Sass бүлегенә мөрәҗәгать итегез .

Yourзегезнекен булдыру

Сезнең компонентларыгызны булдыру өчен Bootstrap белән төзегәндә бу күрсәтмәләрне кулланырга тәкъдим итәбез. Бу ысулны без үзебезнең документларда һәм мисалларда махсус компонентларга киңәйттек. Безнең шалтыратулар кебек компонентлар база һәм модификатор класслары белән тәэмин ителгән компонентлар кебек төзелгән.

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

Сезнең CSSда сездә түбәндәге кебек әйберләр булыр иде, анда стилизациянең төп өлеше эшләнгән .callout. Аннары, һәр вариант арасындагы уникаль стильләр үзгәртүче класс аша контрольдә тотыла.

// Base class
.callout {}

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

Чакырулар өчен бу уникаль стиллау а border-left-color. Бу төп классны шул үзгәртүче классларның берсе белән берләштергәндә, сез тулы компонентлы гаилә аласыз: