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

Thảo luận trong 'HTML & Javascript' bắt đầu bởi Admin, 17/4/2017.

  1. Admin

    Admin Nothing to lose.. your love to win.. Chuyển tiền Tìm chủ đề

    Bài viết:
    Tìm chủ đề
    5,242
    Xem: 2,430
    Nếu bạn cảm thấy hay, hãy chia sẻ để ủng hộ tác giả
    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/11/2017
  2. Đang tải...
  3. Admin

    Admin Nothing to lose.. your love to win.. Chuyển tiền Tìm chủ đề

    Bài viết:
    Tìm chủ đề
    5,242
    Thu gọn
    Nếu bạn cảm thấy hay, hãy chia sẻ để ủng hộ tác giả
    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...