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 chung để dễ dàng thay đổi chủ đề và thành phần
Giới thiệu
Trong Bootstrap 3, chủ đề chủ yếu được điều khiển bởi các phần ghi đè biến trong LESS, CSS tùy chỉnh và biểu định kiểu chủ đề riêng biệt mà chúng tôi đã đưa vào tệp
// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
7 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ácGiờ đây, chủ đề được thực hiện bằng 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;
ngổ ngáo
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.v.
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 đã tải xuống các tệp nguồn của chúng tôi hoặc đang sử dụng trình quản lý gói, bạn sẽ có cấu trúc tệp giống như thế này
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Trong
// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
8 của bạn, 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 những phần bạn cần. Chúng tôi khuyến khích cách thứ hai, mặc dù lưu ý rằng có một số yêu cầu và sự phụ thuộc giữa 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 Sass và bản đồ nào trong
// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
8 của mình. Bạn cũng có thể bắt đầu thêm các phần của Bootstrap vào phần // 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";
0 nếu cầnGiá trị mặc định của biến
Mỗi biến Sass trong Bootstrap 4 bao gồm cờ
// 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";
1 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 cờ // 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";
1. Nếu một biến đã được gán, thì nó sẽ không được gán lại bởi các giá trị mặc định trong BootstrapGhi đè biến trong cùng một tệp Sass có thể xuất hiện trước hoặc sau các biến mặc định. Tuy nhiên, khi ghi đè lên các tệp Sass, phần 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
// 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";
3 và // 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";
4 khi nhập và biên dịch Bootstrap qua npmyour-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
1Lặp lại nếu cần cho bất kỳ biến nào trong Bootstrap, bao gồm 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ị chính 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. Giống như các biến Sass, tất cả các bản đồ Sass bao gồm cờ
// 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";
1 và có thể được ghi đè và mở rộngVí dụ: để sửa đổi màu hiện có trong bản đồ
// 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";
6 của chúng tôi, hãy thêm phần sau vào tệp Sass tùy chỉnh của bạnyour-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
4Để thêm màu mới vào
// 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";
6, hãy thêm khóa và giá trị mớiyour-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
6Chức năng
Bootstrap sử dụng một số chức năng Sass, nhưng chỉ một tập hợp con được áp dụng cho chủ đề chung. Chúng tôi đã bao gồm ba chức năng để nhận các giá trị từ bản đồ màu
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
7Những thứ 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
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
8Chú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ừ bản đồ
// 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";
6. 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 hơn// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
0Trong thực tế, bạn sẽ gọi hàm và truyền vào hai tham số. tên của màu từ
// 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";
6 [e. g. , chính hoặc nguy hiểm] và cấp số// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
2Các hàm 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 hàm cấp độ cho các bản đồ Sass bổ sung hoặc thậm chí là một bản đồ 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,
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
10. Nó sử dụng không gian màu YIQ để tự động trả về màu tương phản sáng [your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
11] hoặc tối [your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
12] dựa trên màu cơ bản đã chỉ định. Hàm 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ớpVí dụ: để tạo các mẫu màu từ bản đồ
// 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";
6 của chúng tôi// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
0Nó cũng có thể được sử dụng cho các nhu cầu tương phản một lần
// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
1Bạn cũng có thể chỉ định một màu cơ bản với các chức năng bản đồ màu của chúng tôi
// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
2tùy chọn sass
Tùy chỉnh Bootstrap 4 với tệp biến tùy chỉnh được tích hợp sẵn của chúng tôi và dễ dàng chuyển đổi các tùy chọn CSS chung với các biến
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
14 Sass mới. Ghi đè giá trị của một biến và biên dịch lại bằng your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
15 nếu cầnBạn có thể tìm và tùy chỉnh các biến này cho các tùy chọn toàn cầu chính trong tệp
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
16 của chúng tôiBiếnGiá trịMô tảyour-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
17your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
18 [mặc định] hoặc bất kỳ giá trị nào > 0Chỉ định giá trị bộ đệm mặc định để tạo các tiện ích bộ đệm của chúng tôi theo chương trình. your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
19your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
40 [mặc định] hoặc your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
41Bật kiểu your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
42 được xác định trước trên các thành phần khác nhau. your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
43your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
40 hoặc your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
41 [mặc định] Cho phép các kiểu your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
46 được xác định trước trên các thành phần khác nhau. your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
47your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
40 hoặc your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
41 [mặc định] Cho phép chuyển màu được xác định trước thông qua kiểu your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
60 trên các thành phần khác nhau. your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
61your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
40 [mặc định] hoặc your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
41Bật các your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
64 được xác định trước trên các thành phần khác nhau. your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
65your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
40 hoặc your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
41 [mặc định]…your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
68your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
40 [mặc định] hoặc your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
41Cho phép tạo các lớp CSS cho hệ thống lưới [e. g. , your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
71, your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
72, your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
73, v.v. ]. your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
74your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
40 [mặc định] hoặc your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
41Bật dấu mũ phần tử giả trên your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
77. your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
78your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
40 [mặc định] hoặc your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
41Bật các kiểu để tối ưu hóa việc inMàu
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 tệp
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
81 của chúng tôi. Đ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 chúng trong Sass của mình
// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
3Các lớp tiện ích màu cũng có sẵn để thiết lập
// 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";
4 và // 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";
3Trong tương lai, chúng tôi sẽ hướng đến việc cung cấp bản đồ Sass và các biến 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 để tạo bảng phối màu, cũng có sẵn dưới dạng biến Sass và bản đồ Sass trong tệp
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
81 của chúng tôimàu xám
Một tập hợp mở rộng các biến màu xám và bản đồ Sass trong
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
81 cho các sắc thái xám nhất quán trong dự án của bạnTrong vòng
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
16, bạn sẽ tìm thấy các biến màu và bản đồ Sass của chúng tôi. Đây là một ví dụ về bản đồ your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
87 Sass// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
4Thê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 mọi thành phần đều 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ên kế hoạch sử dụng các biến
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
88 và bản đồ Sass nàyCá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 các vòng lặp
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
89 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 // 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";
6 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àysử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. ,
// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
01] 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. , // Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
02]. Các lớp công cụ sửa đổi này được xây dựng từ bản đồ // 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";
6 để 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ôiDưới đây là hai ví dụ về cách chúng tôi lặp qua bản đồ
// 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";
6 để tạo các công cụ sửa đổi cho thành phần ________ 205 và tất cả các tiện ích nền ________ 206 của chúng tôi// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
5Phả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 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 vòng lặp
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
89 cho bản đồ // Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
08 Sass với một truy vấn phương tiện bao gồm// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
6Nếu bạn cần sửa đổi
// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
08 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 đồ đó