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

LongAnIT 3/04/2019
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
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>

1 nhận xét

  1. Cái này hữu ích này , ví dụ như site này của tôi đang sd bootstrap : https://bfglink.xyz/ cơ mà tôi chỉ sắp xếp cho gọn gàng chứ không quan tâm đến tiểu tiết lắm =)) giờ đọc bài viết này xong chắc phải sửa lại vài chỗ cho đẹp mắt

    Trả lờiXóa

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây