Các thành phần của Bootstrap phần lớn được xây dựng với danh pháp công cụ sửa đổi cơ sở. Chúng tôi nhóm càng nhiều thuộc tính dùng chung càng tốt vào một lớp cơ sở, chẳng hạn như // 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); } 6, sau đó nhóm các kiểu riêng lẻ cho từng biến thể thành các lớp bổ trợ, chẳng hạn như // 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); } 7 hoặc // 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); } 8
Để xây dựng các lớp công cụ sửa đổi của chúng tôi, chúng tôi sử dụng các vòng lặp // 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); } 9 của Sass để lặp lại trên bản đồ Sass. Điều này đặc biệt hữu ích để tạo các biến thể của một thành phần bằng // 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); } 0 của chúng tôi và tạo các biến thể đáp ứng cho từng điểm dừng. 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ề vòng lặp và bản đồ 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 cách tiếp cận công cụ sửa đổi cơ sở của Bootstrap cho mã của riêng bạn
sửa đổi
Nhiều thành phần của Bootstrap được xây dựng với cách tiếp cận lớp sửa đổi cơ sở. Đ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ở (e. g. , // 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); } 6) trong khi các biến thể phong cách được giới hạn trong các lớp sửa đổi (e. g. , // 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); } 2). Các lớp công cụ sửa đổi này được xây dựng từ bản đồ // 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); } 0 để tùy chỉnh số lượng và tên của các lớp công cụ sửa đổi của chúng tôi
Dưới đây là hai ví dụ về cách chúng tôi lặp qua bản đồ // 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); } 0 để tạo các công cụ sửa đổi cho các thành phần // 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); } 5 và // 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); } 6
// 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 ở các 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ề căn chỉnh đáp ứng của chúng tôi về danh sách thả xuống nơi chúng tôi trộn một vòng lặp // 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); } 9 cho bản đồ // 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); } 8 Sass với 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 // 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); } 8 của mình, những thay đổi của bạn sẽ áp dụng cho tất cả các vòng lặp lặp lại trên bản đồ đó
// 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); } 1
Để biết thêm thông tin và ví dụ về cách sửa đổi các biến và bả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 bằng Bootstrap để tạo các thành phần của riêng bạn. Chúng tôi đã tự mở rộng phương pháp 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ợ
Đây là một chú thích. Chúng tôi đã tạo tùy chỉnh cho tài liệu của mình để thông điệp của chúng tôi gửi đến bạn nổi bật. Nó có ba biến thể thông qua các lớp sửa đổi
// 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); } 2
Trong CSS của bạn, bạn sẽ có một cái gì đó giống như sau trong đó phần lớn kiểu dáng được thực hiện thông qua // 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; } } } } 0. 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 sửa đổi
// 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); } 4
Đối với chú thích, kiểu dáng độc đáo đó chỉ là một // 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; } } } } 1. 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