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

Thảo luận trong 'Coding' đăng bởi dangdinhtu, 21/07/2016 10:59.

  • 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>

     

     
  • frown đang tính làm kaka

     
    hoanglongvnpt thích điều này.
  • Furrionoup

    Furrionoup zvusafme2tructuGP szusafme3meidrzGP

    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

     
    Lần sửa cuối bởi một điều hành viên: 21/07/2016 11:15
  • 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é

     
  • Fortresssnl

    Fortresssnl xzusafmewnazxwpGP zvusafmegmqhc3dGP

     

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

     
  • Fortresssnl

    Fortresssnl xzusafmewnazxwpGP zvusafmegmqhc3dGP

  • 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 frown

     

Chia sẻ trang này

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây