Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
Check
in English

Komponendid

Siit saate teada, kuidas ja miks me ehitame peaaegu kõiki oma komponente reageerivalt ning baas- ja modifikaatoriklassidega.

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.

See on tähelepanulaiend. Ehitasime selle oma dokumentide jaoks kohandatud, et teie sõnumid paistaksid silma. Sellel on modifikaatoriklasside kaudu kolm varianti.
<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:

See on teabe viiktekst. Näidistekst selle näitamiseks tegevuses.
See on hoiatus. Näidistekst selle näitamiseks tegevuses.
See on ohu viitetekst. Näidistekst selle näitamiseks tegevuses.