Source

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 disttệ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 một chút.

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. Trong bản dựng của mình, chúng tôi đã tăng độ chính xác làm tròn Sass lên 6 (theo mặc định là 5) để ngăn chặn các vấn đề với việc làm tròn trình duyệt.

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

@import "../node_modules/bootstrap/scss/bootstrap";
// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@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 // Optionalphầ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.scsstệ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 4 đều bao gồm !defaultcờ 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 !defaultcờ. 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.

Ghi đè biến trong cùng một tệp Sass có thể trước hoặc sau biến mặc định. Tuy nhiên, khi ghi đè trên các tệp Sass, việc ghi đè của bạn phải đến trước khi bạn nhập tệp Sass của Bootstrap.

Đây là một ví dụ thay đổi khi nhập background-colorvà biên dịch Bootstrap qua npm:color<body>

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

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 !defaultcờ 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-colorsbả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-colorshoặ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, successvà dangercác khóa từ $theme-colorscho 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-colorsbả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 bao gồm trong 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-colorsbả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`
}

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 testnếu cần.

scss/_variables.scssBạ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-radiuskiểu được xác định trước trên các thành phần khác nhau.
$enable-shadows truehoặc false(mặc định) Cho phép các box-shadowkiểu được xác định trước trên các thành phần khác nhau.
$enable-gradients truehoặc false(mặc định) Bật các gradient được xác định trước thông qua background-imagecá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 transitiontrê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-motiontruy 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 truehoặ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ụ: ,, .containerv.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-print-styles true(mặc định) hoặcfalse Cho phép các kiểu để tối ưu hóa in ấn.
$enable-validation-icons true(mặc định) hoặcfalse Bật background-imagecá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.

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.scsstệ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.

Màu xanh da trời
xanh đậm
Màu đỏ tía
Hồng
Màu đỏ
Quả cam
Màu vàng
màu xanh lá
Màu mòng két
Lục lam

Đâ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 colorvà background-color.

Trong tương lai, chúng tôi sẽ hướng tới việc cung cấp các bản đồ và biến Sass cho các sắc thái của từng màu như chúng tôi đã thực hiện với các màu thang độ xám bên dưới.

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.scsstệp Bootstraps.

Sơ đẳng
Sơ trung
Thành công
Sự nguy hiểm
Cảnh báo
Thông tin
Nhẹ
Tối

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.scsscho 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.

100
200
300
400
500
600
700
800
900

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ề $colorsbả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 @eachcá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-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.

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 công cụ sửa đổi cho .alertthà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 @eachvòng lặp cho $grid-breakpointsbả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 :rootlà bắt buộc). Chúng nằm trong _root.scsstệ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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
  }
}