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 Nothing to lose.. your love to win.. Chuyển tiền

    Bài viết:
    Tìm chủ đề
    4,968
    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 Nothing to lose.. your love to win.. Chuyển tiền

    Bài viết:
    Tìm chủ đề
    4,968
    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...