Tìm hiểu về hệ thống lưới (grid) gồm các hàng và cột để xây dựng nên giao diện cơ bản, cách tạo hàng, cột, định dạng cột của một layout
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:
<div class="container">
<!--Code HTML-->
</div>
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:
| Chiều rộng màn hình | Độ rộng lớn của container | Ký hiệu nhận biết |
|---|---|---|
| <576px (rất nhỏ) | <576px | xs |
| ≥576px và < 768 (nhỏ) | 540px | sm |
| ≥768px và < 992px (trung bình) | 720px | md |
| ≥992px và < 1200px (lớn) | 960px | lg |
| ≥1200px | 1140px | xl |
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 Bootstrap
Bootstrap 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:
| Màn hình rất nhỏ <576px |
Màn hình nhỏ ≥576px |
Trung bình ≥768px |
Lớn ≥992px |
Rất lớn ≥1200px |
|---|---|---|---|---|
.col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
Một hàng có độ rộng chia làm 12 phần, từ đó mỗi tiền tố có 12 lớp, ví dụ từ .col-sm-1 đến .col-sm-12, nếu sử dụng class .col-sm-2 có nghĩa là cột đó có động rộng chiếu 2/12 của độ rộng cột |
||||
Khoảng cách giữa các cột là 30px (15px mỗi bên), nếu muốn thiết lập về 0 sử dụng thêm lớp . |
||||
Chia hàng thành nhiều cột với .col
Do .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ụ:
<div class="container">
<div class="row">
<div class="col bg-danger">
Cột 1
</div>
<div class="col bg-info">
Cột 2
</div>
<div class="col bg-warning">
Cột 3
</div>
</div>
</div>
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
<div class="container">
<div class="row">
<div class="col bg-danger">
Cột 1
</div>
<div class="col-6 bg-info">
Cột 2 chiếm 6/12 cột
</div>
<div class="col bg-warning">
Cột 3
</div>
<div class="col bg-danger">
Cột 4
</div>
</div>
</div>
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ột
Cá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 ...
<div class="container">
<div class="row">
<div class="col bg-danger">
Cột 1
</div>
<div class="col-auto bg-info">
Cột 2, độ rộng theo nội dung
</div>
<div class="col bg-warning">
Cột 3
</div>
<div class="col bg-danger">
Cột 4
</div>
</div>
</div>
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
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 bg-danger">
Cột 1
</div>
<div class="col-sm-6 col-md-3 bg-primary">
Cột 2
</div>
</div>
</div>
Cột 1
Cột 2
Align các cột
Do .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:
.align-items{-breakpoint}-{start|end|center|baseline|stretch}.align-content{-breakpoint}-{start|end|center|beween|around|stretch}.justify-content{-breakpoint}-{start|end|center|beween|around}
<div class="container">
<div class="row align-items-md-end bg-success" style="height: 100px">
<div class="col-sm-6 col-md-3 bg-danger">
Cột 1
</div>
<div class="col-sm-6 col-md-3 bg-primary">
Cột 2
</div>
</div>
</div>
Cột 1
Cột 2
Align riêng từng cột
Các lớp thiết lập thuộc tính flexbox cho riêng từng cột (phần tử) là:
.align-self{-breakpoint}-{auto|start|end|center|baseline|stretch}
<div class="container">
<div class="row bg-success" style="height: 100px">
<div class="col-sm-6 col-md-3 bg-danger align-self-sm-start">
Cột 1
</div>
<div class="col-sm-6 col-md-3 bg-primary align-self-sm-center">
Cột 2
</div>
<div class="col-sm-6 col-md-3 bg-danger align-self-sm-end">
Cột 3
</div>
</div>
</div>
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
