bootstrap框架如何5等分栅格化

Xuanmo  发表于:  分类: Bootstrap  2395  0

    bootstrap目前已经成为前端制作网页最主要的一个框架工具,通过bootstrap栅格化标签可以快速对网页进行模块化分割,然而默认的分割是12等分,如果是把网页进行3、4、6等分进行分割是很简单的,你只需要使用col-md-4、col-md-3、col-md-6就可以轻松实现,那么如果你想把网页分割为5等分,要怎么操作呢?

    这其实是bootstrap另一个比较重要的思想,方便于工具,但是不能局限于工具,使用bootstrap我们有时候还需要跳出bootstrap现有的标签样式。我们还可以针对bootstrap进行“二次定制开发”。例如5等分,我们就需要借用bootstrap的现有样式进行增加改造。

借用3等分的样式,设置5等分样式为:


.col-md-1-5 {
    width: 20%;
    float: left;
}

.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 768px) {
    .col-sm-1-5 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-1-5 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-1-5 {
        width: 20%;
        float: left;
    }
}

/*第二段代码是为了适应不同设配的内容,添加完成后,我们就可以在网页中任意引入5等分内容了。*/
  • 6人 Love
  • 2人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
bootstrap、tips

作者简介:Xuanmo

打赏

生命的意义在于折腾。

共 0 条评论关于 “bootstrap框架如何5等分栅格化”

Loading...
Loading...