Sân chơi Flex Bootstrap
Xây dựng bố cục flex Bootstrap 5.3 một cách trực quan và sao chép chính xác các lớp tiện ích — d-flex, justify-content, align-items, order, grow và nhiều hơn nữa.
—
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 đổi breakpoint để xây dựng bố cục responsive.
Giới thiệu về Sân chơi Flex Bootstrap
Bootstrap Flex Playground cho phép bạn xây dựng bố cục flexbox với các lớp tiện ích Bootstrap 5.3 thực sự thay vì CSS thô. Cấu hình vùng chứa — hướng, ngắt dòng, justify-content, align-items, khoảng cách — bằng các điều khiển phân đoạn, nhấp vào bất kỳ mục nào để đặt các tiện ích align-self, order, grow và shrink riêng của nó, và xem bản xem trước trực tiếp sắp xếp lại ngay lập tức.
Bộ chuyển đổi điểm ngắt là điều khiến nó không chỉ là một món đồ chơi: chọn sm, md, lg, xl hoặc xxl và các lớp bạn đặt từ điểm đó sẽ có tiền tố đáp ứng — justify-content-md-between, flex-lg-row — đúng như cách hệ thống mobile-first của Bootstrap áp dụng chúng từ điểm ngắt đó trở lên. Thêm tối đa 12 mục để mô phỏng một thành phần thực tế.
Khi bố cục trông ổn, hãy sao chép HTML đã tạo hoặc chỉ các lớp vùng chứa và dán trực tiếp vào dự án của bạn. Mọi thứ chạy trong trình duyệt của bạn và không có gì được tải lên.
Cách sử dụng Sân chơi Flex Bootstrap
- Đặt các tiện ích vùng chứa — hướng, ngắt dòng, justify-content, align-items và khoảng cách — bằng các điều khiển phân đoạn.
- Thêm hoặc bớt các mục (từ 2 đến 12) để khớp với thành phần thực tế của bạn.
- Nhấp vào một mục để cho nó tiện ích align-self, order hoặc kích thước flex riêng.
- Chuyển đổi điểm ngắt để thêm các biến thể đáp ứng áp dụng từ sm, md, lg, xl hoặc xxl trở lên.
- Kiểm tra bản xem trước trực tiếp, sau đó sao chép HTML đã tạo hoặc các lớp vùng chứa.