Div container là gì
Phần này chúng ta tìm hiểu một số class: Show
Phần tử chứa để xây dựng bố cục layout - các breakpointTrong 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:
Ví dụ, một phần tử sử dụng container khi ở màn hình có độ rộng 840px, nhìn vào bảng trên nó thuộc md, nó sẽ hiện thị là một cái hộp chữ nhật có độ rộng lớn nhất là 720px (nghĩa là rộng có thể thay đổi từ 0px đến 720px tùy thuộc vào không gian cho phép container mở rộng) Container chia theo các điểm dừng, đó là các breakpoint : sm, md, lg, xl Trong trường hợp sử dụng container-fluid thì hộp layout tạo ra luôn mở rộng tối đa có thể dù trên loại màn hình nào. Hệ thống lưới (grid) trong BootstrapBootstrap sử dụng container và các lớp về dòng (row), cột (colunm) phối hợp với nhau để tạo ra một hệ thống lưới giao diện. Trước tiên cần biết là những phần tử hàng, cột sử dụng kỹ thuật CSS flexbox để xây dựng. Lưới layout được tạo ra từ các hàng bằng cách sử dụng class .row, trong hàng các phần tử con tạo thành cột (hàng) bằng cách sử dụng class có tiền tố là .col-, .col-sm-, .col-md-, .col-lg-, .col-xl- Các lớp này được chia ra với tiền tố như vậy để ám chỉ nó có hiệu lực đối với những màn hình cụ thể như bảng sau:
Chia hàng thành nhiều cột với .colDo .col có thiết lập flex-grow: 1 nên nó được dùng nếu muốn chia một hàng thành nhiều cột (bằng số phần tử sử dụng .col) có độ rộng bằng nhau, ví dụ:
Cột 1
Cột 2
Cột 3
Cột 1 Cột 2 Cột 3 Nếu muốn thiết lập độ rộng riêng cho một cột nào đó thì sử dụng các phần tử từ col-1 ... col-12, ví dụ nếu sử dụng col-6 nó sẽ chiếm 6 phần của hàng (hàng chia làm 12 phần). Ví dụ sau cột số 2 chiếm 6/12 độ rộng hàng, còn lại 6 phần chia đều cho 3 phần tử còn lại
Cột 1
Cột 2 chiếm 6/12 cột
Cột 3
Cột 4
Cột 1 Cột 2 chiếm 6/12 cột Cột 3 Cột 4 Class .col, .col-1 ... .col-12 có hiệu lực đối với tất cả các breakpoint Độ rộng các cột căn cứ theo nội dung của cộtCác phần tử dùng .col như trên do ảnh hưởng của flexbox độ rộng của nó được thiết lập không phụ thuộc vào nội dung nó chứa. Nếu phần tử cột nào đó muốn trở lại điều chỉnh độ rộng theo nội dung thì sử dụng các class col-{breakpoint}-auto: như .col-auto, .col-sm-auto ...
Cột 1
Cột 2, độ rộng theo nội dung
Cột 3
Cột 4
Cột 1 Cột 2, độ rộng theo nội dung Cột 3 Cột 4 Pha trộn nhiều breakpoint cho cộtĐể đảm bảo tính responsive, căn cứ theo tính chất cascading của CSS, một cột có thể sử dụng nhiều loại class, từ đó mà tùy theo loại màn hình mà class nào có hiệu lực. Ví dụ sau, 2 cột khi ở màn hình nhỏ (breakpoint sm) thì độ rộng cột bằng 1/2 độ rộng hàng, nhưng khi ở màn hình độ rộng đó lại là 3/12 độ rộng hàng
Cột 1
Cột 2
Cột 1 Cột 2 Align các cộtDo .row sử dụng kỹ thuật flexbox nên có thể căn chỉnh các cột trong nó căn về phía nào đó mong muốn của hàng giống như trình bày trong phần flexbox Thiết lập ở cấp độ hàng (phần tử sử dụng .row) có các lớp điều chỉnh thuộc tính flexbox:
Cột 1
Cột 2
Cột 1 Cột 2 Align riêng từng cộtCác lớp thiết lập thuộc tính flexbox cho riêng từng cột (phần tử) là:
Cột 1
Cột 2
Cột 3
Cột 1 Cột 2 Cột 3 Ngoài ra xem lại phần CSS flex để áp dụng các thiết lập phức tạp hơn cho lưới Mục lục bài viết Layout cơ bản, các breakpoint container BootstrapLưới layout trong BootstrapChia hàng thành nhiều cột với .colThiết lập độ rộng cột theo nội dungSử dụng pha trộn nhiều breakpointAlign các cộtAlign riêng từng cộtAlign riêng từng cột
ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB
|