компоненти

Базові класи

Компоненти 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. Коли ви поєднуєте цей базовий клас з одним із цих класів-модифікаторів, ви отримуєте повне сімейство компонентів: