0
(0)

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

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

以下是bootstrap默认3等分网页样式:
.col-md-4 {
width: 33.3333%;
}
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
float: left;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}

借用3等分的样式,如果现在我们想设置5等分,那我们只需要模仿3等分样式修改为:
.col-md-1-5 {
width: 20%;
float: left;
}
.col-xs-1-5,.col-sm-1-5,.col-md-1-5,.col-lg-1-5 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}

@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等分内容了。

声明:本站分享的WordPress主题/插件均遵循 GPLv2 许可协议(免费开源),相关介绍资料仅供学习参考,实际版本可能会因版本迭代或开发者调整而产生变化,如程序中涉及有第三方原创图像、设计模板、远程服务等内容,应获得作者授权后方可使用。本站不提供该程序/软件的产品授权与技术服务,亦不收取相关费用。