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-collớ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 đè.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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.

.col-md-4

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

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.

.col-md-3

.col-md-6

.col-md-3

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 .

.col-md-8

.col-md-4

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.

.col-md-8

.col-md-6

.col-md-4

Hỗn hợp: điện thoại di động và máy tính để bàn

Hệ thống lưới Bootstrap v5 có sáu lớp lớp: xs (cực nhỏ, nội dung lớp này không được sử dụng), sm (nhỏ), md (trung bình), lg (lớn), xl (x-lớn) và xxl (xx -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, xl và xxl, bạn chỉ cần chỉ định md.

.col-md-8

.col-6 .col-md-4

.col-6

Hỗn hợp: điện thoại di động, máy tính bảng và máy tính để bàn

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Máng xối

Với .gx-*các lớp, máng xối ngang có thể được điều chỉnh.

.colcó .gx-4máng xối

Sử dụng các .gy-*lớp để điều khiển các rãnh dọc.

.colcó .gy-4má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.

.colcó .g-3má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 có chiều 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.

.thùng đựng hàng

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-chất lỏng