Ví dụ về lưới Bootstrap
Các bố cục lưới cơ bản giúp bạn làm quen với việc xây dựng trong hệ thống lưới Bootstrap.
Trong những ví dụ này, .themed-grid-col
lớp được thêm vào các cột để thêm một số chủ đề. Đây không phải là một lớp có sẵn trong Bootstrap theo mặc định.
Năm tầng lưới
Có năm cấp cho hệ thống lưới Bootstrap, một cấp cho mỗi phạm vi thiết bị mà chúng tôi hỗ trợ. Mỗi cấp bắt đầu ở kích thước cửa sổ xem tối thiểu và tự động áp dụng cho các thiết bị lớn hơn trừ khi bị ghi đè.
Ba cột bằng nhau
Nhận ba cột có chiều rộng bằng nhau bắt đầu từ máy tính để bàn và chia tỷ lệ đến máy tính để bàn lớn . Trên thiết bị di động, máy tính bảng trở xuống, các cột sẽ tự động xếp chồng lên nhau.
Ba cột bằng nhau thay thế
Bằng cách sử dụng các .row-cols-*
lớp, bạn có thể dễ dàng tạo lưới với các cột bằng nhau.
.col
đứa bé của
.row-cols-md-3
.col
đứa bé của
.row-cols-md-3
.col
đứa bé của
.row-cols-md-3
Ba cột không bằng nhau
Lấy ba cột bắt đầu từ máy tính để bàn và chia tỷ lệ đến máy tính để bàn lớn với nhiều chiều rộng khác nhau. Hãy nhớ rằng, các cột lưới phải thêm tối đa mười hai cho một khối ngang. Hơn thế nữa, và các cột bắt đầu xếp chồng bất kể khung nhìn.
Hai cột
Lấy hai cột bắt đầu từ máy tính để bàn và mở rộng đến máy tính để bàn lớn .
Chiều rộng đầy đủ, cột đơn
Không có lớp lưới nào là cần thiết cho các phần tử có chiều rộng đầy đủ.
Hai cột với hai cột lồng nhau
Theo tài liệu, việc lồng rất dễ dàng — chỉ cần đặt một hàng cột trong một cột hiện có. Điều này cung cấp cho bạn hai cột bắt đầu từ máy tính để bàn và mở rộng đến máy tính để bàn lớn , với hai cột khác (chiều rộng bằng nhau) trong cột lớn hơn.
Ở kích thước thiết bị di động, máy tính bảng trở xuống, các cột này và các cột lồng nhau của chúng sẽ xếp chồng lên nhau.
Hỗn hợp: điện thoại di động và máy tính để bàn
Hệ thống lưới Bootstrap v4 có năm lớp lớp: xs (cực nhỏ, mã lớp này không được sử dụng), sm (nhỏ), md (vừa), lg (lớn) và xl (cực lớn). Bạn có thể sử dụng gần như bất kỳ sự kết hợp nào của các lớp này để tạo ra các bố cục năng động và linh hoạt hơn.
Mỗi tầng của các lớp sẽ mở rộng quy mô, có nghĩa là nếu bạn định đặt cùng độ rộng cho md, lg và xl, bạn chỉ cần chỉ định md.
Hỗn hợp: điện thoại di động, máy tính bảng và máy tính để bàn
Máng xối
Với .gx-*
các lớp, máng xối ngang có thể được điều chỉnh.
.col
có
.gx-4
máng xối
.col
có
.gx-4
máng xối
.col
có
.gx-4
máng xối
.col
có
.gx-4
máng xối
.col
có
.gx-4
máng xối
.col
có
.gx-4
máng xối
Sử dụng các .gy-*
lớp để điều khiển các rãnh dọc.
.col
có
.gy-4
máng xối
.col
có
.gy-4
máng xối
.col
có
.gy-4
máng xối
.col
có
.gy-4
máng xối
.col
có
.gy-4
máng xối
.col
có
.gy-4
máng xối
Với .g-*
các lớp, máng xối theo cả hai hướng có thể được điều chỉnh.
.col
có
.g-3
máng xối
.col
có
.g-3
máng xối
.col
có
.g-3
máng xối
.col
có
.g-3
máng xối
.col
có
.g-3
máng xối
.col
có
.g-3
máng xối
Hộp đựng
Các lớp bổ sung được thêm vào trong Bootstrap v4.4 cho phép các vùng chứa rộng 100% cho đến một điểm ngắt cụ thể. v5 thêm một xxl
điểm ngắt mới.