Hiện tại Nukeviet đang sử dụng thư viện Css Boostrap. Tuy nhiên thư viện này lại không hỗ trợ giao diện 5 cột. Bài này mình sẽ hướng dẫn các bạn thực hiện nó.
Bạn cần tạo ra các cột mặc định trong file css của mình. Tôi gọi là class col -..- 15.
Ở đây tôi ví dụ luôn file style.css của theme default.
.col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; }
Tiếp theo, bạn cần xác định chiều rộng của các class mới cho các thiết bị duyệt web khác nhau
.col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } }
Như vậy là bạn đã hoàn thành việc bổ sung thư viện cho nó.
Sử dụng:
<div class="row"> <div class="col-md-15 col-sm-3"> Nội dung </div> </div>