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.
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 đè.
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.
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.
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 .
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 đủ.
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ệ 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.
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ể.