Komponendid

Baasklassid

Bootstrapi komponendid on suures osas ehitatud baasmodifikaatori nomenklatuuriga. Grupeerime võimalikult palju jagatud omadusi põhiklassidesse (nt .btn) ja seejärel rühmitame iga variandi individuaalsed stiilid modifikaatoriklassidesse, nagu .btn-primaryvõi .btn-success.

Oma modifikaatoriklasside koostamiseks kasutame @eachSassi kaartide itereerimiseks Sassi silmuseid. See on eriti kasulik meie poolt komponendi variantide genereerimiseks $theme-colorsja iga katkestuspunkti jaoks tundlike variantide loomiseks. Kui kohandate neid Sassi kaarte ja kompileerite uuesti, näete nendes tsüklites automaatselt oma muudatusi.

Vaadake meie Sassi kaartide ja silmuste dokumente , et neid silmuseid kohandada ja Bootstrapi baasmodifikaatori lähenemisviisi oma koodile laiendada.

Modifikaatorid

Paljud Bootstrapi komponendid on ehitatud baasmodifikaatori klassi lähenemisviisiga. See tähendab, et suurem osa stiilist sisaldub põhiklassis (nt .btn), samas kui stiilivariatsioonid on piiratud modifikaatoriklassidega (nt .btn-danger). Need modifikaatoriklassid on koostatud $theme-colorskaardist, et saaksime kohandada meie modifikaatoriklasside arvu ja nimesid.

Siin on kaks näidet selle kohta, kuidas me teeme $theme-colorskaardi .alertja .list-groupkomponentide modifikaatorite genereerimiseks.

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

Vastutulelik

Need Sassi silmused ei piirdu ka värvikaartidega. Samuti saate luua oma komponentidest reageerivaid variatsioone. Võtke näiteks meie reageeriv rippmenüüde joondamine, kus segame Sassi kaardi @eachsilmuse $grid-breakpointsmeediumipäringuga.

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

Kui muudate oma $grid-breakpoints, rakenduvad teie muudatused kõikidele sellel kaardil korduvatele silmustele.

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

Lisateavet ja näiteid meie Sassi kaartide ja muutujate muutmise kohta leiate Gridi dokumentatsiooni Sassi jaotisest .

Oma loomine

Soovitame teil oma komponentide loomiseks Bootstrapiga ehitamisel neid juhiseid järgida. Oleme seda lähenemist laiendanud ka kohandatud komponentidele meie dokumentatsioonis ja näidetes. Sellised komponendid nagu meie tähelepanulaiendid on ehitatud täpselt nagu meie pakutavad komponendid koos põhi- ja modifikaatoriklassidega.

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

Teie CSS-is oleks midagi sellist, kus suurem osa stiili kujundamisest tehakse .callout. Seejärel juhitakse iga variandi vahelisi unikaalseid stiile modifikaatoriklassi kaudu.

// Base class
.callout {}

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

Viiktekstide jaoks on see ainulaadne stiil lihtsalt border-left-color. Kui ühendate selle põhiklassi ühega neist modifikaatoriklassidest, saate oma täieliku komponendiperekonna: