ອົງປະກອບ

ຫ້ອງຮຽນພື້ນຖານ

ອົງປະກອບຂອງ Bootstrap ສ່ວນໃຫຍ່ແມ່ນຖືກສ້າງຂຶ້ນດ້ວຍນາມສະກຸນຕົວແກ້ໄຂພື້ນຖານ. ພວກເຮົາຈັດກຸ່ມຄຸນສົມບັດທີ່ແບ່ງປັນຫຼາຍເທົ່າທີ່ເປັນໄປໄດ້ເຂົ້າໄປໃນຊັ້ນພື້ນຖານ, ເຊັ່ນ: .btnແລະຫຼັງຈາກນັ້ນຈັດກຸ່ມຮູບແບບສ່ວນບຸກຄົນສໍາລັບແຕ່ລະຕົວແປເຂົ້າໄປໃນຊັ້ນຮຽນ modifier, like .btn-primaryຫຼື .btn-success.

ເພື່ອສ້າງຫ້ອງຮຽນຕົວແກ້ໄຂຂອງພວກເຮົາ, ພວກເຮົາໃຊ້ @eachloops ຂອງ Sass ເພື່ອເຮັດຊ້ໍາໃນແຜນທີ່ Sass. ນີ້ແມ່ນເປັນປະໂຫຍດໂດຍສະເພາະສໍາລັບການສ້າງ variants ຂອງອົງປະກອບໂດຍພວກເຮົາ $theme-colorsແລະການສ້າງ variants ຕອບສະຫນອງສໍາລັບແຕ່ລະ breakpoint. ໃນຂະນະທີ່ທ່ານປັບແຕ່ງແຜນທີ່ Sass ເຫຼົ່ານີ້ແລະລວບລວມຄືນໃຫມ່, ທ່ານຈະເຫັນການປ່ຽນແປງຂອງທ່ານໂດຍອັດຕະໂນມັດໃນ loops ເຫຼົ່ານີ້.

ກວດເບິ່ງ ແຜນທີ່ Sass ແລະເອກະສານ loops ຂອງພວກເຮົາ ສໍາລັບວິທີການປັບແຕ່ງ loops ເຫຼົ່ານີ້ແລະຂະຫຍາຍວິທີການແກ້ໄຂພື້ນຖານຂອງ Bootstrap ໄປຫາລະຫັດຂອງທ່ານເອງ.

ຕົວແກ້ໄຂ

ຫຼາຍໆອົງປະກອບຂອງ Bootstrap ແມ່ນສ້າງຂຶ້ນດ້ວຍວິທີການຂັ້ນພື້ນຖານຕົວແກ້ໄຂ. ນີ້ຫມາຍຄວາມວ່າສ່ວນໃຫຍ່ຂອງຄໍເຕົ້າໄຂ່ທີ່ບັນຈຸຢູ່ໃນຊັ້ນພື້ນຖານ (ເຊັ່ນ, .btn) ໃນຂະນະທີ່ການປ່ຽນແປງຮູບແບບແມ່ນຖືກຈໍາກັດຢູ່ໃນຫ້ອງຮຽນຕົວແກ້ໄຂ (ເຊັ່ນ, .btn-danger). ຫ້ອງຮຽນ modifier ເຫຼົ່ານີ້ຖືກສ້າງຂຶ້ນຈາກ $theme-colorsແຜນທີ່ເພື່ອເຮັດໃຫ້ການປັບແຕ່ງຈໍານວນແລະຊື່ຂອງຫ້ອງຮຽນ modifier ຂອງພວກເຮົາ.

ນີ້ແມ່ນສອງຕົວຢ່າງຂອງວິທີທີ່ພວກເຮົາ loop ເທິງ $theme-colorsແຜນທີ່ເພື່ອສ້າງຕົວດັດແປງ .alertແລະ .list-groupອົງປະກອບ.

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

ຕອບສະໜອງ

ວົງ Sass ເຫຼົ່ານີ້ບໍ່ຈໍາກັດພຽງແຕ່ແຜນທີ່ສີ, ຄືກັນ. ນອກນັ້ນທ່ານຍັງສາມາດສ້າງການປ່ຽນແປງທີ່ຕອບສະຫນອງຂອງອົງປະກອບຂອງທ່ານ. ເອົາຕົວຢ່າງການຈັດຕໍາແຫນ່ງທີ່ຕອບສະຫນອງຂອງພວກເຮົາຂອງ dropdowns ບ່ອນທີ່ພວກເຮົາປະສົມ @eachloop ສໍາລັບ $grid-breakpointsແຜນທີ່ Sass ກັບການສອບຖາມສື່ມວນຊົນປະກອບມີ.

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

Should you modify your $grid-breakpoints, your changes will apply to all the loops iterating over that map.

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

For more information and examples on how to modify our Sass maps and variables, please refer to the Sass section of the Grid documentation.

Creating your own

We encourage you to adopt these guidelines when building with Bootstrap to create your own components. We’ve extended this approach ourselves to the custom components in our documentation and examples. Components like our callouts are built just like our provided components with base and modifier classes.

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

In your CSS, you’d have something like the following where the bulk of the styling is done via .callout. Then, the unique styles between each variant is controlled via modifier class.

// Base class
.callout {}

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

For the callouts, that unique styling is just a border-left-color. When you combine that base class with one of those modifier classes, you get your complete component family: