Hệ thống lưới Bootstrap 4
Hệ thống lưới Bootstrap 4
Hệ thống lưới của Bootstrap cho phép tối đa 12 cột trên trang.
Nếu không muốn sử dụng riêng lẻ cả 12 cột, bạn có thể nhóm các cột lại với nhau để tạo cột rộng hơn:
| nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 | nhịp 1 |
| nhịp 4 | nhịp 4 | nhịp 4 | |||||||||
| nhịp 4 | nhịp 8 | ||||||||||
| nhịp 6 | nhịp 6 | ||||||||||
| nhịp 12 | |||||||||||
Hệ thống lưới của Bootstrap phản hồi nhanh và các cột sẽ sắp xếp lại tùy theo kích thước màn hình: Trên màn hình lớn, nội dung được sắp xếp thành ba cột có thể trông đẹp hơn, nhưng trên màn hình nhỏ sẽ tốt hơn nếu các mục nội dung được xếp chồng lên nhau chồng lên nhau.
Lớp lưới
Hệ thống lưới Bootstrap 4 có năm lớp:
-
.col-(thiết bị cực nhỏ - chiều rộng màn hình nhỏ hơn 576px) -
.col-sm-(thiết bị nhỏ - chiều rộng màn hình bằng hoặc lớn hơn 576px) -
.col-md-(thiết bị trung bình - chiều rộng màn hình bằng hoặc lớn hơn 768px) -
.col-lg-(thiết bị lớn - chiều rộng màn hình bằng hoặc lớn hơn 992px) -
.col-xl-(thiết bị xlarge - chiều rộng màn hình bằng hoặc lớn hơn 1200px)
Các lớp trên có thể được kết hợp để tạo ra bố cục năng động và linh hoạt hơn.
Mẹo: Mỗi lớp sẽ tăng quy mô, vì vậy nếu bạn muốn đặt cùng độ rộng cho sm và md , bạn chỉ cần chỉ định sm .
Quy tắc hệ thống lưới
Một số quy tắc hệ thống lưới Bootstrap 4:
- Các hàng phải được đặt trong
.container(có chiều rộng cố định) hoặc.container-fluid(toàn bộ chiều rộng) để căn chỉnh và đệm phù hợp - Sử dụng hàng để tạo nhóm cột ngang
- Nội dung phải được đặt trong các cột và chỉ các cột mới có thể là con ngay lập tức của hàng
- Các lớp được xác định trước như
.rowvà.col-sm-4có sẵn để nhanh chóng tạo bố cục lưới - Các cột tạo ra các khoảng trống (khoảng trống giữa nội dung các cột) thông qua phần đệm. Phần đệm đó được bù theo hàng cho cột đầu tiên và cột cuối cùng thông qua lề âm trên
.rows - Các cột lưới được tạo bằng cách chỉ định số lượng 12 cột có sẵn mà bạn muốn mở rộng. Ví dụ: ba cột bằng nhau sẽ sử dụng ba
.col-sm-4 - Độ rộng cột được tính theo tỷ lệ phần trăm, vì vậy chúng luôn linh hoạt và có kích thước tương ứng với phần tử gốc của chúng
- Sự khác biệt lớn nhất giữa Bootstrap 3 và Bootstrap 4 là Bootstrap 4 hiện sử dụng flexbox, thay vì float. Một lợi thế lớn của flexbox là các cột lưới không có chiều rộng được chỉ định sẽ tự động bố cục thành "các cột có chiều rộng bằng nhau" (và chiều cao bằng nhau). Ví dụ: Ba phần tử có
.col-smmỗi phần tử sẽ tự động rộng 33,33% tính từ điểm dừng nhỏ trở lên. Mẹo: Nếu bạn muốn tìm hiểu thêm về Flexbox, bạn có thể đọc Hướng dẫn CSS Flexbox của chúng tôi.
Lưu ý rằng Flexbox không được hỗ trợ trong IE9 và các phiên bản cũ hơn.
Nếu bạn yêu cầu hỗ trợ IE8-9, hãy sử dụng Bootstrap 3. Đây là phiên bản ổn định nhất của Bootstrap và vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu. Tuy nhiên, sẽ không có tính năng mới nào được thêm vào nó.
Cấu trúc cơ bản của lưới Bootstrap 4
Sau đây là cấu trúc cơ bản của lưới Bootstrap 4:
<!-- Control the column width, and how they should appear on different
devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div> Hãy tự mình thử » Ví dụ đầu tiên: tạo một hàng ( <div class="row"> ). Sau đó, thêm số cột mong muốn (thẻ có lớp .col-*-* thích hợp). Ngôi sao đầu tiên (*) biểu thị mức độ phản hồi: sm, md, lg hoặc xl, trong khi ngôi sao thứ hai đại diện cho một số, tổng này phải luôn cộng tối đa 12 cho mỗi hàng.
Ví dụ thứ hai: thay vì thêm một số vào mỗi col , hãy để bootstrap xử lý bố cục để tạo các cột có chiều rộng bằng nhau: hai phần tử "col" = 50% chiều rộng cho mỗi cột. ba cột = 33,33% chiều rộng cho mỗi cột. bốn cols = 25% chiều rộng, v.v. Bạn cũng có thể sử dụng .col-sm|md|lg|xl để làm cho các cột phản hồi nhanh.
Tùy chọn lưới
Bảng sau đây tóm tắt cách hệ thống lưới Bootstrap 4 hoạt động trên các kích thước màn hình khác nhau:
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes |
Ví dụ
Các chương tiếp theo trình bày các ví dụ về hệ thống lưới cho các thiết bị và độ rộng màn hình khác nhau:
- Xếp chồng theo chiều ngang
- Bố cục cực nhỏ
- Thiết bị nhỏ
- Thiết bị trung bình
- Thiết bị lớn
- Thiết bị cực lớn
- Thêm ví dụ về lưới
