Zigawo

Maphunziro oyambira

Zida za Bootstrap zimamangidwa kwambiri ndi dzina losintha-modifier. Timagawa zinthu zambiri zomwe timagawana momwe tingathere m'magulu oyambira, monga .btn, ndiyeno timayika masitayelo amtundu uliwonse kukhala magulu osintha, monga .btn-primarykapena .btn-success.

Kuti tipange makalasi athu osinthira, timagwiritsa ntchito @eachmalupu a Sass kubwereza mapu a Sass. Izi ndizothandiza kwambiri popanga mitundu yosiyanasiyana mwazinthu zathu $theme-colorsndikupanga mitundu yomvera pagawo lililonse. Mukakonza mamapu awa a Sass ndikuphatikizanso, mudzawona zosintha zanu zikuwonekera mu malupu awa.

Onani mamapu athu a Sass ndi malupu amomwe mungasinthire malupuwa ndikukulitsa njira yosinthira maziko a Bootstrap ku code yanu.

Zosintha

Zambiri mwazinthu za Bootstrap zimamangidwa ndi njira yosinthira kalasi. Izi zikutanthauza kuti kuchuluka kwa makongoletsedwe kuli m'gulu loyambira (mwachitsanzo, .btn) pomwe masitayelo amangochitika m'makalasi osintha (mwachitsanzo, .btn-danger). Makalasi osinthira awa amapangidwa kuchokera $theme-colorspamapu kuti asinthe makonda a nambala ndi dzina la makalasi athu osintha.

Nazi zitsanzo ziwiri za momwe timayendera $theme-colorsmapu kuti tipange zosintha ku .alertndi .list-groupzigawo zake.

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

Womvera

Malupu a Sass awa samangokhala mamapu amitundu, mwina. Mukhozanso kupanga mitundu yosiyanasiyana ya zigawo zanu. Tengani mwachitsanzo masanjidwe athu amayendedwe otsika pomwe timasakaniza @eachkuzungulira kwa $grid-breakpointsmapu a Sass ndifunso latolankhani.

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

Mukasintha $grid-breakpoints, zosintha zanu zidzagwira ntchito pamalupu onse omwe akupitilira pamapuwo.

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

Kuti mumve zambiri ndi zitsanzo zamomwe mungasinthire mamapu athu a Sass ndi zosintha, chonde onani gawo la Sass la zolembedwa za Grid .

Kupanga zanu

Tikukulimbikitsani kutsatira malangizowa pomanga ndi Bootstrap kuti mupange zida zanu. Tawonjezera njira iyi kuzinthu zomwe zili muzolemba zathu ndi zitsanzo. Zida monga ma callout athu amamangidwa ngati zida zomwe tapatsidwa zomwe zili ndi makalasi oyambira ndi osintha.

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

Mu CSS yanu, mungakhale ndi china chonga chotsatirachi pomwe kuchuluka kwa makongoletsedwe kumachitika kudzera pa .callout. Kenako, masitayelo apadera pakati pa mtundu uliwonse amawongoleredwa ndi gulu la modifier.

// Base class
.callout {}

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

Kwa ma callouts, makongoletsedwe apaderawa ndi a border-left-color. Mukaphatikiza kalasi yoyambira ndi imodzi mwamakalasi osinthira, mumapeza banja lanu lathunthu: