Bootstrap Grid Playground
Dựng bố cục lưới Bootstrap 5.3 responsive một cách trực quan và sao chép chính xác các lớp — row, col, lề trái, thứ tự, khoảng cách máng và căn chỉnh.
—
Mọi thứ chạy trong trình duyệt của bạn — không có gì được tải lên.
Các lớp bạn đặt sẽ áp dụng từ breakpoint này trở lên. Chuyển breakpoint để dựng bố cục responsive.
Giới thiệu về Bootstrap Grid Playground
Bootstrap Grid Playground xây dựng bố cục hàng-và-cột đáp ứng với hệ thống lưới Bootstrap 5.3 thực sự. Thêm tối đa 12 cột vào một hàng, nhấp vào bất kỳ cột nào để đặt chiều rộng, độ lệch và thứ tự của nó, và điều chỉnh khoảng cách và căn chỉnh trên hàng — bản xem trước và mã đánh dấu được tạo ra cập nhật trực tiếp với mỗi thay đổi.
Vì lưới Bootstrap là mobile-first, bộ chuyển đổi điểm ngắt là trung tâm: đặt một cột thành col-6 ở mức cơ bản và col-md-4 tại md, và bạn đã xây dựng mẫu hình xếp chồng trên di động, ba cột trên desktop kinh điển mà không cần viết một dòng mã nào. Các lớp offset, order và gutter đều nhận các tiền tố đáp ứng như nhau.
Đầu ra là HTML sạch sẽ để sao chép-dán — một div hàng với các cột con của nó và chính xác các lớp bạn đã cấu hình. Sao chép toàn bộ đoạn mã hoặc chỉ các lớp hàng; mọi thứ chạy cục bộ trong trình duyệt của bạn.
Cách sử dụng Bootstrap Grid Playground
- Thêm cột vào hàng — tối đa 12 — và nhấp vào một cột để chọn nó.
- Đặt độ rộng, độ lệch và thứ tự của cột đã chọn cho điểm ngắt hiện tại.
- Chuyển đổi điểm ngắt (từ sm đến xxl) để xác định cách bố cục sắp xếp lại trên màn hình lớn hơn.
- Điều chỉnh khoảng cách của hàng và các tiện ích căn chỉnh của nó.
- Xem lại bản xem trước trực tiếp, sau đó sao chép HTML đã tạo hoặc các lớp hàng.