Tổng quan
Bootstrap là gì thì đến bây giờ chắc bạn đã quá rõ về nó rồi đúng không. Hiện nay phiên bản mới nhất của bootstrap chính là bootstrap 4, đi kèm với nó là tiện ích được sử dụng nhiều nhất ở phiên bản này là hệ thống lưới grid layout.
Grid Classes
Hệ thống lưới – grid system ở phiên bản bootstrap 4 đã bổ sung thêm 1 class mới là: .col-xl-12 hoặc .col-xl-
- col- : sử dụng cho thiết bị có độ rộng màn hình < 576px
- col-sm- : sử dụng cho thiết bị có độ rộng màn hình từ 576px – 767px
- col-md- : sử dụng cho thiết bị có độ rộng màn hình từ 768px – 991px
- col-lg- : sử dụng cho thiết bị có độ rộng màn hình từ 992px – 1199px
- col-xl – : sử dụng cho thiết bị có độ rộng màn hình >= 1200px
Grid system Rules
Sự khác nhau nổi bật nhất giữa phiên bản bootstrap 3 và 4 đó chính là bootstrap 4 đã sử dụng flexbox thay chế cho float. Ưu điểm lớn của flexbox đó chính là các cột (columns) sẽ không được chỉ định chiều rộng và nó sẽ tự động bố trí chiều rộng bằng nhau và chiều cao bằng nhau.
VD: Với 3 cột có class là: .col-sm thì nó sẽ tự động có chiều rộng là 33,33%.
Structure Basic
Cấu trúc cơ bản của grid system trong bootstrap 4 như sau:
<!– Thiết lập chiều rộng cho cột (column) theo từng thiết bị –>
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div><!– Tự động bố trí theo Bootstrap –>
<div class=”row”>
<div class=”col”></div>
<div class=”col”></div>
<div class=”col”></div>
</div>
Grid Option
Tóm tắt hệ thống lưới grid system trong bootstrap 4 trên từng thiết bị:
Hệ thống grid
Grid XSmall
Đối với các dòng thiết bị có độ rộng màn hình <576px thì chúng ta sẽ sử dụng class .col- cho các columns cần thiết lập:
VD: Nếu như bạn muốn thiết lập 2 columns có độ rộng màn hình lần lượt là 25% và 75% thì bạn code như sau:
<div class=”container-fluid”>
<div class=”row”><!– class col-3 ứng với column có độ rộng 25% –>
<div class=”col-3 bg-success”>
<p>Lorem ipsum…</p>
</div><!– class col-9 ứng với column có độ rộng 75% –>
<div class=”col-9 bg-warning”>
<p>Sed ut perspiciatis…</p>
</div></div>
</div>
Ngoài ra thì bạn cũng có thể để cho bootstrap 4 tự động chia độ rộng cho cột bằng cách, với các dòng tuỳ thuộc vào mục đích mà chúng ta sẽ chiua ra bao nhiêu cột.
VD: Bạn muốn chia làm 2 cột trong 1 dòng thì chỉ cần có 2 div với class .col và các cột này sẽ có kích thước(width) bằng nhau:
<div class=”container-fluid”>
<!– khối này sẽ có 2 column với width bằng nhau và = 50% –>
<div class=”row”>
<div class=”col”></div>
<div class=”col”></div>
</div><!– khối này sẽ có 4 column với width bằng nhau và = 25% –>
<div class=”row”>
<div class=”col”></div>
<div class=”col”></div>
<div class=”col”></div>
<div class=”col”></div>
</div>
</div>
Grid Small
Với các dòng thiết bị có độ rộng màn hình là 576 – 767px thì chúng ta sẽ sử dụng class là .col-sm-* cho việc chia cột:
<div class=”container”>
<div class=”row”>
<!– ‘*’ tương ứng với số column cần chia, ví dụ: col-sm-3 –>
<div class=”col-sm-*”></div>
<div class=”col-sm-*”></div>
<div class=”col-sm-*”></div>
</div>
</div>
Hay bạn cũng có thể để bootstrap tự động chia cột cho mình:
<div class=”container”>
<div class=”row”>
<!– 4 column với mỗi column width = 25% –>
<div class=”col-sm”></div>
<div class=”col-sm”></div>
<div class=”col-sm”></div>
<div class=”col-sm”></div>
</div>
</div>
Grid Medium
Được sử dụng để cho các thiết bị có độ rộng màn hình từ 768px đến 991px như của thiết bị ipad hay tablet …, và để chia cột thì chúng ta chỉ cần sử dụng class .col-md-*
<div class=”container”>
<div class=”row”>
<!– ‘*’ tương ứng với số column cần chia, ví dụ: col-md-3 –>
<div class=”col-md-*”></div>
<div class=”col-md-*”></div>
<div class=”col-md-*”></div>
</div>
</div>
Hay bạn cũng có thể để bootstrap tự động chia cột cho mình:
<div class=”container”>
<div class=”row”>
<!– 4 column với mỗi column width = 25% –>
<div class=”col-md”></div>
<div class=”col-md”></div>
<div class=”col-md”></div>
<div class=”col-md”></div>
</div>
</div>
Grid Large
Clas .col-lg-* sẽ được sử dụng trong dạng hệ thống lưới grid large này, phù hợp với độ rộng màn hình từ 992px đến 1199px
<div class=”container”>
<div class=”row”>
<!– ‘*’ tương ứng với số column cần chia, ví dụ: col-lg-3 –>
<div class=”col-lg-*”></div>
<div class=”col-lg-*”></div>
<div class=”col-lg-*”></div>
</div>
</div>
Hay bạn cũng có thể để bootstrap tự động chia cột cho mình:
<div class=”container”>
<div class=”row”>
<!– 4 column với mỗi column width = 25% –>
<div class=”col-lg”></div>
<div class=”col-lg”></div>
<div class=”col-lg”></div>
<div class=”col-lg”></div>
</div>
</div>
Grid XLarge
Như ở trên Blog Getbootstrap đã chia sẻ thì sự khác biệt lớn giữa phiên bản bootstrap 3 và bootstrap 4 đó chính là ở phiên bản mới đã cung cấp thêm 1 lass mới là: .col-xl*, tất nhiên thì nó sẽ được áp dụng cho các thiết bị sử dụng độ rộng màn hình >=1200px.
<div class=”container”>
<div class=”row”>
<!– ‘*’ tương ứng với số column cần chia, ví dụ: col-xl-3 –>
<div class=”col-xl-*”></div>
<div class=”col-xl-*”></div>
<div class=”col-xl-*”></div>
</div>
</div>
Hay bạn cũng có thể để bootstrap tự động chia cột cho mình:
<div class=”container”>
<div class=”row”>
<!– 4 column với mỗi column width = 25% –>
<div class=”col-xl”></div>
<div class=”col-xl”></div>
<div class=”col-xl”></div>
<div class=”col-xl”></div>
</div>
</div>
Hi vọng với những thông tin về hệ thống lưới grid system trong bootstrap 4 cũng như cách sử dụng col-xs-12 trong chia cột, layout cho giao diện sẽ giúp bạn có thể kiến thức về bootstrap nhé. Nếu như bạn còn thắc mắc gì thì có thể để lại comment ở bài viết dưới đây, Blog Getbootstrap sẽ giúp bạn trả lời thắc mắc trong thời gian sớm nhất.
