Sau khi bạn đã hiểu rõ hơn về khái niệm bootstrap thì trong quá trình xây dựng giao diện website bạn sẽ gặp phải khó khăn về chia cột cho bố cục website. Và để có thể hiểu rõ hơn về các cơ chế thì bạn cần phải xem qua hệ thống lưới trong bootstrap – Grids System.
Ở bài viết này, Blog Getbootstrap sẽ hướng dẫn bạn chi tiết cách chia cột sau cho tương tác với tỷ lệ màn hình nhất. Mời các bạn cùng tham khảo.
Cách chia cột tương tác tỷ lệ màn hình với bootstrap
Các lệnh bạn cần ghi nhớ khi tiến hành:
- Lớp .col-xs-*: phù hợp với màn hình smart phone (< 768px)
- Lớp .col-sm-*: phù hợp với màn hình tablet (>= 768px)
- Lớp .col-md-*: phù hợp với màn hình laptop, desktop (>= 992px)
- Lớp .col-lg-*: phù hợp với màn hình desktop (>= 1200px)
Ví dụ code html: Chia 2 cột với tỉ lệ bằng nhau
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-sm-6″>
<div class=”nenxanh”>Cột thứ 1</div>
</div>
<div class=”col-sm-6″>
<div class=”nenhong”>Cột thứ 2</div>
</div>
</div>
</div>
</body>
</html>
Kết quả hình ảnh:
Ví dụ code html: chia 2 cột với tỉ lệ 1:2
<body>
<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>
</body>
Kết quả hình ảnh:
Ví dụ code html: Chia 3 cột có tỷ lệ bằng nhau trong Bootstrap cũng tương tự như chia 2 cột.
<body>
<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>
</body>
Kết quả hình ảnh:
Ví dụ code html: 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ừ 1024×728 trở lên, bố cục được chia thành 3 cột (hình 7)
- Thiết bị có độ phân giải 728×1280, bố cục được chia thành 2 cột (hình 8)
- Thiết bị có độ phân giải nhỏ hơn 728, bố cục được chia thành 1 cột (hình 9)
<body>
<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>
</body>
Kết quả hình ảnh:
