Các thành phần

Các lớp cơ bản

Các thành phần của Bootstrap chủ yếu được xây dựng với danh pháp cơ sở sửa đổi. Chúng tôi nhóm càng nhiều thuộc tính được chia sẻ càng tốt vào một lớp cơ sở, chẳng hạn như .btn, sau đó nhóm các kiểu riêng lẻ cho từng biến thể thành các lớp bổ trợ, như .btn-primaryhoặc .btn-success.

Để xây dựng các lớp bổ trợ của chúng tôi, chúng tôi sử dụng các vòng lặp của Sass @eachđể lặp qua bản đồ Sass. Điều này đặc biệt hữu ích cho việc tạo các biến thể của một thành phần bởi chúng tôi $theme-colorsvà tạo các biến thể đáp ứng cho mỗi điểm ngắt. Khi bạn tùy chỉnh các bản đồ Sass này và biên dịch lại, bạn sẽ tự động thấy các thay đổi của mình được phản ánh trong các vòng lặp này.

Xem tài liệu về bản đồ và vòng lặp Sass của chúng tôi để biết cách tùy chỉnh các vòng lặp này và mở rộng phương pháp tiếp cận công cụ sửa đổi cơ sở của Bootstrap cho mã của riêng bạn.

Bổ ngữ

Nhiều thành phần của Bootstrap được xây dựng với cách tiếp cận lớp cơ sở sửa đổi. Điều này có nghĩa là phần lớn kiểu dáng được chứa trong một lớp cơ sở (ví dụ .btn:) trong khi các biến thể kiểu được giới hạn trong các lớp bổ trợ (ví dụ .btn-danger:). Các lớp bổ trợ này được xây dựng từ $theme-colorsbản đồ để tùy chỉnh số lượng và tên của các lớp bổ trợ của chúng tôi.

Dưới đây là hai ví dụ về cách chúng tôi lặp qua $theme-colorsbản đồ để tạo các từ bổ nghĩa cho .alertvà .list-groupcác thành phần.

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

Phản ứng nhanh nhẹn

Các vòng lặp Sass này cũng không giới hạn ở bản đồ màu. Bạn cũng có thể tạo các biến thể đáp ứng của các thành phần của mình. Lấy ví dụ về sự căn chỉnh đáp ứng của chúng tôi về các trình đơn thả xuống, nơi chúng tôi kết hợp một @eachvòng lặp cho $grid-breakpointsbản đồ Sass với một truy vấn phương tiện bao gồm.

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

Nếu bạn sửa đổi $grid-breakpoints, các thay đổi của bạn sẽ áp dụng cho tất cả các vòng lặp trên bản đồ đó.

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

Để biết thêm thông tin và ví dụ về cách sửa đổi bản đồ và biến Sass của chúng tôi, vui lòng tham khảo phần Sass của tài liệu Grid .

Tạo của riêng bạn

Chúng tôi khuyến khích bạn áp dụng các nguyên tắc này khi xây dựng với Bootstrap để tạo các thành phần của riêng bạn. Chúng tôi đã tự mở rộng cách tiếp cận này cho các thành phần tùy chỉnh trong tài liệu và ví dụ của chúng tôi. Các thành phần như chú thích của chúng tôi được xây dựng giống như các thành phần được cung cấp của chúng tôi với các lớp cơ sở và bổ trợ.

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

Trong CSS của bạn, bạn sẽ có một cái gì đó giống như sau, nơi mà phần lớn việc tạo kiểu được thực hiện thông qua .callout. Sau đó, các kiểu duy nhất giữa mỗi biến thể được kiểm soát thông qua lớp bổ trợ.

// Base class
.callout {}

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

Đối với chú thích, kiểu dáng độc đáo đó chỉ là một border-left-color. Khi bạn kết hợp lớp cơ sở đó với một trong các lớp bổ trợ đó, bạn sẽ có được họ thành phần hoàn chỉnh của mình: