Sastāvdaļas

Bāzes klases

Bootstrap komponenti lielākoties ir veidoti, izmantojot bāzes modifikatoru nomenklatūru. Mēs sagrupējam pēc iespējas vairāk koplietoto rekvizītu bāzes klasē, piemēram .btn, un pēc tam grupējam katra varianta atsevišķus stilus modifikatoru klasēs, piemēram, .btn-primaryvai .btn-success.

Lai izveidotu modifikatoru klases, mēs izmantojam Sass @eachcilpas, lai atkārtotu Sass karti. Tas ir īpaši noderīgi, lai mūsu ģenerētu komponenta $theme-colorsvariantus un izveidotu adaptīvus variantus katram pārtraukuma punktam. Pielāgojot šīs Sass kartes un atkārtoti kompilējot, jūsu izmaiņas tiks automātiski atspoguļotas šajās cilpās.

Apskatiet mūsu Sass karšu un cilpu dokumentus , lai uzzinātu, kā pielāgot šīs cilpas un paplašināt Bootstrap bāzes modifikatora pieeju savam kodam.

Modifikatori

Daudzi Bootstrap komponenti ir veidoti, izmantojot bāzes modifikatoru klases pieeju. Tas nozīmē, ka lielākā daļa stila ir ietverta pamatklasē (piemēram, .btn), savukārt stila variācijas ir ierobežotas ar modifikatoru klasēm (piemēram, .btn-danger). Šīs modifikatoru klases ir veidotas no $theme-colorskartes, lai pielāgotu mūsu modifikatoru klašu skaitu un nosaukumu.

Šeit ir divi piemēri, kā mēs cilājam $theme-colorskarti, lai ģenerētu .alertun .list-groupkomponentu modifikatorus.

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

Atsaucīgs

Šīs Sass cilpas neaprobežojas tikai ar krāsu kartēm. Varat arī ģenerēt savu komponentu adaptīvas variācijas. Ņemiet, piemēram, mūsu adaptīvo nolaižamo izvēlņu izlīdzināšanu, kurā mēs sajaucam Sass kartes @eachcilpu $grid-breakpointsar multivides vaicājumu.

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

Ja modificēsiet savu $grid-breakpoints, izmaiņas attieksies uz visām cilpām, kas atkārtojas šajā kartē.

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

Lai iegūtu papildinformāciju un piemērus par to, kā modificēt mūsu Sass kartes un mainīgos, lūdzu, skatiet Grid dokumentācijas Sass sadaļu .

Izveidojot savu

Mēs iesakām ievērot šīs vadlīnijas, veidojot ar Bootstrap, lai izveidotu savus komponentus. Mēs esam paplašinājuši šo pieeju, iekļaujot pielāgotos komponentus mūsu dokumentācijā un piemēros. Tādi komponenti kā mūsu norādes ir veidoti tāpat kā mūsu nodrošinātie komponenti ar bāzes un modifikatoru klasēm.

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

Jūsu CSS jums būtu kaut kas līdzīgs šim, kur lielākā daļa stila tiek veikta, izmantojot .callout. Pēc tam unikālie stili starp katru variantu tiek kontrolēti, izmantojot modifikatoru klasi.

// Base class
.callout {}

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

Norāžu gadījumā šis unikālais stils ir tikai border-left-color. Apvienojot šo bāzes klasi ar kādu no šīm modifikatoru klasēm, jūs iegūstat visu komponentu saimi: