[Bootstrap căn bản] Bài 3: Hệ thống lưới responsive nâng cao

Như ở bài 2 mình đã giới thiệu cho các bạn biết hệ thống lưới responsive trong bootstrap, các cột, các hàng và cách chia cột trong bootstrap như thế nào. Trong bài hôm nay mình sẽ giới thiệu với các bạn cơ chế xếp chồng của lưới reponsive bootstrap và cách mà bootstrap hiển thị website trên những kích thước màn hình khác nhau nhé.

Cơ chế xếp chồng theo độ rộng màn hình của lưới reponsive

Cơ chế xếp chồng theo độ rộng màn hình tức là lưới reponsive của bootstrap sẽ tự động co giãn và chồng lên nhau tùy theo độ rộng của màn hình. Khi ở màn hình nhỏ thì các cột của website sẽ tự xếp chồng lên nhau hoặc xếp ngang hàng với nhau để hiển thị nội dung website một cách rõ ràng nhất.

Ví dụ sau đây sẽ cho các bạn hiểu rõ hơn như thế nào là chế độ xếp chồng theo độ rộng màn hình.

Ví dụ 1:

Như ở đây mình có hai thẻ class="col-sm-6" một cái màu vàng và một cái màu hồng, hai thẻ đều là class="col-sm-6", chính vì thế nó chia giao diện làm 2 tức là 6 + 6 = 12 (bằng tổng số cột trong bootstrap)

<div class="row">
 <div class="col-sm-6" style="background-color:yellow;">
 <p>Cột nhứ nhất</p>
 </div>
 <div class="col-sm-6" style="background-color:pink;">
 <p>Cột thứ hai</p>
 </div>
</div>

Hãy xem cách mà hai thẻ này hiển thị trên từng loại màn hình như thế nào nhé.

Lưới reponsive bootstrap hiển thị trên Deskop

Lưới reponsive bootstrap hiển thị trên Tablet

Lưới reponsive bootstrap hiển thị trên di động

Đến đây chắc các bạn đã hiểu cơ chế xếp chồng theo độ rộng màn hình của lưới reponsive rồi phải không nào, tức là tùy theo độ rộng màn hình mà những cột của bootstrap sẽ tự động xếp chồng lên nhau để hiểu thị tốt nội dung trên tất cả các loại màn hình.

Hiển thị giao diện trên các kích thước màn hình khác nhau

Phần này chúng ta sẽ tìm hiểu xem cách thức mà bootstrap hiển thị một giao diện web trên các kích thước màn hình khác nhau như thế nào.

Ví dụ 2:

<div class="container">
 <div class="row">
 <div class="col-sm-3 col-md-4 col-lg-6" style="background-color:yellow;">
 <p>Vùng 1
 <br/>Tablet: 25%
 <br/>Desktop: 33.33%
 <br/>Large Desktop: 50%
 </p>
 </div>
 <div class="col-sm-9 col-md-8 col-lg-6" style="background-color:pink;">
 <p>Vùng 2
 <br/>Tablet: 75%
 <br/>Desktop: 66.66%
 <br/>Large Desktop: 50%
 </p>
 </div>
 </div>
</div>

Ở vùng 1, chúng ta khai báo class="col-sm-3 col-md-4 col-lg-6" và vùng 2 chúng ta khai báo class="col-sm-9 col-md-8 col-lg-6" điều này tức là:

Trên giao diện màn hình Tablet thì tỉ lệ giữa vùng 1 và vùng 2 là: 25%/75%, tương ứng class="col-sm-3" và class="col-sm-9"

Trên giao diện màn hình Desktop thì tỉ lệ giữa vùng 1 và vùng 2 là: 33.33%/66.66%, tương ứng class="col-md-4" và class="col-md-8"

Trên giao diện màn hình Desktop có kích thước lớn thì tỉ lệ giữa vùng và vùng 2 là: 50%/50%, tương ứng class="col-lg-6" và class="col-lg-6".

Như vậy, chúng ta có thể khai báo kích thước vùng chi tiết tương ứng với từng kích thước màn hình khác nhau thay vì khai báo chung cho tất cả loại màn hình.

Sử dụng lớp offset

Lớp offset là lớp dùng để di chuyển một cột sang bên phải.

Ví dụ ở đây mình có một cột là class="col-md-3" và class="col-md-6" cả hai cột này cộng lại 3+6 = 9 tức là vẫn còn thiếu 3 cột nữa mới đủ 12. Nhưng mình không muốn thêm một cột class="col-md-3" vào nữa mà mình muốn di chuyển class="col-md-6" sang bên phải 3 cột thì mình sẽ sử dụng lớp offset là class="col-md-offset-3"

Cụ thể ví dụ như sau:
<div class="container">
 <div class="row">
 <div class="col-md-3" style="background-color:yellow;">
 <p>Vùng 1</p>
 </div>
 <div class="col-md-6 col-md-offset-3" style="background-color:pink;">
 <p>Vùng 2</p>
 </div>
 </div>
</div>

Lưu ý: Các bạn phải làm thế nào khi di chuyển cột nhưng tổng các cột trong giao diện vẫn là bằng 12. Như trong ví dụ này là class="col-md-3" + class="col-md-6 col-md-offset-3" tức là 3 + 3 + 6 = 12.

Tổng kết: Trong bài này mình muốn các bạn hiểu rõ và nắm được cách chia lưới reponsive của bootstrap, cách mà lưới bootstrap sắp xếp các cột của mình với từng loại giao diện khác nhau, và chia từng loại giao diện cụ thể. Hiểu dược lớp offset là gì và ứng dụng của nó.

Trong bài tiếp theo mình sẽ nói đến phần hiển thị văn bản trong bootstrap nhé, xin chào và hẹn gặp lại.

Tôi là một freelance, mọi kiến thức mà tôi chia sẻ cho bạn đều là miễn phí!