Vipengele

Madarasa ya msingi

Vipengee vya Bootstrap vimeundwa kwa kiasi kikubwa na nomenclature ya kurekebisha msingi. Tunaweka pamoja mali nyingi iwezekanavyo katika darasa la msingi, kama .btn, na kisha kupanga mitindo ya mtu binafsi kwa kila lahaja katika madarasa ya kurekebisha, kama .btn-primaryau .btn-success.

Ili kuunda madarasa yetu ya kurekebisha, tunatumia @eachmizunguko ya Sass kusisitiza juu ya ramani ya Sass. Hii inasaidia hasa kwa kuzalisha vibadala vya kijenzi kulingana na chetu $theme-colorsna kuunda vibadala vinavyoitikia kwa kila nukta. Unapoweka mapendeleo kwenye ramani hizi za Sass na kukusanya upya, utaona kiotomatiki mabadiliko yako yakionyeshwa katika misururu hii.

Angalia ramani zetu za Sass na loops hati za jinsi ya kubinafsisha vitanzi hivi na kupanua mbinu ya kurekebisha msingi ya Bootstrap kwa msimbo wako mwenyewe.

Virekebishaji

Vipengele vingi vya Bootstrap vimejengwa kwa mbinu ya darasa la kurekebisha msingi. Hii inamaanisha kuwa wingi wa mtindo unapatikana kwa darasa la msingi (kwa mfano, .btn) wakati tofauti za mitindo zimefungwa kwa madarasa ya kurekebisha (kwa mfano, .btn-danger). Madarasa haya ya kirekebishaji yameundwa kutoka kwenye $theme-colorsramani ili kubinafsisha nambari na jina la madarasa yetu ya kurekebisha.

Hapa kuna mifano miwili ya jinsi tunavyozunguka kwenye $theme-colorsramani ili kutoa virekebishaji kwa .alertna .list-groupvipengele.

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

Msikivu

Vitanzi hivi vya Sass havikomei kwenye ramani za rangi pia. Unaweza pia kuzalisha tofauti za kuitikia za vipengele vyako. Chukua kwa mfano mpangilio wetu wa kujibu wa menyu kunjuzi ambapo tunachanganya @eachkitanzi cha $grid-breakpointsramani ya Sass na hoja ya midia ikijumuisha.

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

Ukirekebisha yako $grid-breakpoints, mabadiliko yako yatatumika kwa vitanzi vyote vinavyorudia kwenye ramani hiyo.

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

Kwa maelezo zaidi na mifano kuhusu jinsi ya kurekebisha ramani na vigeu vyetu vya Sass, tafadhali rejelea sehemu ya Sass ya hati za Gridi .

Kuunda yako mwenyewe

Tunakuhimiza ufuate miongozo hii unapojenga na Bootstrap ili kuunda vipengele vyako mwenyewe. Tumepanua mbinu hii sisi wenyewe kwa vipengele maalum katika hati na mifano yetu. Vipengee kama vile viunga vyetu vimeundwa kama vile vipengee vyetu vilivyotolewa vilivyo na madarasa ya msingi na ya kurekebisha.

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

Katika CSS yako, ungekuwa na kitu kama kifuatacho ambapo wingi wa mtindo hufanywa kupitia .callout. Halafu, mitindo ya kipekee kati ya kila lahaja inadhibitiwa kupitia darasa la kurekebisha.

// Base class
.callout {}

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

Kwa wapiga simu, mtindo huo wa kipekee ni border-left-color. Unapochanganya darasa hilo la msingi na mojawapo ya madarasa hayo ya kurekebisha, unapata familia yako kamili ya sehemu: