Mga bahagi

Mga batayang klase

Ang mga bahagi ng Bootstrap ay higit na binuo gamit ang isang base-modifier nomenclature. Nagpangkat kami ng maraming nakabahaging property hangga't maaari sa isang baseng klase, tulad ng .btn, at pagkatapos ay pinapangkat ang mga indibidwal na istilo para sa bawat variant sa mga klase ng modifier, tulad ng .btn-primaryo .btn-success.

Upang bumuo ng aming mga klase ng modifier, ginagamit namin ang mga @eachloop ni Sass upang umulit sa isang mapa ng Sass. Ito ay partikular na nakakatulong para sa pagbuo ng mga variant ng isang bahagi sa pamamagitan ng aming $theme-colorsat paggawa ng mga tumutugong variant para sa bawat breakpoint. Habang kino-customize mo ang mga mapa ng Sass na ito at muling nag-compile, awtomatiko mong makikita ang iyong mga pagbabago na makikita sa mga loop na ito.

Tingnan ang aming Sass maps at loops docs para sa kung paano i-customize ang mga loop na ito at i-extend ang base-modifier approach ng Bootstrap sa sarili mong code.

Mga modifier

Marami sa mga bahagi ng Bootstrap ay binuo gamit ang base-modifier class approach. Nangangahulugan ito na ang karamihan ng estilo ay nakapaloob sa isang batayang klase (hal, .btn) habang ang mga pagkakaiba-iba ng istilo ay nakakulong sa mga klase ng modifier (hal, .btn-danger). Ang mga modifier class na ito ay binuo mula sa $theme-colorsmapa para gawing customizing ang numero at pangalan ng aming modifier classes.

Narito ang dalawang halimbawa kung paano tayo umiikot sa $theme-colorsmapa upang makabuo ng mga modifier sa .alertat mga .list-groupbahagi.

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

Tumutugon

Ang mga Sass loop na ito ay hindi limitado sa mga mapa ng kulay, alinman. Maaari ka ring bumuo ng mga tumutugong variation ng iyong mga bahagi. Kunin halimbawa ang aming tumutugon na pagkakahanay ng mga dropdown kung saan pinaghalo namin ang isang @eachloop para sa $grid-breakpointsmapa ng Sass na may kasamang media query.

// 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 babaguhin mo ang iyong $grid-breakpoints, malalapat ang iyong mga pagbabago sa lahat ng mga loop na umuulit sa mapa na iyon.

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

Para sa higit pang impormasyon at mga halimbawa kung paano baguhin ang aming mga mapa at variable ng Sass, mangyaring sumangguni sa seksyong Sass ng dokumentasyon ng Grid .

Paglikha ng iyong sarili

Hinihikayat ka naming gamitin ang mga alituntuning ito kapag gumagawa gamit ang Bootstrap upang lumikha ng sarili mong mga bahagi. Pinalawak namin ang diskarteng ito sa aming sarili sa mga custom na bahagi sa aming dokumentasyon at mga halimbawa. Ang mga bahagi tulad ng aming mga callout ay binuo tulad ng aming ibinigay na mga bahagi na may base at modifier na mga klase.

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

Sa iyong CSS, magkakaroon ka ng isang bagay tulad ng sumusunod kung saan ang karamihan sa pag-istilo ay ginagawa sa pamamagitan ng .callout. Pagkatapos, ang mga natatanging istilo sa pagitan ng bawat variant ay kinokontrol sa pamamagitan ng modifier class.

// Base class
.callout {}

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

Para sa mga callout, ang natatanging istilong iyon ay isang border-left-color. Kapag pinagsama mo ang base class na iyon sa isa sa mga modifier class na iyon, makukuha mo ang iyong kumpletong component family: