Eleman

Klas debaz yo

Konpozan Bootstrap yo lajman bati ak yon nomanklatur baz-modifikatè. Nou gwoupe kòm anpil pwopriyete pataje ke posib nan yon klas de baz, tankou .btn, ak Lè sa a, gwoup estil endividyèl pou chak variant nan klas modifye, tankou .btn-primaryoswa .btn-success.

Pou konstwi klas modifikatè nou yo, nou itilize bouk Sass @eachpou iterasyon sou yon kat Sass. Sa a itil espesyalman pou jenere variantes nan yon eleman pa nou yo $theme-colorsak kreye varyant reponn pou chak breakpoint. Pandan w ap pèrsonalize kat Sass sa yo epi w ap rekonpile, w ap otomatikman wè chanjman w yo reflete nan bouk sa yo.

Tcheke kat Sass nou yo ak dokiman bouk nou yo pou konnen kijan pou personnaliser bouk sa yo epi pwolonje apwòch modifikatè baz Bootstrap pou pwòp kòd ou a.

Modifikatè

Anpil nan eleman Bootstrap yo bati ak yon apwòch klas baz modifikatè. Sa vle di ke gwo stil la genyen nan yon klas de baz (eg, .btn) pandan ke varyasyon style yo limite nan klas modifye (eg, .btn-danger). Klas modifikatè sa yo bati nan $theme-colorskat jeyografik la pou fè pèsonalizasyon nimewo ak non klas modifikatè nou yo.

Isit la yo se de egzanp sou fason nou bouk sou $theme-colorskat jeyografik la jenere modifikatè a .alertak .list-groupeleman yo.

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

Reponn

Sa yo bouk Sass yo pa limite a kat koulè, swa. Ou kapab tou jenere varyasyon reponn nan eleman ou yo. Pran pou egzanp aliyman reponn nan dropdowns yo kote nou melanje yon @eachbouk pou $grid-breakpointskat jeyografik la Sass ak yon rechèch medya enkli.

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

Si ou ta dwe modifye $grid-breakpoints, chanjman ou yo pral aplike nan tout bouk yo ap repete sou kat sa a.

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

Pou plis enfòmasyon ak egzanp sou fason pou modifye kat ak varyab Sass nou yo, tanpri al gade nan seksyon Sass nan dokiman Grid la .

Kreye pwòp ou a

Nou ankouraje w pou adopte direktiv sa yo lè w ap bati ak Bootstrap pou kreye pwòp konpozan w. Nou te pwolonje apwòch sa a tèt nou nan eleman yo koutim nan dokiman nou yo ak egzanp. Konpozan tankou rele nou yo bati menm jan ak konpozan nou bay yo ak klas baz ak modifikatè.

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

Nan CSS ou a, ou ta gen yon bagay tankou sa ki annapre yo kote yo fè èstime nan manier la atravè .callout. Lè sa a, estil inik ant chak varyant kontwole atravè klas modifye.

// Base class
.callout {}

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

Pou apèl yo, manier inik sa a se jis yon border-left-color. Lè ou konbine klas debaz sa a ak youn nan klas modifye sa yo, ou jwenn fanmi eleman konplè ou: