Komponentler

Esasy synplar

“Bootstrap” -yň bölekleri esasan üýtgediji nomenklatura bilen gurlupdyr. Mümkin boldugyça köp paýlaşylýan häsiýetleri esasy klasa bölýäris, şonuň ýaly .btn, her wariant üçin aýratyn stilleri üýtgediji synplara, .btn-primaryýa-da .btn-success.

Üýtgediji synplarymyzy gurmak üçin @each, Sass kartasynyň üstünde gaýtalamak üçin Sassyň aýlawlaryny ulanýarys. Bu, esasanam, bir komponentiň $theme-colorswariantlaryny döretmek we her bölek üçin täsirli wariantlary döretmek üçin peýdalydyr. Bu Sass kartalaryny özleşdirip, täzeden düzeniňizde, üýtgeşmeleriňiziň bu aýlawlarda görkezilýändigini awtomatiki görersiňiz.

Bu aýlawlary nädip sazlamaly we Bootstrap-yň esasy üýtgediji çemeleşmesini öz koduňyza nädip giňeltmelidigi barada Sass kartalarymyzy we aýlaw resminamalarymyzy gözden geçiriň .

Üýtgeýjiler

“Bootstrap” -yň köp bölegi esasy üýtgediji synp çemeleşmesi bilen gurlupdyr. Diýmek, stiliň esasy bölegi esasy synpda (meselem .btn), stil üýtgeýjileri üýtgediji synplar bilen çäklenýär (meselem .btn-danger). $theme-colorsBu üýtgediji synplar, üýtgediji synplarymyzyň sanyny we adyny sazlamak üçin kartadan gurulýar .

Ine, böleklere we komponentlere $theme-colorsüýtgeýjiler döretmek üçin kartanyň üstünden nädip aýlanýandygymyzyň iki mysaly ..alert.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);
}

Jogapkärçilikli

Bu Sass aýlawlary reňk kartalary bilen çäklenmeýär. Şeýle hem, komponentleriňiziň täsirli üýtgeşmelerini döredip bilersiňiz. @eachMysal üçin , Sass kartasy üçin bir aýlawy $grid-breakpointsmedia talaplary bilen garyşdyrýan ýerlerimiziň seslenmelerini deňleşdiriň .

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

Üýtgetseňiz, üýtgetmeleriňiz $grid-breakpointsşol kartada gaýtalanýan ähli aýlawlara degişlidir.

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

Sass kartalarymyzy we üýtgeýänlerimizi nädip üýtgetmelidigi barada has giňişleýin maglumat we mysallar üçin Grid resminamalarynyň Sass bölümine serediň .

Özüňizi döretmek

Öz komponentleriňizi döretmek üçin Bootstrap bilen gurlanda bu görkezmeleri kabul etmegiňizi maslahat berýäris. Bu çemeleşmäni resminamalarymyzdaky we mysallarymyzdaky adaty komponentlere giňeltdik. Çagyryşlarymyz ýaly komponentler, esasy we üýtgediji synplar bilen üpjün edilen komponentlerimiz ýaly gurulýar.

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

CSS-de, stiliň esasy böleginiň ýerine ýetirilen ýerinde aşakdaky ýaly bir zat bar .callout. Soň bolsa, her wariantyň arasyndaky üýtgeşik stil üýtgediji synp arkaly dolandyrylýar.

// Base class
.callout {}

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

Çagyryşlar üçin bu üýtgeşik stil diňe border-left-color. Şol esasy synpy şol üýtgediji synplaryň biri bilen birleşdireniňizde, doly komponent maşgalaňyzy alarsyňyz: