Hệ thống lưới mặc định của Bootstrap, thể hiện đỉnh cao của hơn một thập kỷ kỹ thuật bố trí CSS, được thử và thử nghiệm bởi hàng triệu người. Nhưng, nó cũng được tạo ra mà không có nhiều tính năng và kỹ thuật CSS hiện đại mà chúng tôi thấy trong các trình duyệt như lưới CSS mới.
Head lên hệ thống lưới CSS của chúng tôi là thử nghiệm và chọn tham gia kể từ v5.1.0! Chúng tôi đã đưa nó vào tài liệu của chúng tôi CSS CSS để chứng minh nó cho bạn, nhưng nó bị vô hiệu hóa theo mặc định. Hãy đọc để tìm hiểu làm thế nào để kích hoạt nó trong các dự án của bạn. We included it in our documentation’s CSS to demonstrate it for you, but it’s disabled by default. Keep reading to learn how to enable it in your projects.
Làm thế nào nó hoạt động
Với Bootstrap 5, chúng tôi đã thêm tùy chọn để kích hoạt một hệ thống lưới riêng biệt mà được xây dựng trên lưới CSS, nhưng với một vòng xoắn bootstrap. Bạn vẫn nhận được các lớp học bạn có thể áp dụng theo ý thích để xây dựng bố cục đáp ứng, nhưng với một cách tiếp cận khác dưới mui xe.
CSS Grid là chọn tham gia. Vô hiệu hóa hệ thống lưới mặc định bằng cách đặt
5 và bật lưới CSS bằng cách đặt.g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4
6. Sau đó, biên dịch lại sass của bạn. Disable the default grid system by setting.g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4
5 and enable the CSS Grid by setting.g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4
6. Then, recompile your Sass..g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4
Thay thế các trường hợp của
7 bằng.g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4
8. Lớp.g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4
8 đặt.g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4
0 và tạo ra một.g-col-6 .g-col-6
1 mà bạn xây dựng với HTML của mình. The.g-col-6 .g-col-6
8 class sets.g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4
0 and creates a.g-col-6 .g-col-6
1 that you build on with your HTML..g-col-6 .g-col-6
Thay thế các lớp
2 bằng các lớp.g-col-6 .g-col-6
3. Điều này là do các cột lưới CSS của chúng tôi sử dụng thuộc tính.g-col-6 .g-col-6
4 thay vì.g-col-6 .g-col-6
5. This is because our CSS Grid columns use the.g-col-6 .g-col-6
4 property instead of.g-col-6 .g-col-6
5..g-col-6 .g-col-6
Các cột và kích thước máng xối được đặt thông qua các biến CSS. Đặt chúng trên cha mẹ
8 và tùy chỉnh theo cách bạn muốn, nội tuyến hoặc trong bảng kiểu, với.g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4
7 và.g-col-6 .g-col-6
8. Set these on the parent.g-col-6 .g-col-6
8 and customize however you want, inline or in a stylesheet, with.g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4
7 and.g-col-6 .g-col-6
8..g-col-6 .g-col-6
Trong tương lai, Bootstrap có thể sẽ chuyển sang giải pháp lai vì thuộc tính
.g-col-6
.g-col-6
9 đã đạt được hỗ trợ trình duyệt gần như đầy đủ cho Flexbox.Sự khác biệt chính
So với hệ thống lưới mặc định:
Các tiện ích flex don don ảnh hưởng đến các cột lưới CSS theo cùng một cách.
Khoảng cách thay thế máng xối. Thuộc tính
9 thay thế ngang.g-col-6 .g-col-6
1 từ hệ thống lưới mặc định của chúng tôi và các chức năng giống như.g-col-6 .g-col-6 .g-col-6 .g-col-6
2..g-col-6 .g-col-6 .g-col-6 .g-col-6
Như vậy, không giống như
7,.g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4
8 không có lề âm và các tiện ích ký quỹ không thể được sử dụng để thay đổi máng xối lưới. Khoảng cách lưới được áp dụng theo chiều ngang và chiều dọc theo mặc định. Xem phần Tùy chỉnh để biết thêm chi tiết..g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4
Các kiểu nội tuyến và tùy chỉnh nên được xem là thay thế cho các lớp sửa đổi [ví dụ:
5 so với.g-col-6 .g-col-6 .g-col-6 .g-col-6
6]..g-col-6 .g-col-6 .g-col-6 .g-col-6
Nesting hoạt động tương tự, nhưng có thể yêu cầu bạn đặt lại cột của mình trên mỗi trường hợp của một
8 lồng nhau. Xem phần làm tổ để biết chi tiết..g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4
Ví dụ
Ba cột
Ba cột có chiều rộng bằng nhau trên tất cả các chế độ xem và thiết bị có thể được tạo bằng cách sử dụng các lớp
.g-col-6
.g-col-6
.g-col-6
.g-col-6
8. Thêm các lớp đáp ứng để thay đổi bố cục theo kích thước chế độ xem..g-col-4
.g-col-4
.g-col-4
.g-col-4
.g-col-4
.g-col-4
Phản ứng nhanh nhẹn
Sử dụng các lớp đáp ứng để điều chỉnh bố cục của bạn trên các chế độ xem. Ở đây chúng tôi bắt đầu với hai cột trên các khung nhìn hẹp nhất, và sau đó phát triển thành ba cột trên các khung nhìn trung bình trở lên.
.G-COL-6 .G-COL-MD-4
.G-COL-6 .G-COL-MD-4
.G-COL-6 .G-COL-MD-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
So sánh điều đó với bố cục hai cột này ở tất cả các chế độ xem.
.g-col-6
.g-col-6
Gói
Các mặt hàng lưới tự động quấn vào dòng tiếp theo khi không có phòng nào theo chiều ngang. Lưu ý rằng
.g-col-6
.g-col-6
9 áp dụng cho các khoảng cách ngang và dọc giữa các mục lưới..g-col-6
.g-col-6
.g-col-6
.g-col-6
.g-col-6
.g-col-6
.g-col-6
.g-col-6
Bắt đầu
Các lớp bắt đầu nhằm thay thế các lớp bù lưới mặc định của chúng tôi, nhưng chúng không hoàn toàn giống nhau. CSS Grid tạo ra một mẫu lưới thông qua các kiểu nói với các trình duyệt để bắt đầu tại cột này và kết thúc tại cột này. Những thuộc tính đó là
.g-col-3 .g-start-2
.g-col-4 .g-start-6
0 và
.g-col-3 .g-start-2
.g-col-4 .g-start-6
1. Các lớp học bắt đầu là tốc ký cho trước đây. Ghép chúng với các lớp cột với kích thước và căn chỉnh các cột của bạn theo cách bạn cần. Các lớp bắt đầu bắt đầu tại
.g-col-3 .g-start-2
.g-col-4 .g-start-6
2 vì
.g-col-3 .g-start-2
.g-col-4 .g-start-6
3 là một giá trị không hợp lệ cho các thuộc tính này..G-COL-3 .G-START-2
.G-COL-4 .G-START-6
.g-col-3 .g-start-2
.g-col-4 .g-start-6
Cột tự động
Khi không có lớp nào trên các mục lưới [trẻ em ngay lập tức của
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
8], mỗi mục lưới sẽ tự động được kích thước thành một cột.
1
1
1
1
1
1
1
1
1
1
1
1
Hành vi này có thể được trộn lẫn với các lớp cột lưới.
.g-col-6
1
1
1
1
1
1
Làm tổ
Tương tự như hệ thống lưới mặc định của chúng tôi, CSS Grid của chúng tôi cho phép làm tổ dễ dàng
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
8s. Tuy nhiên, không giống như mặc định, lưới này kế thừa các thay đổi trong các hàng, cột và khoảng cách. Xem xét ví dụ dưới đây:- Chúng tôi ghi đè số lượng các cột mặc định với biến CSS cục bộ:
6..g-col-3 .g-start-2 .g-col-4 .g-start-6
- Trong cột tự động đầu tiên, số cột được kế thừa và mỗi cột là một phần ba chiều rộng có sẵn.
- Trong cột tự động thứ hai, chúng tôi đã đặt lại số lượng cột trên
8 đến 12 [mặc định của chúng tôi]..g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4 .g-col-6 .g-col-md-4
- Cột tự động thứ ba không có nội dung lồng nhau.
Trong thực tế, điều này cho phép các bố cục phức tạp và tùy chỉnh hơn khi so sánh với hệ thống lưới mặc định của chúng tôi.
First auto-column
Auto-column
Auto-column
Second auto-column
6 of 12
4 of 12
2 of 12
Third auto-column
Tùy chỉnh
Tùy chỉnh số lượng cột, số lượng hàng và chiều rộng của các khoảng trống với các biến CSS cục bộ.
8 | 2 | Số lượng hàng trong mẫu lưới của bạn |
7 | 1 | Số lượng cột trong mẫu lưới của bạn |
8 | 3 | Kích thước của khoảng cách giữa các cột [dọc và ngang] |
Các biến CSS này không có giá trị mặc định; Thay vào đó, chúng áp dụng các giá trị dự phòng được sử dụng cho đến khi một trường hợp cục bộ được cung cấp. Ví dụ: chúng tôi sử dụng
1
1
1
1
1
1
1
1
1
1
1
1
4 cho các hàng lưới CSS của chúng tôi, điều này bỏ qua
.g-col-3 .g-start-2
.g-col-4 .g-start-6
8 vì điều đó đã được đặt ở bất cứ đâu. Khi đó, trường hợp
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
8 sẽ sử dụng giá trị đó thay vì giá trị dự phòng là
.g-col-3 .g-start-2
.g-col-4 .g-start-6
2.Không có lớp lưới
Các yếu tố trẻ em ngay lập tức của
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
8 là các mục lưới, vì vậy chúng sẽ có kích thước mà không cần thêm một lớp
1
1
1
1
1
1
1
1
1
1
1
1
9.Auto-column
Auto-column
Auto-column
Auto-column
Auto-column
Auto-column
Cột và khoảng trống
Điều chỉnh số lượng cột và khoảng cách.
.g-col-2
.g-col-2
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
0Thêm hàng
Thêm nhiều hàng và thay đổi vị trí của các cột:
Auto-column
Auto-column
Auto-column
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
1Khoảng trống
Chỉ thay đổi các khoảng cách dọc bằng cách sửa đổi
.g-col-6
1
1
1
1
1
1
0. Lưu ý rằng chúng tôi sử dụng
.g-col-6
.g-col-6
9 trên
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
8s, nhưng
.g-col-6
1
1
1
1
1
1
0 và
.g-col-6
1
1
1
1
1
1
4 có thể được sửa đổi khi cần thiết..g-col-6
.g-col-6
.g-col-6
.g-col-6
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
2Do đó, bạn có thể có các
.g-col-6
.g-col-6
9 dọc và ngang khác nhau, có thể lấy một giá trị duy nhất [tất cả các cạnh] hoặc một cặp giá trị [dọc và ngang]. Điều này có thể được áp dụng với một kiểu nội tuyến cho
.g-col-6
.g-col-6
9 hoặc với biến
.g-col-6
.g-col-6
8 CSS của chúng tôi..g-col-6
.g-col-6
.g-col-6
.g-col-6
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
3Sass
Một hạn chế của lưới CSS là các lớp mặc định của chúng tôi vẫn được tạo bởi hai biến SASS,
.g-col-6
1
1
1
1
1
1
8 và
.g-col-6
1
1
1
1
1
1
9. Điều này có hiệu quả xác định trước số lượng các lớp được tạo trong CSS đã biên dịch của chúng tôi. Bạn có hai lựa chọn ở đây:- Sửa đổi các biến SASS mặc định đó và biên dịch lại CSS của bạn.
- Sử dụng các kiểu nội tuyến hoặc tùy chỉnh để tăng cường các lớp được cung cấp.
Ví dụ: bạn có thể tăng số lượng cột và thay đổi kích thước khoảng cách, sau đó kích thước các cột của bạn, với sự kết hợp của các kiểu nội tuyến và các lớp cột lưới CSS được xác định trước [ví dụ:
.g-col-6
.g-col-6
.g-col-6
.g-col-6
8].
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
4