Phần này chúng ta tìm hiểu một số class:
| breakpoint | sm md lg xl |
| .container | Lớp tạo phần tử chứa layout |
| .row | Lớp tạo hàng của lưới |
| .col | Lớp tạo cột của lưới |
| .col-* | * = [1 - 12], lớp tạo cột có độ rộng cụ thể như .col-1, .col-2 ... hiệu lực cho tất cả các breakpoint |
| .col-{breakpoint}-* | * = [1 - 12] Lớp tạo cột có độ rộng cụ thể như .col-sm-1, .col-lg-2 ... hiệu lực với breakpoint cụ thể |
| .col-{breakpoint}-auto .col-auto | Cột có độ rộng điều chỉnh theo nội dung nó chứa |
| .align-items{-breakpoint}-* | Thiết lập thuộc tính align-items của flexbox |
| .align-content{-breakpoint}-* | Thiết lập thuộc tính justify-content của flexbox |
| .justify-content{-breakpoint}-* | Thiết lập thuộc tính align-content của flexbox |
| .align-self{-breakpoint}-* | Thiết lập thuộc tính align-self của flexbox |
Phần tử chứa để xây dựng bố cục layout - các breakpoint
Trong Bootstrap phần tử gốc cơ bản để xây dựng layout là class container và container-fluid, mục đích của nó là tạo ra vùng chữ nhật để chứa các phần tử khác. Tạo ra một phần tử gốc layout như sau:
Mục đích sử dụng class container để tạo ra một vùng chữ nhật mà chiều rộng của nó thiết lập phụ thuộc vào kích thước màn hình hiện thị.
Màn hình hiện thị tác động đến container được chia thành các loại:
Chủ Đề |