Theming Bootstrap
Tùy chỉnh Bootstrap 4 với các biến Sass tích hợp mới của chúng tôi cho các tùy chọn kiểu toàn cầu để dễ dàng thay đổi chủ đề và thành phần.
Giới thiệu
Trong Bootstrap 3, chủ đề chủ yếu được thúc đẩy bởi các ghi đè biến trong LESS, CSS tùy chỉnh và một biểu định kiểu chủ đề riêng biệt mà chúng tôi đã đưa vào dist
tệp của mình. Với một số nỗ lực, người ta có thể thiết kế lại hoàn toàn giao diện của Bootstrap 3 mà không cần chạm vào các tệp cốt lõi. Bootstrap 4 cung cấp một cách tiếp cận quen thuộc, nhưng hơi khác.
Giờ đây, việc lập chủ đề được thực hiện bởi các biến Sass, bản đồ Sass và CSS tùy chỉnh. Không có biểu định kiểu chủ đề chuyên dụng nào nữa; thay vào đó, bạn có thể kích hoạt chủ đề tích hợp để thêm gradient, bóng đổ và hơn thế nữa.
Sass
Sử dụng các tệp Sass nguồn của chúng tôi để tận dụng các biến, bản đồ, mixin và hơn thế nữa khi biên dịch Sass bằng cách sử dụng đường dẫn nội dung của riêng bạn.
Cấu trúc tệp
Bất cứ khi nào có thể, hãy tránh sửa đổi các tệp cốt lõi của Bootstrap. Đối với Sass, điều đó có nghĩa là tạo biểu định kiểu của riêng bạn để nhập Bootstrap để bạn có thể sửa đổi và mở rộng nó. Giả sử bạn đang sử dụng trình quản lý gói như npm, bạn sẽ có cấu trúc tệp giống như sau:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Nếu bạn đã tải xuống các tệp nguồn của chúng tôi và không sử dụng trình quản lý gói, bạn sẽ muốn thiết lập thủ công một cái gì đó tương tự như cấu trúc đó, giữ các tệp nguồn của Bootstrap tách biệt với tệp của riêng bạn.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Nhập khẩu
Trong của bạn custom.scss
, bạn sẽ nhập các tệp Sass nguồn của Bootstrap. Bạn có hai lựa chọn: bao gồm tất cả Bootstrap hoặc chọn các phần bạn cần. Chúng tôi khuyến khích phần sau, mặc dù hãy lưu ý rằng có một số yêu cầu và phụ thuộc trên các thành phần của chúng tôi. Bạn cũng sẽ cần bao gồm một số JavaScript cho các plugin của chúng tôi.
// Custom.scss
// Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";
Với thiết lập đó, bạn có thể bắt đầu sửa đổi bất kỳ biến và bản đồ nào của Sass trong của bạn custom.scss
. Bạn cũng có thể bắt đầu thêm các phần của Bootstrap dưới // Optional
phần này nếu cần. Chúng tôi khuyên bạn nên sử dụng ngăn xếp nhập đầy đủ từ bootstrap.scss
tệp của chúng tôi làm điểm xuất phát của bạn.
Giá trị mặc định của biến
Mọi biến Sass trong Bootstrap đều bao gồm !default
cờ cho phép bạn ghi đè giá trị mặc định của biến trong Sass của riêng bạn mà không cần sửa đổi mã nguồn của Bootstrap. Sao chép và dán các biến nếu cần, sửa đổi giá trị của chúng và xóa !default
cờ. Nếu một biến đã được gán, thì nó sẽ không được gán lại theo các giá trị mặc định trong Bootstrap.
Bạn sẽ tìm thấy danh sách đầy đủ các biến của Bootstrap trong scss/_variables.scss
. Một số biến được đặt thành null
, những biến này không xuất ra thuộc tính trừ khi chúng được ghi đè trong cấu hình của bạn.
Ghi đè biến phải xuất hiện sau khi các hàm, biến và mixin của chúng ta được nhập, nhưng trước khi nhập phần còn lại.
Đây là một ví dụ thay đổi khi nhập background-color
và biên dịch Bootstrap qua npm:color
<body>
@import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Lặp lại khi cần thiết cho bất kỳ biến nào trong Bootstrap, bao gồm cả các tùy chọn chung bên dưới.
Bản đồ và vòng lặp
Bootstrap 4 bao gồm một số bản đồ Sass, các cặp giá trị khóa giúp tạo các họ CSS liên quan dễ dàng hơn. Chúng tôi sử dụng bản đồ Sass cho màu sắc, điểm ngắt lưới và hơn thế nữa. Cũng giống như các biến Sass, tất cả các bản đồ Sass đều bao gồm !default
cờ và có thể được ghi đè và mở rộng.
Một số bản đồ Sass của chúng tôi được hợp nhất thành những bản đồ trống theo mặc định. Điều này được thực hiện để cho phép dễ dàng mở rộng bản đồ Sass nhất định, nhưng đi kèm với cái giá là khiến việc loại bỏ các vật phẩm khỏi bản đồ khó hơn một chút.
Sửa đổi bản đồ
Để sửa đổi màu hiện có trong $theme-colors
bản đồ của chúng tôi, hãy thêm màu sau vào tệp Sass tùy chỉnh của bạn:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Thêm vào bản đồ
Để thêm màu mới $theme-colors
, hãy thêm khóa và giá trị mới:
$theme-colors: (
"custom-color": #900
);
Xóa khỏi bản đồ
Để xóa màu khỏi $theme-colors
hoặc bất kỳ bản đồ nào khác, hãy sử dụng map-remove
. Lưu ý rằng bạn phải chèn nó vào giữa các yêu cầu và tùy chọn của chúng tôi:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...
Các khóa bắt buộc
Bootstrap giả định sự hiện diện của một số khóa cụ thể trong bản đồ Sass khi chúng tôi sử dụng và tự mở rộng chúng. Khi bạn tùy chỉnh các bản đồ được bao gồm, bạn có thể gặp phải lỗi khi khóa của một bản đồ Sass cụ thể đang được sử dụng.
Ví dụ: chúng tôi sử dụng primary
, success
và danger
các khóa từ $theme-colors
cho các liên kết, nút và trạng thái biểu mẫu. Việc thay thế các giá trị của các khóa này sẽ không có vấn đề gì, nhưng việc xóa chúng có thể gây ra sự cố biên dịch Sass. Trong những trường hợp này, bạn sẽ cần sửa đổi mã Sass sử dụng các giá trị đó.
Chức năng
Bootstrap sử dụng một số hàm Sass, nhưng chỉ một tập hợp con có thể áp dụng cho các chủ đề chung. Chúng tôi đã bao gồm ba chức năng để nhận giá trị từ bản đồ màu:
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}
Những điều này cho phép bạn chọn một màu từ bản đồ Sass giống như cách bạn sử dụng biến màu từ v3.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
Chúng tôi cũng có một chức năng khác để lấy một mức độ màu cụ thể từ $theme-colors
bản đồ. Các giá trị mức âm sẽ làm sáng màu, trong khi các mức cao hơn sẽ tối đi.
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}
Trong thực tế, bạn sẽ gọi hàm và chuyển vào hai tham số: tên của màu từ $theme-colors
(ví dụ: chính hoặc nguy hiểm) và cấp số.
.custom-element {
color: theme-color-level(primary, -10);
}
Các chức năng bổ sung có thể được thêm vào trong tương lai hoặc Sass tùy chỉnh của riêng bạn để tạo các chức năng cấp cho các bản đồ Sass bổ sung, hoặc thậm chí là một chức năng chung nếu bạn muốn dài dòng hơn.
Độ tương phản màu
Một chức năng bổ sung mà chúng tôi đưa vào Bootstrap là chức năng tương phản màu sắc , color-yiq
. Nó sử dụng không gian màu YIQ để tự động trả về màu tương phản sáng ( #fff
) hoặc tối ( #111
) dựa trên màu cơ bản được chỉ định. Chức năng này đặc biệt hữu ích cho các mixin hoặc vòng lặp mà bạn đang tạo nhiều lớp.
Ví dụ: để tạo các mẫu màu từ $theme-colors
bản đồ của chúng tôi:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
Nó cũng có thể được sử dụng cho các nhu cầu tương phản một lần:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
Bạn cũng có thể chỉ định màu cơ bản với các chức năng bản đồ màu của chúng tôi:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
Thoát SVG
Chúng tôi sử dụng escape-svg
hàm để thoát và ký <
tự cho ảnh nền SVG. Các ký tự này cần phải được thoát ra để hiển thị đúng hình ảnh nền trong IE. Khi sử dụng hàm, các URI dữ liệu phải được trích dẫn.>
#
escape-svg
Thêm và Trừ các hàm
Chúng tôi sử dụng các hàm add
và subtract
để bọc calc
hàm CSS. Mục đích chính của các hàm này là để tránh lỗi khi giá trị "không có đơn vị" 0
được chuyển vào một calc
biểu thức. Các biểu thức như calc(10px - 0)
sẽ trả về một lỗi trong tất cả các trình duyệt, mặc dù chính xác về mặt toán học.
Ví dụ trong đó calc hợp lệ:
$border-radius: .25rem;
$border-width: 1px;
.element {
// Output calc(.25rem - 1px) is valid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}
Ví dụ trong đó calc không hợp lệ:
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}
Tùy chọn Sass
Tùy chỉnh Bootstrap 4 với tệp biến tùy chỉnh tích hợp của chúng tôi và dễ dàng chuyển đổi các tùy chọn CSS toàn cầu với các $enable-*
biến Sass mới. Ghi đè giá trị của một biến và biên dịch lại npm run test
nếu cần.
scss/_variables.scss
Bạn có thể tìm và tùy chỉnh các biến này cho các tùy chọn chung chính trong tệp Bootstrap .
Biến đổi | Giá trị | Sự mô tả |
---|---|---|
$spacer |
1rem (mặc định) hoặc bất kỳ giá trị nào> 0 |
Chỉ định giá trị bộ đệm mặc định để tạo tiện ích bộ đệm theo chương trình của chúng tôi . |
$enable-rounded |
true (mặc định) hoặcfalse |
Cho phép các border-radius kiểu được xác định trước trên các thành phần khác nhau. |
$enable-shadows |
true hoặc false (mặc định) |
Cho phép các box-shadow kiểu trang trí được xác định trước trên các thành phần khác nhau. Không ảnh hưởng đến box-shadow s được sử dụng cho các trạng thái tiêu điểm. |
$enable-gradients |
true hoặc false (mặc định) |
Bật các gradient được xác định trước thông qua background-image các kiểu trên các thành phần khác nhau. |
$enable-transitions |
true (mặc định) hoặcfalse |
Bật tính năng được xác định trước transition trên các thành phần khác nhau. |
$enable-prefers-reduced-motion-media-query |
true (mặc định) hoặcfalse |
Bật prefers-reduced-motion truy vấn phương tiện , loại bỏ các hoạt ảnh / chuyển tiếp nhất định dựa trên tùy chọn trình duyệt / hệ điều hành của người dùng. |
$enable-hover-media-query |
true hoặc false (mặc định) |
Không được chấp nhận |
$enable-grid-classes |
true (mặc định) hoặcfalse |
Cho phép tạo các lớp CSS cho hệ thống lưới (ví dụ: ,, .container v.v. )..row .col-md-1 |
$enable-caret |
true (mặc định) hoặcfalse |
Bật dấu mũ phần tử giả .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (mặc định) hoặcfalse |
Thêm con trỏ "tay" vào các phần tử nút không bị tắt. |
$enable-print-styles |
true (mặc định) hoặcfalse |
Cho phép các kiểu để tối ưu hóa in ấn. |
$enable-responsive-font-sizes |
true hoặc false (mặc định) |
Cho phép kích thước phông chữ đáp ứng . |
$enable-validation-icons |
true (mặc định) hoặcfalse |
Bật background-image các biểu tượng trong đầu vào văn bản và một số biểu mẫu tùy chỉnh cho trạng thái xác thực. |
$enable-deprecation-messages |
true (mặc định) hoặcfalse |
Đặt để false ẩn cảnh báo khi sử dụng bất kỳ hàm trộn nào không dùng nữa và các chức năng được lên kế hoạch xóa bỏ v5 . |
Màu sắc
Nhiều thành phần và tiện ích khác nhau của Bootstrap được xây dựng thông qua một loạt các màu được xác định trong bản đồ Sass. Bản đồ này có thể được lặp lại trong Sass để nhanh chóng tạo ra một loạt các bộ quy tắc.
Đủ màu sắc
Tất cả các màu có sẵn trong Bootstrap 4, có sẵn dưới dạng biến Sass và bản đồ Sass trong scss/_variables.scss
tệp. Điều này sẽ được mở rộng trong các bản phát hành nhỏ tiếp theo để thêm các sắc thái bổ sung, giống như bảng màu xám mà chúng tôi đã đưa vào.
Đây là cách bạn có thể sử dụng những thứ này trong Sass của mình:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
Các lớp tiện ích màu cũng có sẵn để thiết lập color
và background-color
.
Màu sắc chủ đề
Chúng tôi sử dụng một tập hợp con của tất cả các màu để tạo một bảng màu nhỏ hơn nhằm tạo ra các lược đồ màu, cũng có sẵn dưới dạng các biến Sass và một bản đồ Sass trong scss/_variables.scss
tệp Bootstrap.
Màu xám
Một tập hợp mở rộng các biến màu xám và bản đồ Sass scss/_variables.scss
cho các sắc thái xám nhất quán trên toàn bộ dự án của bạn. Lưu ý rằng đây là "màu xám lạnh", có xu hướng thiên về tông màu xanh lam tinh tế, thay vì màu xám trung tính.
Bên trong scss/_variables.scss
, bạn sẽ tìm thấy các biến màu của Bootstrap và bản đồ Sass. Đây là một ví dụ về $colors
bản đồ Sass:
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;
Thêm, xóa hoặc sửa đổi các giá trị trong bản đồ để cập nhật cách chúng được sử dụng trong nhiều thành phần khác. Thật không may tại thời điểm này, không phải thành phần nào cũng sử dụng bản đồ Sass này. Các bản cập nhật trong tương lai sẽ cố gắng cải thiện điều này. Cho đến lúc đó, hãy lập kế hoạch sử dụng các ${color}
biến và bản đồ Sass này.
Các thành phần
Nhiều thành phần và tiện ích của Bootstrap được xây dựng với @each
các vòng lặp lặp lại trên 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-colors
và 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.
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-colors
bả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-colors
bản đồ để tạo các công cụ sửa đổi cho .alert
thành phần và tất cả các .bg-*
tiện ích nền của chúng tôi.
// Generate alert modifier classes
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
}
}
// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
@include bg-variant('.bg-#{$color}', $value);
}
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 hoặc tiện ích của mình. Lấy ví dụ về các tiện ích căn chỉnh văn bản đáp ứng của chúng tôi, nơi chúng tôi trộn một @each
vòng lặp cho $grid-breakpoints
bản đồ Sass với một truy vấn phương tiện bao gồm.
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.text#{$infix}-left { text-align: left !important; }
.text#{$infix}-right { text-align: right !important; }
.text#{$infix}-center { text-align: center !important; }
}
}
Nếu bạn cầ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 đồ đó.
Các biến CSS
Bootstrap 4 bao gồm khoảng hai chục thuộc tính tùy chỉnh CSS (biến) trong CSS đã biên dịch của nó. Những thứ này cung cấp khả năng truy cập dễ dàng vào các giá trị thường được sử dụng như màu chủ đề, điểm ngắt và ngăn xếp phông chữ chính của chúng tôi khi làm việc trong Trình kiểm tra của trình duyệt, hộp cát mã hoặc tạo mẫu chung.
Các biến có sẵn
Dưới đây là các biến chúng tôi đưa vào (lưu ý rằng biến :root
là bắt buộc). Chúng nằm trong _root.scss
tệp của chúng tôi.
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
Các ví dụ
Các biến CSS cung cấp tính linh hoạt tương tự như các biến của Sass, nhưng không cần biên dịch trước khi được cung cấp cho trình duyệt. Ví dụ: ở đây chúng tôi đang đặt lại phông chữ và kiểu liên kết của trang bằng các biến CSS.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
Biến điểm ngắt
Mặc dù ban đầu chúng tôi đã bao gồm các điểm ngắt trong các biến CSS của mình (ví dụ --breakpoint-md
:), chúng không được hỗ trợ trong các truy vấn phương tiện , nhưng chúng vẫn có thể được sử dụng trong các bộ quy tắc trong các truy vấn phương tiện. Các biến điểm ngắt này vẫn còn trong CSS đã biên dịch để tương thích ngược với điều kiện JavaScript có thể sử dụng chúng. Tìm hiểu thêm trong thông số kỹ thuật .
Dưới đây là một ví dụ về những gì không được hỗ trợ:
@media (min-width: var(--breakpoint-sm)) {
...
}
Và đây là một ví dụ về những gì được hỗ trợ:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}