קאַמפּאָונאַנץ

באַזע קלאסן

באָאָטסטראַפּ ס קאַמפּאָונאַנץ זענען לאַרגעלי געבויט מיט אַ באַזע-מאָדיפיער נאָמענקלאַטורע. מיר גרופּע ווי פילע שערד פּראָפּערטיעס ווי מעגלעך אין אַ באַזע קלאַס, ווי .btn, און דעמאָלט גרופּע יחיד סטיילז פֿאַר יעדער וואַריאַנט אין מאָדיפיער קלאסן, ווי .btn-primaryאָדער .btn-success.

צו בויען אונדזער מאָדיפיער קלאסן, מיר נוצן Sass ס @eachלופּס צו יטערייט איבער אַ Sass מאַפּע. דאָס איז ספּעציעל נוציק פֿאַר דזשענערייטינג וועריאַנץ פון אַ קאָמפּאָנענט דורך אונדזער $theme-colorsאון קריייטינג אָפּרופיק וועריאַנץ פֿאַר יעדער ברייקפּוינט. ווען איר קאַסטאַמייז די סאַס מאַפּס און ריקאָמפּילע, איר וועט אויטאָמאַטיש זען דיין ענדערונגען שפיגלט אין די לופּס.

קוק אונדזער Sass מאַפּס און לופּס דאָקס פֿאַר ווי צו קאַסטאַמייז די לופּס און פאַרברייטערן די באָאָטסטראַפּ ס באַזע-מאָדיפיער צוגאַנג צו דיין אייגענע קאָד.

מאָדיפיערס

פילע פון ​​באָאָטסטראַפּ ס קאַמפּאָונאַנץ זענען געבויט מיט אַ באַזע-מאָדיפיער קלאַס צוגאַנג. דאָס מיינט אַז דער מערהייט פון די סטילינג איז קאַנטיינד צו אַ באַזע קלאַס (למשל, .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);
}

אָפּרופיק

די סאַס לופּס זענען אויך נישט לימיטעד צו קאָליר מאַפּס. איר קענען אויך דזשענערייט אָפּרופיק ווערייישאַנז פון דיין קאַמפּאָונאַנץ. נעמען פֿאַר בייַשפּיל אונדזער אָפּרופיק אַליינמאַנט פון די דראָפּדאָוונס, ווו מיר מישן אַ @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
);

פֿאַר מער אינפֿאָרמאַציע און ביישפילן אויף ווי צו מאָדיפיצירן אונדזער סאַס מאַפּס און וועריאַבאַלז, ביטע אָפּשיקן צו די סאַסס אָפּטיילונג פון די גריד דאַקיומענטיישאַן .

שאפן דיין אייגענע

מיר מוטיקן איר צו אַדאַפּט די גיידליינז ווען איר בויען מיט Bootstrap צו שאַפֿן דיין אייגענע קאַמפּאָונאַנץ. מיר האָבן עקסטענדעד דעם צוגאַנג זיך צו די מנהג קאַמפּאָונאַנץ אין אונדזער דאַקיומענטיישאַן און ביישפילן. קאַמפּאָונאַנץ ווי אונדזער קאַללאַוץ זענען געבויט פּונקט ווי אונדזער צוגעשטעלט קאַמפּאָונאַנץ מיט באַזע און מאָדיפיער קלאסן.

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

אין דיין CSS, איר'ד האָבן עפּעס ווי די פאלגענדע ווו די פאַרנעם פון די סטילינג איז דורכגעקאָכט דורך .callout. דערנאָך, די יינציק סטיילז צווישן יעדער וואַריאַנט איז קאַנטראָולד דורך מאָדיפיער קלאַס.

// Base class
.callout {}

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

פֿאַר די קאַללאַוץ, די יינציק סטילינג איז נאָר אַ border-left-color. ווען איר פאַרבינדן די באַזע קלאַס מיט איינער פון די מאָדיפיער קלאסן, איר באַקומען דיין גאַנץ קאָמפּאָנענט משפּחה: