1. Chú ý: Tài khoản của bạn chưa được xác minh, hãy vào đây nâng cấp thành viên chính thức để được đăng bài kiếm tiền và đọc các nội dung ẩn tại diễn đàn: Nâng cấp tài khoản

Hướng Dẫn Tạo 5 Cột Trên Web Sử Dụng Bootstrap

Thảo luận trong 'Software' bắt đầu bởi Admin, 17 Tháng tư 2017.

  1. Admin

    Admin Nothing to lose.. your love to win.. Chuyển tiền

    Bài viết:
    Tìm chủ đề
    5,133
    3,876 18
    Mặc định, Bootstrap chỉ cho phép tạo số cột là ước số của 12 gồm 1, 2, 3, 4, 6 cột.

    Code sau đây giúp bạn tạo 5 cột trên website sử dụng Bootstrap.

    Demo: Nhóc Shop

    Cách 1:

    Mã:
    <div class="row">
        <div class="col-md-2 col-md-offset-1">Cột 1</div>
        <div class="col-md-2">Cột 2</div>
        <div class="col-md-2">Cột 3</div>
        <div class="col-md-2">Cột 4</div>
        <div class="col-md-2">Cột 5</div>
    </div>
    Cách 2:

    Tạo CSS

    Mã:
    .col-xs-15,
    .col-sm-15,
    .col-md-15,
    .col-lg-15 {
        position: relative;
        min-height: 1px;
        padding-right: 10px;
        padding-left: 10px;
    }
    
    .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;
    }
    }
    
    Để sử dụng:

    Mã:
    <div class="row">
        <div class="col-md-15 col-xs-3">
        ...
        </div>
    </div>

    Cách 3:

    Tùy chỉnh động dựa vào LESS và SASS

    LESS: Nếu bạn custom bằng LESS thì sẽ tạo ra cột 2.4 (Tức là 2.4*5 = 12)

    Mã:
    .col-lg-2-4{
    .make-lg-column(2.4)
    }
    
    .col-md-2-4{
    .make-md-column(2.4)
    }
    
    .col-sm-2-4{
    .make-sm-column(2.4)
    }
    SASS: Nếu sử dụng SASS thì tương tự LESS

    Mã:
    .col-lg-2-4{
    @include make-lg-column(2.4)
    }
    
    .col-md-2-4{
    @include make-md-column(2.4)
    }
    
    .col-sm-2-4{
    @include make-sm-column(2.4)
    }
    Chúc các bạn thành công!
     
    Chỉnh sửa cuối: 24 Tháng mười một 2017
  2. Đang tải...
  3. Admin

    Admin Nothing to lose.. your love to win.. Chuyển tiền

    Bài viết:
    Tìm chủ đề
    5,133
    Cách 4:

    Tạo mã CSS

    Mã:
    .col-xs-2{
        background:#00f;
        color:#FFF;
    }
    .col-half-offset{
        margin-left:4.166666667%
    }
    Còn đây là mã HTML

    Mã:
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
        <div class="row" style="border: 1px solid red">
            <div class="col-xs-2" id="p1">One</div>
            <div class="col-xs-2 col-half-offset" id="p2">Two</div>
            <div class="col-xs-2 col-half-offset" id="p3">Three</div>
            <div class="col-xs-2 col-half-offset" id="p4">Four</div>
            <div class="col-xs-2 col-half-offset" id="p5">Five</div>
            <div>lorem</div>
        </div>
    </div>
     
Trả lời qua Facebook
Đang tải...