首頁 > 文章 > web前端 > bootstrap最多可以分多少列

bootstrap最多可以分多少列

WBOY原創: 2022-03-09 17:22:054476瀏覽

在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最多可以分割多少列

相關文章