Swiphemu swa kona

Titlilasi ta xisekelo

Swiphemu swa Bootstrap swi akiwile ngopfu hi mavito ya base-modifier. Hi hlengeleta swihlawulekisi swo tala leswi avelaniwa hilaha swi nga kotekaka hakona eka tlilasi ya le hansi, ku fana na .btn, ivi hi hlengeleta switayele swa munhu hi xiyexe swa muxaka wun’wana na wun’wana eka titlilasi ta mucinci, ku fana na .btn-primarykumbe .btn-success.

Ku aka titlilasi ta hina ta vacinci, hi tirhisa @eachswirhendzevutana swa Sass ku phindha-phindha ehenhla ka mepe wa Sass. Leswi swi pfuna ngopfu eka ku tumbuluxa swihlawulekisi swa xiphemu hi hina $theme-colorsna ku tumbuluxa swihlawulekisi leswi hlamulaka eka breakpoint yin’wana na yin’wana. Loko u ri karhi u lulamisa mimepe leyi ya Sass ni ku hlengeleta nakambe, u ta vona hi ku tisungulela ku cinca ka wena ku kombisiwa eka swirhendzevutana leswi.

Languta mimepe ya hina ya Sass na tidoki ta swirhendzevutani ku kuma ndlela yo lulamisa swirhendzevutani leswi na ku andlala ndlela ya Bootstrap ya base-modifier eka khodi ya wena.

Swilo leswi cinca-cincaka

Swiphemu swo tala swa Bootstrap swi akiwile hi endlelo ra tlilasi ya base-modifier. Leswi swi vula leswaku xiphemu lexikulu xa xitayili xi khomiwile eka tlilasi ya le hansi (xikombiso, .btn) kasi ku hambana ka xitayili ku pfaleriwile eka titlilasi ta vacinci (xikombiso, .btn-danger). Titlilasi leti ta vacinci ti akiwile ku suka eka $theme-colorsmepe ku endla ku customizing nomboro na vito ra titlilasi ta hina ta vacinci.

Hi leswi swikombiso swimbirhi swa ndlela leyi hi rhendzelekaka ehenhla ka $theme-colorsmepe ku humesa swihundzuluxi eka swiphemu swa .alertna .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);
}

Ku hlamula

Ti loop leti ta Sass a ti pimiwi eka mimepe ya mihlovo ntsena, na tona. U nga ha tlhela u humesa ku hambana loku hlamulaka ka swiphemu swa wena. Teka xikombiso ku ringanisa ka hina loku hlamulaka ka swilo leswi nga ehansi laha hi hlanganisaka @eachxirhendzevutana xa $grid-breakpointsmepe wa Sass na xivutiso xa midiya lexi katsaka.

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

Loko u fanele ku cinca $grid-breakpoints, ku cinca ka wena ku ta tirha eka swirhendzevutana hinkwaswo leswi vuyeleriwaka ehenhla ka mepe wolowo.

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

Ku kuma vuxokoxoko byo tala na swikombiso swa ndlela yo cinca mimepe ya hina ya Sass na swilo leswi cinca-cincaka, hi kombela u languta eka xiyenge xa ​​Sass xa matsalwa ya Gridi .

Ku tumbuluxa swa wena

Hi ku khutaza ku amukela swiletelo leswi loko u aka hi Bootstrap ku tiendlela swiphemu swa wena. Hi ndlandlamuxe endlelo leri hi hexe eka swiphemu swa ntolovelo eka matsalwa ya hina na swikombiso. Swiphemu swo fana na ti callouts ta hina swi akiwile ku fana na swiphemu swa hina leswi hi nyikiweke swona leswi nga na titlilasi ta base na modifier.

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

Eka CSS ya wena, u ta va na nchumu wo fana na lowu landzelaka laha xiphemu lexikulu xa xitayili xi endliwaka hi ku tirhisa .callout. Kutani, switayele swo hlawuleka exikarhi ka muxaka wun’wana ni wun’wana swi lawuriwa hi ku tirhisa tlilasi ya mucinci.

// Base class
.callout {}

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

Eka swikombelo, xitayili xexo xo hlawuleka i border-left-color. Loko u hlanganisa tlilasi yoleyo ya le hansi na yin’wana ya titlilasi toleto ta mucinci, u kuma ndyangu wa wena lowu heleleke wa swiphemu: