Trong 2 bài trước chúng ta đã tìm hiểu cơ bản về Grid trong Bootstrap rồi phải không nào, bài học tiếp theo này chúng ta sẽ đi sâu hơn tìm hiểu về Grid Bootstrap 3 nâng cao nhé các bạn.
Bootstrap Grid : Stacked-to-horizontal
Trong ví dụ dưới đây chúng mình sẽ tạo một hệ thống lưới cơ bản mà trong đó các cột được xếp chồng lên nhau trên các thiết bị nhỏ hơn và ngược lại chúng trở thành hệ thống nằm ngang trên các thiết bị lớn hơn.
Ví dụ sau đây cho thấy bố cục hai cột đơn giản "xếp chồng lên nhau", có nghĩa là nó sẽ dẫn đến sự phân chia 50% / 50% trên tất cả các màn hình, ngoại trừ các màn hình nhỏ bổ sung, nó sẽ tự động xếp chồng (100%):
Ví dụ Stacked-to-horizontal
<div class="container"> <h1>Hello World!</h1> <div class="row"> <div class="col-sm-6" style="background-color:yellow;"> <p>col-sm-6</p> </div> <div class="col-sm-6" style="background-color:pink;"> <p>col-sm-6</p> </div> </div> </div>
Kết quả hiển thị như sau:
Với các thiết bị màn hình lớn
Với các thiết bị màn hình nhỏ
Rất rõ ràng giao diện khi sử dụng Bootstrap sẽ thay đổi từ dạng xếp chồng (stack) ở các thiết bị màn hình nhỏ như điện thoại di động cho đến dạng giao diện xếp theo chiều ngang (horizontal) ở các thiết bị máy tính/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ể . Cơ chế này được gọi là cơ chế Responsive và cũng chính là 1 ửu điểm của Bootstrap.
Mẹo: Các số trong các lớp .col-sm-* cho biết div sẽ kéo dài bao nhiêu cột (trong số 12). Vì vậy, .col-sm-1 kéo dài 1 cột, .col-sm-4 kéo dài 4 cột, ..col-sm-6 kéo dài 6 cột, v.v.
Lưu ý: Đảm bảo rằng tổng luôn luôn cộng lại không lớn hơn 12!
Chúng ta có thể biến bất kỳ bố cục có chiều rộng cố định nào thành bố cục có chiều rộng đầy đủ bằng cách thay đổi lớp .container thành .container-chất lỏng:
Ví dụ container-fluid
<div class="container-fluid"> <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>
Khai báo kích thước vùng chi tiết với kích thước màn hình khác nhau
Thay vì khai báo chung cho tất cả các màn hình chúng ta cũng có thể khai báo kích thước vùng chi tiết ứng với từng kích thước màn hình khác nhau.
Xem ví dụ dưới đâ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 trái <br/>Điện thoại: 25% <br/>Máy tính bảng: 33.33% <br/>Máy tính: 50% </p> </div> <div class="col-sm-9 col-md-8 col-lg-6" style="background-color:pink;"> <p>Vùng phải <br/>Điện thoại: 75% <br/>Máy tính bảng: 66.66% <br/>Máy tính: 50% </p> </div> </div> </div>
Ở vùng trái, chúng ta khai báo class=”col-sm-3 col-md-4 col-lg-6″ và vùng phải 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 Điện thoại 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 Máy tính bảng 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 Máy tính 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
![]()
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.
Xét ví dụ sau:
<div class="container"> <div class="row"> <div class="col-md-4" style="background-color:yellow;"> <p>Vùng 1</p> </div> <div class="col-md-6 col-md-offset-2" style="background-color:magenta;"> <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à 2 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.
clearfix
Một số tình huống một cột không đủ không gian để hiển thị nội dung thì bố cục sẽ bị phá vỡ để ngăn chặn điều này, bootstrap trợ giúp thêm một div với class là clearfix. Nó sẽ buộc tất cả các cột sau khi nó di chuyển đến một dòng mới.
Ví dụ:
<div class="container">
<div class="row">
<div class="col-xs-6 tall-column">A column much taller than the rest.</div>
<div class="col-xs-6"></div>
<div class="clearfix"></div>
<div class="col-xs-6"></div>
</div>
</div>Lời kết:
Vậy là chúng ta đã từng bước tìm hiểu xong cơ chế xếp chồng lên nhau theo chiều ngang (Stacked-to-horizontal), cách dùng Offset để căn cột, cách dùng clearfix trong Bootstrap 3 rồi đấy. Còn 1 số kiến thức về Grid trong Bootstrap nữa nhưng mình sẽ không trình bày hết ở đây mà chúng ta sẽ lồng vào các bài học sau. Chúc các bạn học tốt.
