Tìm kiếm nhanh

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.

  • dangdinhtu

    dangdinhtu Đặng Đình Tứ

    Điều hành viên Quản trị diễn đàn

    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>

     

     
  • nhimthulinh

    nhimthulinh

    Điều hành viên Quản trị diễn đàn

    frown đang tính làm kaka

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

    aptx4869 Trần Phương

    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

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    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ứ ạ

     
  • dangdinhtu

    dangdinhtu Đặng Đình Tứ

    Điều hành viên Quản trị diễn đàn

    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 bạn: 21/07/2016 11:15
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

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

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    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 

     
  • dangdinhtu

    dangdinhtu Đặng Đình Tứ

    Điều hành viên Quản trị diễn đàn

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

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

     

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

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

  • hunterlovevnvnn

    hunterlovevnvnn Nguyễn Đình Báu

    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