Komponentoj

Bazaj klasoj

La komponentoj de Bootstrap estas plejparte konstruitaj kun baz-modifiga nomenklaturo. Ni grupigas kiel eble plej multajn komunajn ecojn en bazan klason, kiel .btn, kaj tiam grupigas individuajn stilojn por ĉiu varianto en modifklasojn, kiel .btn-primaryaŭ .btn-success.

Por konstrui niajn modifklasojn, ni uzas la @eachbuklojn de Sass por ripeti sur Sass-mapo. Ĉi tio estas precipe utila por generi variantojn de komponanto per nia $theme-colorskaj krei respondemajn variantojn por ĉiu rompopunkto. Dum vi agordas ĉi tiujn Sass-mapojn kaj rekompilas, vi aŭtomate vidos viajn ŝanĝojn reflektitajn en ĉi tiuj bukloj.

Rigardu niajn dokumentojn pri mapoj kaj bukloj de Sass por kiel agordi ĉi tiujn buklojn kaj etendi la bazmodifan aliron de Bootstrap al via propra kodo.

Modifiloj

Multaj el la komponentoj de Bootstrap estas konstruitaj kun baz-modifila klasaliro. Ĉi tio signifas, ke la plejparto de la stilado estas enhavita al bazklaso (ekz, .btn) dum stilvarioj estas limigitaj al modifklasoj (ekz, .btn-danger). Ĉi tiuj modifklasoj estas konstruitaj el la $theme-colorsmapo por agordi la nombron kaj nomon de niaj modifilaj klasoj.

Jen du ekzemploj de kiel ni cirklas super la $theme-colorsmapo por generi modifilojn al la .alertkaj .list-groupkomponantoj.

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

Respondema

Ĉi tiuj Sass-bukloj ankaŭ ne estas limigitaj al kolormapoj. Vi ankaŭ povas generi respondemajn variadojn de viaj komponantoj. Prenu ekzemple nian respondeman vicigon de la falmenuoj, kie ni miksas @eachbuklon por la $grid-breakpointsSass-mapo kun amaskomunikila demando inkluzivas.

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

Se vi modifos vian $grid-breakpoints, viaj ŝanĝoj aplikiĝos al ĉiuj bukloj ripetantaj sur tiu mapo.

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

Por pliaj informoj kaj ekzemploj pri kiel modifi niajn Sass-mapojn kaj variablojn, bonvolu raporti al la sekcio Sass de la Grid-dokumentado .

Kreante vian propran

Ni instigas vin adopti ĉi tiujn gvidliniojn dum konstruado kun Bootstrap por krei viajn proprajn komponantojn. Ni mem etendis ĉi tiun aliron al la kutimaj komponantoj en nia dokumentaro kaj ekzemploj. Komponantoj kiel niaj vokoj estas konstruitaj same kiel niaj provizitaj komponantoj kun bazaj kaj modifklasoj.

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

En via CSS, vi havus ion kiel la jenan, kie la plejparto de la stilado estas farita per .callout. Tiam, la unikaj stiloj inter ĉiu varianto estas kontrolitaj per modifiklaso.

// Base class
.callout {}

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

Por la vokoj, tiu unika stilo estas nur border-left-color. Kiam vi kombinas tiun bazan klason kun unu el tiuj modifklasoj, vi ricevas vian kompletan komponan familion: