Ngwa

Isi klas

A na-ewu ihe ndị na-eme bootstrap nke ukwuu site na iji nomenclature megharịa ntọala. Anyị na-achịkọta ọtụtụ ihe onwunwe dị ka o kwere mee ka ọ bụrụ klaasị, dị ka .btn, wee chịkọta ụdịdị onye ọ bụla maka ụdị dị iche iche n'ime klaasị mgbanwe, dị ka .btn-primaryma ọ bụ .btn-success.

Iji wuo klaasị mgbanwe anyị, anyị na-eji @eachloops Sass na-emegharị maapụ Sass. Nke a na-enye aka karịsịa maka ịmepụta ụdị dị iche iche nke akụrụngwa site na anyị $theme-colorsyana ịmepụta ụdị dị iche iche na-anabata maka ebe nkwụsịtụ ọ bụla. Ka ị na-ahazi maapụ Sass ndị a wee na-achịkọta, ị ga-ahụ mgbanwe gị ozugbo na loops ndị a.

Lelee maapụ Sass anyị na docs loops maka otu esi hazie loops ndị a wee gbatịa Bootstrap's base-modifier ụzọ na koodu nke gị.

Ndị na-eme mgbanwe

A na-ewu ọtụtụ ihe ndị Bootstrap site na usoro klaasị-mgbanwe. Nke a pụtara na ọtụtụ styling dị n'ime klaasị (dịka ọmụmaatụ .btn) ebe ụdịdị ndịiche dị na klaasị mgbanwe (dịka ọmụmaatụ, .btn-danger). Ewubere klaasị mgbanwe ndị a site na $theme-colorseserese ngosi iji hazie nọmba na aha klaasị mgbanwe anyị.

Nke a bụ ihe atụ abụọ nke otu anyị si elegharị anya na $theme-colorsmaapụ ahụ iji mepụta ndị na-agbanwe agbanwe na ihe .alertmejupụtara .list-groupya.

// 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);
}

Na-anabata

Loops Sass ndị a ejedebeghị na maapụ agba, ma. Ịnwekwara ike ịmepụta mgbanwe na-anabata nke akụrụngwa gị. Were dịka ọmụmaatụ nzizi nnabata anyị nke ndapụta ebe anyị na-agwakọta @eachloop maka $grid-breakpointsmaapụ Sass yana ajụjụ mgbasa ozi gụnyere.

// 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;
      }
    }
  }
}

Ọ bụrụ na ị megharịa gị $grid-breakpoints, mgbanwe gị ga-emetụta loops niile na-atụgharị n'elu maapụ ahụ.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Maka ozi ndị ọzọ na ihe atụ maka otu esi agbanwe maapụ Sass na mgbanwe, biko rụtụ aka na ngalaba Sass nke akwụkwọ Grid .

Ịmepụta nke gị

Anyị na-agba gị ume ka ị na-agbaso ụkpụrụ nduzi ndị a mgbe ị na-eji Bootstrap eme ihe iji mepụta ihe nke gị. Anyị agbasapụla ụzọ a n'onwe anyị na ngwa ọdịnala dị na akwụkwọ anyị na ọmụmaatụ. A na-ewu ihe ndị dị ka oku oku anyị dị ka akụrụngwa anyị nyere nwere klaasị ntọala na mgbanwe.

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

Na CSS gị, ị ga-enwe ihe dị ka nke a ebe a na-eme ọtụtụ n'ime nhazi ahụ site na .callout. Mgbe ahụ, a na-achịkwa ụdị pụrụ iche n'etiti ụdị ọ bụla site na klaasị modifier.

// Base class
.callout {}

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

Maka ịkpọ oku, ụdị ahụ pụrụ iche bụ naanị border-left-color. Mgbe ị jikọtara klaasị ntọala ahụ na otu n'ime klaasị mgbanwe ndị ahụ, ị ​​ga-enweta ezinaụlọ akụrụngwa gị zuru oke: