风吟资源网 - 免费提供正版软件、活动线报、优质教程以及其他网络资源,欢迎大家踊跃投稿

类 Bootstrap 栅栏布局的实现

风吟资源网 学习笔记

Bootstrap 的好用除了不错的 UI, 其中栅栏布局也是特别值得赞赏的。 列式的布局加上响应式的设计在大多情况下都能起到很好的效果。

那如何去实现类似的这种布局呢?

回忆 Bootstrap 栅栏布局的写法,应该是有一层的 container 包裹着,然后里面又会出现 一行的东西,这一行按照屏幕大小被分为了 12 列。 
 

<div class="grid-container">
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <p>hashcoding</p>
        </div>
        <div class="col-md-4 col-sm-6">
            <p>hashcoding</p>
        </div>
        <div class="col-md-4 col-sm-12">
            <p>hashcoding</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 col-sm-3">
            <p>hashcoding</p>
        </div>
        <div class="col-md-6 col-sm-6">
            <p>hashcoding</p>
        </div>
        <div class="col-md-3 col-sm-3">
            <p>hashcoding</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-1 col-sm-2">
            <p>hashcoding</p>
        </div>
        <div class="col-md-1 col-sm-2">
            <p>hashcoding</p>
        </div>
        <div class="col-md-2 col-sm-8">
            <p>hashcoding</p>
        </div>
        <div class="col-md-2 col-sm-3">
            <p>hashcoding</p>
        </div>
        <div class="col-md-6 col-sm-3">
            <p>hashcoding</p>
        </div>
    </div>
</div>
如此说来,我们也应该这样去做。里面的12列应该是采用百分比加上浮动来实现的,外面需要一个盒子去清除浮动。
.grid-container {
    width: 100%;
    max-width: 1200px;
}
.grid-container * {
    box-sizing: border-box;
}
.row:before, .row:after {
    content: "";
    display: block;
    visibility: hidden;
    clear: both;
    *zoom: 1;
}
对于每个栅栏的内容,都是有着相似的属性,比如 float
[class*="col-"] {
    float: left;
    min-height: 1px;
    width: 16.66%;
    padding: 10px;
}
然后还需要响应的实现,采用媒体查询去解决问题
@media all and (min-width: 768px) {
    .col-md-1 {
        width: 8.33%;
    }
    .col-md-2 {
        width: 16.66%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-4 {
        width: 33.33%;
    }
    .col-md-5 {
        width: 41.66%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-7 {
        width: 58.33%
    }
    .col-md-8 {
        width: 66.66%;
    }
    .col-md-9 {
        width: 75%;
    }
    .col-md-10 {
        width: 83.33%;
    }
    .col-md-11 {
        width: 91.66%
    }
    .col-md-12 {
        width: 100%;
    }
}
@media all and (max-width: 768px) {
    .col-sm-1 {
        width: 8.33%;
    }
    .col-sm-2 {
        width: 16.66%;
    }
    .col-sm-3 {
        width: 25%;
    }
    .col-sm-4 {
        width: 33.33%;
    }
    .col-sm-5 {
        width: 41.66%;
    }
    .col-sm-6 {
        width: 50%;
    }
    .col-sm-7 {
        width: 58.33%
    }
    .col-sm-8 {
        width: 66.66%;
    }
    .col-sm-9 {
        width: 75%;
    }
    .col-sm-10 {
        width: 83.33%;
    }
    .col-sm-11 {
        width: 91.66%
    }
    .col-sm-12 {
        width: 100%;
    }
}
 

免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权请邮件与我们处理。敬请谅解!

我要评论0条评论
禁止发布淫秽、反动、广告评论、乱填写QQ,发现永封IP!
  • 全部评论(0
    还没有评论,快来抢沙发吧!