首页 >web前端 >Bootstrap教程 >bootstrap最多可以分多少列

bootstrap最多可以分多少列

WBOY原创: 2022-03-09 17:22:054550浏览

在bootstrap中，页面最多可以分为12列；bootstrap中的栅格系统相对灵活，可以将页面分成1、2、3、4、6和12列，其中bootstrap默认也是最多将页面分为12列。

bootstrap最多可以分多少列

本教程操作环境：Windows10系统、bootstrap3.3.7版、DELL G3电脑

bootstrap最多可以分多少列

本网格布局系统属于Scaffolding（框架，布局）部分。在Scaffolding里面有（固定）网格布局（Grid System）和流式网格布局（Fluid Grid System）。本文讨论第一种固定网格布局。

Bootstrap采用的是12列布局格式，即在页面一行之内最多可以布置12列。

bootstrap只能默认12列是因为12是数字“1、2、3、4、6”的最小公倍数，所以12列栅格系统相对较灵活，并且支持将一行分成1列、2列、3列、4列、6列。

Bootstrap中规定页面的总的宽度为940px，这个跟其他的CSS框架不太一样（其他有的是960px（960grid等），有点是950px（blueprint等））。这个940px是在一个名称为container的类中规定的，具体如下

.container,
{
  width: 940px;
}

还有就是规定了这个container的页面居中

.container {
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
}

（这里有个技巧，为了让div在各种浏览器下下产生同样的居中效果将margin-left和margin-right的值为auto是最简单的方式。*zoom这个css hack是为了兼容ie6和7，但具体为什么要使用zoom=1还不得而知。）

同时，还使用了css伪元素选择器，在这个类里面还清空了前后的内容，并且在后面还清除了浮动

.container:before,
.container:after {
  display: table;
  content: "";
}
.container:after {
  clear: both;
}

在container里面还不能直接进行多列布局，这个时候还需要使用row作为二级容器，row这个容器的样式挺有意思

.row {
  margin-left: -20px;
  *zoom: 1;
}

左边的margin为-20px，注意是负20.即是说row的宽度会突破外部的container20个像素。为什么呢？待会你就知道了。当然row里面也有设置清空前后内容和浮动的样式，跟container类似，此处不多敖述。

row里面才是我们要进行的具体多列布局的类span。具体使用布局时，代码大概这样

    <div class="container">
        <div class="row">
            <div class="span4">
                span4</div>
            <div class="span8">
                span8</div>
        </div>
    </div>

为什么不能将span直接放入container中，为什么row要margin-left=-20px？这就要细说一下span，这个也是笔者所讲“精巧网格布局”的原因。

确实情形下，Bootstrap共有12个span类，分别为span1,span2,….span12.他们的定义非常简单

.span12 {
  width: 940px;
}
.span11 {
  width: 860px;
}
。。。
.span4 {
  width: 300px;
}
.span3 {
  width: 220px;
}
.span2 {
  width: 140px;
}
.span1 {
  width: 60px;
}

当然还有使用伪类选择器统一将他们设置为浮动的样式

[class*="span"] {
  float: left;
}

浮动是另外的理论，我们按下不表。我们仔细看从span1到span12，发现一个规律，就是span每增加一次，就增加80px。只是span1是从60开始计数的，为什么不让span1从80开始计数，然后每个span都是80的倍数，这样也容易记忆呢？实际上啊，span还真是从80开始计数的。只不过其可视部分是60，另外的20在样式里面设置了margin-left=20；如下

[class*="span"] {
  margin-left: 20px;
}

这个20还有另外一个意义，就是其可以在页面上表示两个span之间的间隔，即所有的span之间都有20px的间隔，不至于黏在一起，让终端用户分不开。

bootstrap最多可以分多少列

bootstrap最多可以分多少列

相关文章