注：我是根據自己理解寫的 ?有參考http://www.w3cschool.cc/bootstrap該教程。

bootstrap目前有兩種默認的網絡（格）系統：一個是940px,另一個是12列。

我們先從12列入手看看：

1.Bootstrap 使用 CSS 的 class "row" 來創建水平行，使用 CSS 的 class "spanx"（x 的值從 1 到 12）來創建垂直列。

? ?以一個DIV為例創建網絡：

1 <div class="container"> 2 <div class="row"> 3 <div class="span*"></div>//*取值1到12 4 <div class="span*"></div> 5 <div class="span*"></div> 6 ..... 7 </div> 8 </div> Example1

2.如何在固定的網絡中創建行和列（css規則）

1 .row { 2 margin-left: -20px; 3 *zoom: 1; 4 } 5 //設置 "*zoom: 1;"。這里的 "*" 表示所有元素的 zoom 屬性都設置為 1，用來修復 IE6/7 的 bug。設置 zoom 屬性為 1，即設置了一個名為 hasLayout 的內部屬性，用于修復 IE6/7 的許多縮放/渲染問題。 6 7 .row:before, 8 .row:after { 9 display: table; 10 line-height: 0; 11 content: ""; 12 } 13 //兩個是偽元素。":before" 用于在目標元素之前插入一些內容，":after" 用于在目標元素之后插入一些內容。"display:table;" 使得元素以表格形式呈現。通過設置 "line-height: 0;" 來確保每個行沒有自己的行高，通過使用 'content: ""' 來確保元素前后沒有內容被插入。 14 15 .row:after { 16 clear: both; 17 }// 此規則 保證給定元素的左右兩側沒有浮動元素。 row規則 1 [class*="span"] { 2 float: left; 3 min-height: 1px; 4 margin-left: 20px; 5 } 6 //'[class*="span"]' 選擇了 class 屬性值以 'span' 開始的所有元素。現在使用 "float: left;" 來定位每個列彼此相鄰。使用 "min-height: 1px" 來讓所有的列有一個最小的高度為 1px，使用 "margin-left: 20px;"設置左邊距為 20px。 span規則

?單獨的 CSS 規則來設置列寬:

??

.span12 {width: 940px;}	如果該行有一個單一的列，列寬為 940px。
.span11 {width: 860px;}	如果該行有一個由 11 列合并的列，列寬為 860px。
.span10 {width: 780px;}	如果該行有一個由 10 列合并的列，列寬為 780px
.span9 {width: 700px;}	如果該行有一個由 9列合并的列，列寬為 700px
.span8 {width: 620px;}	如果該行有一個由 8 列合并的列，列寬為 620px
.span7 {width: 540px;}	如果該行有一個由 7列合并的列，列寬為 540px
.span6{width: 460px;}	如果該行有一個由 6列合并的列，列寬為 460px
.span5 {width: 380px;}	如果該行有一個由 5列合并的列，列寬為 380px
.span4 {width: 300px;}	如果該行有一個由 4 列合并的列，列寬為 300px
.span3 { width: 220px;}	如果該行有一個由 3列合并的列，列寬為 220px
.span2 { width: 140px;}	如果該行有一個由 2列合并的列，列寬為 140px
.span1 { width: 60px;}	? ?單列寬為 60px

?

3.偏移列

通過使用偏移，您可以把列移動它原始位置的右側。這是通過向列添加左邊距來實現的。通過 Bootstrap，您可以使用 "offsetx"（其中 x 的值是一個正整數） class 和 class "spany"（其中 y 的值是一個正整數）。取決于 'offestx' 中 'x' 的值，相關的列向右移動 'x' 個列的寬度。偏移的寬度是在 Bootstrap CSS 中定義的。offset12 的最高左邊距是 980px，offset1 的最低左邊距是 100px。由于默認網格系統是基于像素的，當應用偏移時，您必須知道您要用于偏移的像素和要用于列的像素。這兩個加在一起必須不超過您的水平視口的像素數。

? 簡單的意思就是 追加類名，比如 <div class=" span2 ?offset4">

4.嵌套列

?您只需要簡單地在列中創建一個行，并創建您想要在行中嵌套的列數。與此同時，您必須記住用來嵌套其他列的列的總列數，確保不能超過您創建父列時所提到的列數。

?

轉載于:https://www.cnblogs.com/aaronfay/p/3673486.html

總結

以上是生活随笔為你收集整理的bootstrap学习笔记(一)网络系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。