Құрамдас бөліктер

Негізгі сыныптар

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. Осы негізгі классты осы модификатор кластарының бірімен біріктіргенде, сіз толық құрамдас топтамаңызды аласыз: