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

Базалык класстар

Bootstrap'тин компоненттери негизинен базалык-модификатор номенклатурасы менен курулган. Мүмкүн болушунча көп жалпы касиеттерди негизги класска топтойбуз, мисалы , жана андан кийин ар бир вариант үчүн жеке стилдерди же .btnсыяктуу модификациялоочу класстарга топтойбуз ..btn-primary.btn-success

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

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

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

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 илмектери түстүү карталар менен эле чектелбейт. Сиз ошондой эле компоненттериңиздин жооп берүүчү вариацияларын түзө аласыз. Мисалы, биздин ачылуучу тизмелердин жооп берүүчү тегиздөөсүн алалы, анда биз 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 карталарыбызды жана өзгөрмөлөрүбүздү кантип өзгөртүү боюнча көбүрөөк маалымат жана мисалдар үчүн Grid документтеринин Sass бөлүмүнө кайрылыңыз .

Өзүңүздүн түзүү

Өзүңүздүн компоненттериңизди түзүү үчүн Bootstrap менен курууда ушул көрсөтмөлөрдү кабыл алууга чакырабыз. Биз бул ыкманы өзүбүздүн документтерибиздеги жана мисалдарыбыздагы ыңгайлаштырылган компоненттерге чейин кеңейттик. Биздин билдирүүлөр сыяктуу компоненттер базалык жана модификатор класстары менен камсыздалган компоненттерибиз сыяктуу курулган.

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

Сиздин CSS'иңизде төмөнкүдөй нерсе болмок, мында стилдөөнүн негизги бөлүгү .callout. Андан кийин, ар бир варианттын ортосундагы уникалдуу стилдер өзгөрткүч классы аркылуу башкарылат.

// Base class
.callout {}

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

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