Zvikamu

Makirasi ekutanga

Zvikamu zveBootstrap zvakavakwa zvakanyanya ne base-modifier nomenclature. Isu tinounganidza zvivakwa zvakawanda zvakagovaniswa sezvinobvira mukirasi yepasi, senge .btn, tobva taronga masitaera ega ega ega ega mumakirasi ekugadzirisa, senge .btn-primarykana .btn-success.

Kuvaka makirasi edu ekugadzirisa, tinoshandisa @eachzvishwe zveSass kudzokorora mepu yeSass. Izvi zvinonyanya kubatsira pakugadzira mutsauko wechikamu neyedu $theme-colorsuye kugadzira anopindura akasiyana ega ega breakpoint. Sezvo iwe uchigadzirisa aya mamepu eSass uye kudzoreredza, iwe unozoona otomatiki shanduko dzako dzichiratidzwa mune izvi zvishwe.

Tarisa yedu Sass mepu uye zvishwe zvinyorwa zvemaitiro ekugadzirisa zvishwe izvi uye kuwedzera Bootstrap's base-modifier maitiro kune yako kodhi.

Modifiers

Zvizhinji zvezvinhu zveBootstrap zvakavakwa ne base-modifier kirasi maitiro. Izvi zvinoreva kuti huwandu hwemataera huri mukirasi yepasi (semuenzaniso, .btn) nepo masitaera akasiyana achingogumira kumakirasi ekugadzirisa (semuenzaniso, .btn-danger). Aya makirasi ekugadzirisa akavakwa kubva $theme-colorspamepu kuti agadzirise nhamba uye zita remakirasi edu ekugadzirisa.

Heino mienzaniso miviri yemabatiro atinoita pamusoro $theme-colorspemepu kuti tigadzire ma modifiers kune .alertuye .list-groupzvikamu.

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

Anoteerera

Aya maSass loops haana kugumira kumamepu emavara, kana. Iwe unogona zvakare kugadzira inopindura misiyano yezvikamu zvako. Tora semuenzaniso kurongeka kwedu kwekudonhedza kwatinosanganisa @eachloop $grid-breakpointsyemepu yeSass nemubvunzo wenhau unosanganisira.

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

Kana iwe ukagadzirisa yako $grid-breakpoints, shanduko dzako dzinoshanda kune ese zvishwe zvinodzokorora pamusoro pemepu iyoyo.

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

Kuti uwane rumwe ruzivo nemienzaniso yekugadzirisa mamepu edu eSass uye zvinosiyana, ndapota tarisa kune chikamu cheSass cheGridhi zvinyorwa .

Kugadzira yako

Isu tinokukurudzira kuti utore nhungamiro idzi paunenge uchivaka neBootstrap kuti ugadzire yako wega zvikamu. Isu takawedzera nzira iyi isu pachedu kune zvakajairwa zvikamu muzvinyorwa zvedu nemienzaniso. Zvikamu zvakaita semacallout edu akavakwa senge edu akapihwa zvinhu zvine base uye modifier makirasi.

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

MuCSS yako, iwe unenge uine chimwe chinhu senge chinotevera uko kuwanda kwemaitiro kunoitwa kuburikidza .callout. Zvadaro, masitaera akasarudzika pakati pekusiyana kwega kwega anodzorwa kuburikidza nemodifier kirasi.

// Base class
.callout {}

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

Kune ma callouts, iyo yakasarudzika styling ingori border-left-color. Paunosanganisa iyo base kirasi neimwe yeaya ekugadzirisa makirasi, iwe unowana yako yakazara chikamu mhuri: