Компоненти

Основни класи

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

За да ги изградиме нашите класи на модификатори, ги користиме Sass- @eachовите јамки за повторување преку картата на 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. Кога ќе ја комбинирате таа основна класа со една од тие класи на модификатори, ќе ја добиете вашата целосна фамилија на компоненти: