Hướng dẫn tạo giao diện 5 cột trong Nukeviet 4

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>

 

 

 đang tính làm kaka

 

chíu chíu đọc suy nghĩ của "thằng" Nhím. chíu chíu ra rồi. yeah hốt tay trên......amen

 

cho em hỏi là với col-sm-3 thì khi đó đâu phải là 20% nữa ạ? em tưởng phải là col-sm-15 chứ ạ

 

Chắc viết nhầm đấy :v. Test thử xem sao nhé. Xong báo lại phát vì cái này copy lại từ blog anh sang :v

 

Vâng phải col-sm-15 a hì 

 

Tại sao ko tạo class riêng mà lại dùng class của bootstrap anh, như vậy sẽ ảnh hưởng tới bootstrap mà a 

 

boostrap ko có những class này nhé

 

 

Nó từng đúng và giờ nó mém đúng :D

 

Xem bài này tham khảo thử nhen bạn !

https://nuke.vn/forum/threads/modules-shops-4-0-29-hien-thi-05-san-pham-tren-1-dong-257.html

 

Cảm ơn các bạn, nhưng hiện tại chia 5 cột vẫn bế tắc vì chưa chuẩn trên mobile mà chỉ chuẩn trên máy tính nên chưa giải quyết được triệt để vấn đề này, không biết phải như nào nữa