Dagiti paset

Base dagiti klase

Dagiti paset ti Bootstrap ket kaaduan a naibangon nga addaan iti batayan-a-mangbalbaliw a nomenklatura. Agrupokami kadagiti adu a naibingbingay a tagikua aginggana a mabalin iti maysa a batayan a klase, a kas ti .btn, ken kalpasanna ket agrupokami kadagiti indibidual nga estilo para iti tunggal maysa a variante kadagiti klase ti mangbalbaliw, kas ti .btn-primarywenno .btn-success.

Tapno mangbangon kadagiti klasemi ti modifier, usarenmi dagiti @eachloop ti Sass tapno maulit-ulit iti rabaw ti mapa ti Sass. Daytoy ket nangruna a makatulong para iti panagpataud kadagiti variante ti maysa a paset babaen ti mi $theme-colorsken panagpartuat kadagiti makasungbat a variante para iti tunggal maysa a breakpoint. Bayat ti panangipasayaatmo kadagitoy a mapa ti Sass ken panagtipon manen, automatiko a makitam dagiti panagbalbaliwmo a maiparangarang kadagitoy a loop.

Kitaen dagiti Sass maps ken loops docs mi para iti no kasano nga i-customize dagitoy a loops ken palawaen ti base-modifier approach ti Bootstrap iti bukodmo a code.

Dagiti Mangbalbaliw

Adu kadagiti paset ti Bootstrap ket naibangon babaen ti base-modifier class approach. Kayatna a sawen a ti kaaduan ti estilo ket naglaon iti maysa a batayan a klase (kas pagarigan, .btn) bayat a dagiti panagduduma ti estilo ket naikeddeng kadagiti klase ti mangbalbaliw (kas pagarigan, .btn-danger). Dagitoy a klase ti mangbalbaliw ket naibangon manipud iti $theme-colorsmapa tapno mangaramid ti panagpasayaat ti numero ken nagan dagiti klase ti mangbalbaliwtayo.

Adtoy ti dua a pagarigan no kasano ti panag-loop-tayo iti rabaw ti $theme-colorsmapa tapno mangpataud kadagiti mangbalbaliw kadagiti .alertken dagiti .list-grouppaset.

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

Nasungbatan

Dagitoy a Sass loop ket saan a limitado kadagiti mapa ti kolor, met. Mabalinmo pay ti mangpataud kadagiti makasungbat a panagduduma dagiti pasetmo. Alaen a pagarigan ti responsive alignment tayo kadagiti dropdowns a sadiay paglaokentayo ti maysa a @eachloop para iti $grid-breakpointsmapa ti Sass nga addaan iti media query include.

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

No rumbeng a baliwam ti $grid-breakpoints, dagiti panagbalbaliwmo ket agaplikar kadagiti amin a loop nga agsublisubli iti rabaw dayta a mapa.

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

Para iti ad-adu nga impormasion ken dagiti pagarigan no kasano a baliwan dagiti mapa ken variablemi ti Sass, pangngaasi a kitaen ti benneg ti Sass ti dokumentasion ti Grid .

Panagparnuay iti bukodmo

Paregtaenmikayo nga anamongan dagitoy a pagannurotan no mangbangon babaen ti Bootstrap tapno makaaramidka kadagiti bukodmo a paset. Inpalawami a mismo daytoy a pamay-an kadagiti kostumbre a paset iti dokumentasion ken pagariganmi. Dagiti paset a kas dagiti callout-tayo ket naibangon a kas met laeng kadagiti naited a pasettayo nga addaan kadagiti klase ti base ken modifier.

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

Iti CSS-mo, addaanka koma iti kas iti sumaganad a sadiay ti kaaduan nga estilo ket maaramid babaen ti .callout. Kalpasanna, dagiti naisangayan nga estilo iti nagbaetan ti tunggal maysa a variante ket makontrol babaen ti klase ti modifier.

// Base class
.callout {}

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

Para kadagiti callout, dayta naisangsangayan nga estilo ket maysa laeng a border-left-color. No pagtitiponem dayta a batayan a klase iti maysa kadagita a klase ti mangbalbaliw, makagun-odka iti kompleto a pamilia ti pasetmo: