Mga sangkap

Base nga mga klase

Ang mga sangkap sa Bootstrap kadaghanan gitukod nga adunay base-modifier nomenclature. Gigrupo namo ang daghang gipaambit nga mga kabtangan kutob sa mahimo ngadto sa usa ka base nga klase, sama sa .btn, ug dayon igrupo ang indibidwal nga mga estilo alang sa matag variant ngadto sa mga klase sa modifier, sama sa .btn-primaryo .btn-success.

Aron matukod ang among mga klase sa modifier, among gigamit ang mga @eachloop ni Sass aron mag-uli sa usa ka mapa sa Sass. Labi na nga makatabang kini sa paghimo og mga variant sa usa ka component pinaagi sa among $theme-colorsug paghimo og mga responsive nga variant para sa matag breakpoint. Samtang imong i-customize kini nga mga mapa sa Sass ug i-compile, awtomatiko nimo nga makita ang imong mga pagbag-o nga makita sa kini nga mga loop.

Tan-awa ang among Sass maps ug loops docs kung unsaon pag-customize kini nga mga loops ug pagpalapad sa base-modifier approach sa Bootstrap sa imong kaugalingong code.

Mga modifier

Daghan sa mga sangkap sa Bootstrap ang gitukod gamit ang base-modifier nga pamaagi sa klase. Kini nagpasabot nga ang kinabag-an sa estilo kay anaa sa base nga klase (eg, .btn) samtang ang mga kausaban sa estilo kay limitado lang sa modifier classes (eg, .btn-danger). Kini nga mga klase sa modifier gihimo gikan sa $theme-colorsmapa aron mahimo ang pag-customize sa numero ug ngalan sa among mga klase sa modifier.

Ania ang duha ka mga pananglitan kung giunsa naton pag-loop ang $theme-colorsmapa aron makamugna ang mga modifier sa .alertug .list-groupmga sangkap.

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

Makatubag

Kini nga mga Sass loops dili limitado sa kolor nga mga mapa, bisan. Mahimo ka usab nga makamugna mga responsive nga mga kalainan sa imong mga sangkap. Tagda pananglitan ang among responsive alignment sa mga dropdown diin among gisagol ang @eachloop para sa $grid-breakpointsSass map nga adunay media query naglakip.

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

Kung imong usbon ang imong $grid-breakpoints, ang imong mga pagbag-o magamit sa tanan nga mga loop nga nagbalikbalik sa kana nga mapa.

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

Para sa dugang nga impormasyon ug mga pananglitan kon unsaon pag-usab sa atong Sass nga mga mapa ug mga variable, palihog tan-awa ang Sass nga seksyon sa Grid nga dokumentasyon .

Paghimo sa imong kaugalingon

Giawhag ka namo sa pagsagop niini nga mga giya sa dihang magtukod gamit ang Bootstrap aron makamugna ug kaugalingong mga sangkap. Gipadako namo kini nga pamaagi sa among kaugalingon sa naandan nga mga sangkap sa among dokumentasyon ug mga pananglitan. Ang mga sangkap sama sa among mga callout gihimo sama sa among gihatag nga mga sangkap nga adunay base ug mga klase sa modifier.

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

Sa imong CSS, aduna kay usa ka butang sama sa mosunod diin ang kadaghanan sa pag-istilo gihimo pinaagi sa .callout. Dayon, ang talagsaon nga mga estilo tali sa matag variant kontrolado pinaagi sa modifier class.

// Base class
.callout {}

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

Alang sa mga callout, kanang talagsaon nga pag-istilo usa lang ka border-left-color. Kung imong gisagol ang base nga klase sa usa sa mga klase sa modifier, makuha nimo ang imong kompleto nga pamilya sa sangkap: