Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Grid System Trong Bootstrap(Phần 2)

Grid System Trong Bootstrap(Phần 2)


Ngày 25 Tháng 3 Năm 2020

Sử Dụng Grid System Trong Bootstrap

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu tiếp phần hệ thống lưới trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Cách lồng các dòng và cột lại với nhau:

Hệ thống lưới(Grid System) không chỉ giúp chúng ta phân chia các dòng theo chiều ngang thành các cột mà còn cho phép chúng ta chia các cột theo chiều dọc bằng cách hỗ trợ các hàng lồng vào nhau. Hãy xem ví dụ sau đây để hiểu rõ hơn nhé:

col-md-4
col-md-6
col-md-6
col-md-4
col-md-6
col-md-6
col-md-4
col-md-6
col-md-6

Ở ví dụ trên thì mình sẽ chia dòng thành 3 phần bằng nhau với class là col-md-4. Và trong mỗi cột col-md-4 mình sẽ tiếp tục xem nó là một dòng và chia nhỏ nó tiếp thành hai cột con là col-md-6. Vậy trong hệ thống lưới chúng ta sẽ luôn chia được một cột thành nhiều cột nhỏ hơn tùy vào mục đích sử dụng của mình. Việc này giúp chúng ta có thể áp dụng linh hoạt hệ thống lưới để hiển thị nội dung theo ý muốn của mình cũng như tạo sự đồng nhất cho trang web.

See the Pen nesting row by haycuoilennao19 (@haycuoilennao19) on CodePen.

Trên là đoạn code của ví dụ nhé. Các bạn nhớ chuyển sang chế độ xem 0.5x để nhìn thấy kết quả nha.

Hiển thị nội dung theo từng màn hình khác nhau:

Như bài trước tới giờ thì các bạn chỉ chia một dòng thành các cột và không quan tâm đến độ rộng của màn hình. Thì phần này chúng ta sẽ tìm hiểu cách chia dòng thành các cột khác nhau dựa theo độ rộng của màn hình bằng cách gọi các class là .col-*, col-sm-*, col-md-*, col-lg-*, col-xl-* cho từng màn hình thiết bị. Để nắm rõ các bạn xem bảng sau đây nhé:

Loại màn hìnhCách gọi CSSClass trong Bootstrap 4
Màn hình siêu nhỏ@media (max-width: 576px) { ... }.col-
Điện thoại@media (min-width: 576px) { ... }.col-sm-
Máy tính bảng@media (min-width: 768px) { ... }.col-md-
Desktop@media (min-width: 992px) { ... }.col-lg-
Desktop lớn@media (min-width: 1200px) { ... }.col-xl-

Bước tiếp theo là các bạn sẽ chia dòng thành các cột và gọi kết hợp các class ở trên lại với nhau cho tất các cột ở trong dòng. Ví dụ như mình muốn một dòng được chia thành 3 cột ở màn hình desktop, 2 cột ở màn hình máy tính bảng, 1 cột ở màn hình điện thoại thì ta sẽ gọi như sau:
<div class="col-lg-4 col-md-6 col-sm-12">
Vậy tại sao mình có những con số trong class ở trên?

  • Ví dụ màn hình desktop: Mình muốn 3 cột thì mình sẽ lấy 12 / 3 = 4 => col-lg-4.
  • Ví dụ màn hình máy tính bảng: Mình muốn 2 cột thì mình sẽ lấy 12 / 2 = 6 => col-md-6.
  • Ví dụ màn hình điện thoại: Mình muốn 1 cột thì mình sẽ lấy 12 / 1 = 12 => col-md-12.

Từ đây mình sẽ rút ra được công thức chung là: (Do mình tự nghĩ nên các bạn có thể theo hoặc không nhé)

col + màn hình(sm,md,lg,xl,không dùng) + (tỉ lệ cột trong dòng= 12/ số cột mong muốn)

Mình có lưu ý nho nhỏ là các bạn khi chia cột ở màn hình điện thoại mà không chia ở màn hình máy tính bảng, desktop... như <div class="col-sm-4">. Thì nó cũng sẽ áp dụng cách chia cột đó cho các màn hình lớn hơn nó.

Bây giờ các bạn xem ví dụ để nắm rõ hơn nhé:

See the Pen divide column screen by haycuoilennao19 (@haycuoilennao19) on CodePen.

Các bạn nhấn vào chế độ xem 1x, 0.5x, 0.25x để thấy sự thay đổi nhé. Nếu chịu khó các bạn có thể copy đoạn code về và ghép vào file HTML của mình(Nhưng phải có botstrap 4 nhé) sau đó chỉnh độ rộng của trình duyệt thì sẽ thấy được kết quả cho từng màn hình rõ hơn.

Vậy có thể chia dòng thành các cột với độ rộng tùy vào màn hình mà không cần kết hợp nhiều class ở trên không?

Bootstrap có cung cấp cho chúng ta một class gọi là .col giúp tự động điều chỉnh độ rộng của từng cột trong dòng phù hợp với màn hình hiện tại. Để nắm rõ hơn các bạn xem ví dụ sau đây nhé:

See the Pen divide column col by haycuoilennao19 (@haycuoilennao19) on CodePen.

Xác định vị trí cột trong dòng:

Thông thường chúng ta thấy thì dòng được căn trái giống như chữ vậy. Phần này mình muốn giới thiệu đến các bạn điều chỉnh được vị trí của các cột ở trong dòng bằng thuộc tính justify-content-*.

  • * = start => Căn trái
  • * = center => Chính giữa
  • * = end => Căn phải

Để nắm rõ hơn các bạn xem ví dụ sau đây nhé:

Chính giữa dòng
Chính giữa dòng
Căn trái
Căn trái
Căn phải
Căn phải

See the Pen alignment by haycuoilennao19 (@haycuoilennao19) on CodePen.

Chúng ta cũng có thể canh vị trí của các cột theo chiều dọc của dòng bằng thuộc tính là align-self-*.

  • * = start =>Nằm trên cùng
  • * = center => Nằm giữa
  • * = end => Nằm dưới cùng

Để nắm rõ hơn các bạn xem ví dụ sau đây nhé:

Vị trí trên cùng trong hàng
Vị trí chính giữa trong hàng
Vị trí dưới cùng trong hàng

Vậy có thể vị trí các cột trong dòng theo cách khác không?

Đối với trường hợp này các bạn có thể sử dụng thuộc tính .offset-màn hình-Số cột. Nó cho phép bạn áp dụng trên từng loại màn hình khác nhau và tạo ra margin-left với giá trị cột mà chúng ta gọi. Ví dụ: ta gọi là offset-md-4 nghĩa là trên màn hình máy tính bảng hãy tạo ra một margin-left bằng độ rộng của 4 cột. Để dễ hình dung các bạn xem ví dụ nhé:

Cột 1
Cột 2 với với offset-md-4
Cột 1 với offset-md-3
Cột 2 với với offset-md-3

See the Pen alignment other by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu muốn thay đổi vị trí của các cột trong dòng ở từng màn hình khác nhau thì phải làm sao?

Bootstrap 4 cung cấp cho chúng ta một class có tên là .order giúp chúng ta sắp xếp vị trị của các cột mà không cần phải tuân theo cột đi từ trên xuống trong file HTML. Để hiểu rõ hơn các bạn hãy xem ví dụ sau đây nhé:

Sắp xếp cột

Cột 1
Cột 2
Cột 3
Cột 4

See the Pen Arrange Column by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp các nắm được về hệ thống lưới trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!