[Bootstrap] Phần 3: Hệ thống lưới nâng cao

Trong phần này, các bạn tiếp tục tìm hiểu các lớp lưới khác trong Bootstrap để thực hiện việc phân vùng cho các giao diện phức tạp hơn.

Bảng thông số lưới trong Bootstrap

Cơ chế xếp chồng cho đến theo chiều ngang (Stacked-to-horizontal)
Trong ví dụ sau, chúng ta sẽ tạo ra 1 hệ thống lưới mà giao diện sẽ hiển thị theo kiểu xếp chồng lên nhau ở màn hình kích thước nhỏ (như mobile/tablet) và giao diện trở thành kiểu ngang ở màn hình có kích thước lớn (như ở máy tính laptop/desktop).

<div class="container">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Giao diện hiển thị trên thiết bị Tablet và thiết bị điện thoại di động như sau:

Trên các thiết bị có kích thước màn hình lớn như Laptop/Desktop thì giao diện hiển thị như sau:

Như vậy chúng ta thấy rất rõ, giao diện khi sử dụng Bootstrap sẽ thay đổi từ dạng xếp chồng (stack) ở các thiết bị mobile/phone cho đến dạng giao diện xếp theo chiều ngang (horizontal) ở các thiết bị Desktop/Laptop. Cơ chế giúp giao diện web được hiển thị trên các màn hình giao diện khác nhau với bố cục phù hợp, tránh tình trạng giao diện bị méo, bể. Đây là 1 trong các ưu điểm của Bootstrap.

Hiển thị giao diện trên các kích thước màn hình khác nhau
Trong phần này chúng ta sẽ tìm hiểu cách hiển thị một giao diện web trên các kích thước màn hình khác nhau và có thể điều chỉnh được các kích thước này.

<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 đó có nghĩa 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 col-sm-3 và 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 col-md-4 và 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 col-lg-6 và 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.

Lớp offset

Để di chuyển các cột sang phải thì chúng ta có thể dùng các lớp dạng như .col--offset-, trong đó * đầu tiên là kiểu màn hình xs, sm, md, lg và * thứ hai là số cột được di dời sang trái.

Chúng ta có ví dụ 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>

Trong ví dụ trên, vùng 2 sẽ cách 1 khoảng trắng với vùng 1 là 3 như trong hình:

Như dùng các lớp offset, chúng ta có thể giãn khoảng cách vùng về phía bên trái, lưu ý làm sao để tổng các vùng vẫn là 12.

Trong bài này, các bạn đã nắm được các chi tiết thông số thuộc tính của lưới ở các kích thước màn hình, cơ chế Stacked-to-horizontal, cách khai báo hiển thị giao diện ở các kích thước màn hình và sử dụng các lớp offset. Ngoài ra để thiết kế lưới hiệu quả, còn nhiều phương pháp nữa, các bạn sẽ tự tìm hiểu trong quá trình thiết kế.