Компоненти

Базови класове

Компонентите на Bootstrap са до голяма степен изградени с номенклатура на базовия модификатор. Групираме възможно най-много споделени свойства в основен клас, като .btn, и след това групираме отделни стилове за всеки вариант в модификаторни класове, като .btn-primaryили .btn-success.

За да изградим нашите класове модификатори, ние използваме @eachциклите на Sass за итерация върху Sass карта. Това е особено полезно за генериране на варианти на компонент от нашите $theme-colorsи създаване на адаптивни варианти за всяка точка на прекъсване. Докато персонализирате тези карти на Sass и прекомпилирате, автоматично ще видите промените си, отразени в тези цикли.

Вижте нашите документи за карти и цикли на Sass за това как да персонализирате тези цикли и да разширите базовия модификатор на Bootstrap към вашия собствен код.

Модификатори

Много от компонентите на 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);
}

Отзивчив

Тези Sass цикли също не се ограничават до цветни карти. Можете също така да генерирате адаптивни вариации на вашите компоненти. Вземете например нашето адаптивно подравняване на падащите менюта, където смесваме @eachцикъл за $grid-breakpointsкартата на Sass с включване на медийна заявка.

// 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 на документацията на Grid .

Създаване на собствен

Насърчаваме ви да приемете тези указания, когато изграждате с Bootstrap, за да създавате свои собствени компоненти. Ние сами разширихме този подход към персонализираните компоненти в нашата документация и примери. Компоненти като нашите допълнителни описания са изградени точно като нашите предоставени компоненти с базови и модификаторни класове.

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

Във вашия CSS ще имате нещо като следното, където по-голямата част от стила се извършва чрез .callout. След това уникалните стилове между всеки вариант се контролират чрез клас модификатор.

// Base class
.callout {}

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

За надписите този уникален стил е просто border-left-color. Когато комбинирате този базов клас с един от тези класове модификатори, вие получавате вашето пълно семейство компоненти: