Cách chia cột tương tác với tỷ lệ màn hình trong bootstrap

Trong bài viết trước mình đã hướng dẫn các bạn cách nhúng Bootstrap vào Blogger và một bài giới thiệu hệ thống lưới trong bootstrap. trong bài viết ngày hôm nay mình sẽ hướng dẫn các bạn cách chia cột tương tác tỷ lệ màn hình một cách nhanh chóng, tương tác tốt với các thiết bị khác nhau như: desktop (máy bàn), laptop (máy tính xách tay), tablet (máy tính bảng), smart phone (điện thoại thông minh).

Cách chia cột tương tác với tỷ lệ màn hình trong bootstrap

Chúng ta cần nhớ các lệnh cơ bản như sau trong hệ thống lưới:

• Lớp .col-xs-* sử dụng tương thích với màn hình smart phone (< 768px)
• Lớp .col-sm-* sử dụng tương thích với màn hình tablet (>= 768px)
• Lớp .col-md-* sử dụng tương thích với màn hình laptop, desktop (>= 992px)
• Lớp .col-lg-* sử dụng tương thích với màn hình desktop (>= 1200px)

Ví dụ 1: Sử dụng bootstrap, chia 2 cột với tỉ lệ bằng nhau:

<div class="container">
 <div class="row">
             <div class="col-sm-6">
                    <div class="mauxanh">Cột thứ 1</div>
             </div>
             <div class="col-sm-6">
                    <div class="mauhong">Cột thứ 2</div>
             </div>
    </div> 
</div>

Ví dụ 2: Sử dụng bootstrap, chia 2 cột với tỉ lệ 1:2

<div class="container">
 <div class="row">
     <div class="col-sm-4">
         <div class="nenxanh">Cột thứ 1 tỉ lệ 1</div>
        </div>
        <div class="col-sm-8">
         <div class="nenhong">Cột thứ 2 tỉ lệ 2</div>
        </div>
    </div> 
</div>

Ví dụ 3: Chia 3 cột có tỷ lệ bằng nhau trong Bootstrap cũng tương tự như chia 2 cột.

<div class="container">
 <div class="row">
     <div class="col-md-4">
         <div class="nenxanh">Cột thứ 1</div>
        </div>
        <div class="col-md-4">
         <div class="nenhong">Cột thứ 2</div>
        </div>
        <div class="col-md-4">
         <div class="nenvang">Cột thứ 3</div>
        </div>
    </div> 
</div>

Ví dụ 4: Để chia 3 cột có tỷ lệ khác nhau, các bạn làm tương tự như ví dụ 3, chỉ việc thay chỉ số sau .col-md-*, luôn nhớ tổng các giá trị này là 12.

<div class="container">
 <div class="col-md-2">
         <div class="nenxanh">Cột thứ 1</div>
        </div>
        <div class="col-md-8">
         <div class="nenhong">Cột thứ 2</div>
        </div>
        <div class="col-md-2">
         <div class="nenvang">Cột thứ 3</div>
        </div>
</div>

Ví dụ 5: Sử dụng bố cục kết hợp trên nhiều thiết bị di động như desktop, laptop, tablet, smart phone. 

• Thiết bị có độ phân giải từ 1024x728 trở lên, bố cục được chia thành 3 cột (hình 8)
• Thiết bị có độ phân giải 728x1280, bố cục được chia thành 2 cột (hình 9)
• Thiết bị có độ phân giải nhỏ hơn 728, bố cục được chia thành 1 cột (hình 10)

<div class="container">
 <div class="row">
     <div class="col-sm-3 col-md-2">
         <div class="nenxanh">Cột thứ 1</div>
        </div>
        <div class="col-sm-9 col-md-8">
         <div class="nenhong">Cột thứ 2</div>
        </div>
        <div class="col-sm-12 col-md-2">
         <div class="nenvang">Cột thứ 3</div>
        </div>
    </div> 
</div>