前提條件（Bootstrap 自帶）

---

?

首先使用這個布局之前要定義一下代碼：

這行代碼如果不懂，可以搜索一下，總之大致意思就是，被定義的元素的內邊距和邊框不再會增加它的寬度，不加入的話排版會有問題。

不過，Bootstrap自己當然已經加入了，如果你是使用整個Bootstrap框架，那你可以無視這里，只是讓你明白需要一個這個。

我是將Bootstrap框架里面的布局代碼分割出來，形成一個小體積的僅有css文件的小框架（下載地址見最后），以后寫單頁小網站方便用。

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }

?

容器 container

---

container 的設計大致如下：

代碼實現：

這里實現了依據不同的寬度進行改變：

.container {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto; } @media (min-width: 768px) {/*當寬度大于768px時觸發*/.container {width: 750px;} } @media (min-width: 992px) {/*當寬度大于992px時觸發*/.container {width: 970px;} } @media (min-width: 1200px) {/*當寬度大于1200px時觸發*/.container {width: 1170px;} } .container-fluid { /*這個是寬度默認*/padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto; }

?

?仔細研究一下CSS代碼，相信你會突然明白。

為什么要Padding 15px呢？

我覺得應該是為了如果你在容器 container 里面寫其他東西，不至于挨邊。影響美觀。

?

行 row

---

最簡單的莫過于的 row 了。?

是不是感覺不錯：

代碼實現：

沒錯就兩行

.row {margin-right: -15px;margin-left: -15px; }

?

列?Column

---

?這個也很簡單，你看總共有那么寬，Bootstrap分別將他們分割成12份，意思是你可以隨意使用者12份，加起來要正好12。

不過要注意的一點是，Bootstrap實現了更好的響應式布局，列的種類是有很多種的。

.col-xs-*?針對超小屏幕 手機（<768px）

.col-sm-*?小屏幕 平板 (≥768px)

.col-md-*?中等屏幕 桌面顯示器 (≥992px)(柵格參數)

.col-lg-*?針對特大的（≥1200px）

這些是什么意思？如何使用的呢？假設你寫如下代碼:?

<div class="col-sm-10 col-md-8"></div> <div class="col-sm-3 col-md-4"></div>

?

當這兩個div在row里面之后。如果是這樣 這兩個div在小屏幕中會排2排 因為10+3>12 ,在中等屏幕中可以排同一排 8+4=12

說白了。就是在不同的寬度里面Bootstrap將幫助你選擇不同的類，你可以用這些類定義你想在不同寬度的界面排版。

代碼實現：

col-xs-*的：

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2,/*后面代碼省略，選擇了所有的列，所有不同的列類型全部都有這樣的有這樣*/
{position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {float: left; } .col-xs-12 {width: 100%; } .col-xs-11 {width: 91.66666667%; } .col-xs-10 {width: 83.33333333%; } .col-xs-9 {width: 75%; } .col-xs-8 {width: 66.66666667%; } .col-xs-7 {width: 58.33333333%; } .col-xs-6 {width: 50%; } .col-xs-5 {width: 41.66666667%; } .col-xs-4 {width: 33.33333333%; } .col-xs-3 {width: 25%; } .col-xs-2 {width: 16.66666667%; } .col-xs-1 {width: 8.33333333%;
}

?其他元素則使用

@media (min-width: 1200px){/*各自列的實現*/ }

?

這些來判斷，然后各自實現自己的類即可了。

不過方便你研究，代碼也順便貼上。

---

?

.col-sm-*?小屏幕 平板 (≥768px)：

1 @media (min-width: 768px) {2 .col-sm-1, .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-sm-10, .col-sm-11, .col-sm-12 {3 float: left;4 }5 .col-sm-12 {6 width: 100%;7 }8 .col-sm-11 {9 width: 91.66666667%;10 }11 .col-sm-10 {12 width: 83.33333333%;13 }14 .col-sm-9 {15 width: 75%;16 }17 .col-sm-8 {18 width: 66.66666667%;19 }20 .col-sm-7 {21 width: 58.33333333%;22 }23 .col-sm-6 {24 width: 50%;25 }26 .col-sm-5 {27 width: 41.66666667%;28 }29 .col-sm-4 {30 width: 33.33333333%;31 }32 .col-sm-3 {33 width: 25%;34 }35 .col-sm-2 {36 width: 16.66666667%;37 }38 .col-sm-1 {39 width: 8.33333333%;40 }41 .col-sm-pull-12 {42 right: 100%;43 }44 .col-sm-pull-11 {45 right: 91.66666667%;46 }47 .col-sm-pull-10 {48 right: 83.33333333%;49 }50 .col-sm-pull-9 {51 right: 75%;52 }53 .col-sm-pull-8 {54 right: 66.66666667%;55 }56 .col-sm-pull-7 {57 right: 58.33333333%;58 }59 .col-sm-pull-6 {60 right: 50%;61 }62 .col-sm-pull-5 {63 right: 41.66666667%;64 }65 .col-sm-pull-4 {66 right: 33.33333333%;67 }68 .col-sm-pull-3 {69 right: 25%;70 }71 .col-sm-pull-2 {72 right: 16.66666667%;73 }74 .col-sm-pull-1 {75 right: 8.33333333%;76 }77 .col-sm-pull-0 {78 right: auto;79 }80 .col-sm-push-12 {81 left: 100%;82 }83 .col-sm-push-11 {84 left: 91.66666667%;85 }86 .col-sm-push-10 {87 left: 83.33333333%;88 }89 .col-sm-push-9 {90 left: 75%;91 }92 .col-sm-push-8 {93 left: 66.66666667%;94 }95 .col-sm-push-7 {96 left: 58.33333333%;97 }98 .col-sm-push-6 {99 left: 50%; 100 } 101 .col-sm-push-5 { 102 left: 41.66666667%; 103 } 104 .col-sm-push-4 { 105 left: 33.33333333%; 106 } 107 .col-sm-push-3 { 108 left: 25%; 109 } 110 .col-sm-push-2 { 111 left: 16.66666667%; 112 } 113 .col-sm-push-1 { 114 left: 8.33333333%; 115 } 116 .col-sm-push-0 { 117 left: auto; 118 } 119 .col-sm-offset-12 { 120 margin-left: 100%; 121 } 122 .col-sm-offset-11 { 123 margin-left: 91.66666667%; 124 } 125 .col-sm-offset-10 { 126 margin-left: 83.33333333%; 127 } 128 .col-sm-offset-9 { 129 margin-left: 75%; 130 } 131 .col-sm-offset-8 { 132 margin-left: 66.66666667%; 133 } 134 .col-sm-offset-7 { 135 margin-left: 58.33333333%; 136 } 137 .col-sm-offset-6 { 138 margin-left: 50%; 139 } 140 .col-sm-offset-5 { 141 margin-left: 41.66666667%; 142 } 143 .col-sm-offset-4 { 144 margin-left: 33.33333333%; 145 } 146 .col-sm-offset-3 { 147 margin-left: 25%; 148 } 149 .col-sm-offset-2 { 150 margin-left: 16.66666667%; 151 } 152 .col-sm-offset-1 { 153 margin-left: 8.33333333%; 154 } 155 .col-sm-offset-0 { 156 margin-left: 0; 157 } 158 }

.col-md-*?中等屏幕 桌面顯示器 (≥992px)(柵格參數)：

1 @media (min-width: 992px) {2 .col-md-1, .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-md-10, .col-md-11, .col-md-12 {3 float: left;4 }5 .col-md-12 {6 width: 100%;7 }8 .col-md-11 {9 width: 91.66666667%;10 }11 .col-md-10 {12 width: 83.33333333%;13 }14 .col-md-9 {15 width: 75%;16 }17 .col-md-8 {18 width: 66.66666667%;19 }20 .col-md-7 {21 width: 58.33333333%;22 }23 .col-md-6 {24 width: 50%;25 }26 .col-md-5 {27 width: 41.66666667%;28 }29 .col-md-4 {30 width: 33.33333333%;31 }32 .col-md-3 {33 width: 25%;34 }35 .col-md-2 {36 width: 16.66666667%;37 }38 .col-md-1 {39 width: 8.33333333%;40 }41 .col-md-pull-12 {42 right: 100%;43 }44 .col-md-pull-11 {45 right: 91.66666667%;46 }47 .col-md-pull-10 {48 right: 83.33333333%;49 }50 .col-md-pull-9 {51 right: 75%;52 }53 .col-md-pull-8 {54 right: 66.66666667%;55 }56 .col-md-pull-7 {57 right: 58.33333333%;58 }59 .col-md-pull-6 {60 right: 50%;61 }62 .col-md-pull-5 {63 right: 41.66666667%;64 }65 .col-md-pull-4 {66 right: 33.33333333%;67 }68 .col-md-pull-3 {69 right: 25%;70 }71 .col-md-pull-2 {72 right: 16.66666667%;73 }74 .col-md-pull-1 {75 right: 8.33333333%;76 }77 .col-md-pull-0 {78 right: auto;79 }80 .col-md-push-12 {81 left: 100%;82 }83 .col-md-push-11 {84 left: 91.66666667%;85 }86 .col-md-push-10 {87 left: 83.33333333%;88 }89 .col-md-push-9 {90 left: 75%;91 }92 .col-md-push-8 {93 left: 66.66666667%;94 }95 .col-md-push-7 {96 left: 58.33333333%;97 }98 .col-md-push-6 {99 left: 50%; 100 } 101 .col-md-push-5 { 102 left: 41.66666667%; 103 } 104 .col-md-push-4 { 105 left: 33.33333333%; 106 } 107 .col-md-push-3 { 108 left: 25%; 109 } 110 .col-md-push-2 { 111 left: 16.66666667%; 112 } 113 .col-md-push-1 { 114 left: 8.33333333%; 115 } 116 .col-md-push-0 { 117 left: auto; 118 } 119 .col-md-offset-12 { 120 margin-left: 100%; 121 } 122 .col-md-offset-11 { 123 margin-left: 91.66666667%; 124 } 125 .col-md-offset-10 { 126 margin-left: 83.33333333%; 127 } 128 .col-md-offset-9 { 129 margin-left: 75%; 130 } 131 .col-md-offset-8 { 132 margin-left: 66.66666667%; 133 } 134 .col-md-offset-7 { 135 margin-left: 58.33333333%; 136 } 137 .col-md-offset-6 { 138 margin-left: 50%; 139 } 140 .col-md-offset-5 { 141 margin-left: 41.66666667%; 142 } 143 .col-md-offset-4 { 144 margin-left: 33.33333333%; 145 } 146 .col-md-offset-3 { 147 margin-left: 25%; 148 } 149 .col-md-offset-2 { 150 margin-left: 16.66666667%; 151 } 152 .col-md-offset-1 { 153 margin-left: 8.33333333%; 154 } 155 .col-md-offset-0 { 156 margin-left: 0; 157 } 158 }

?.col-lg就不貼了，差不多都是。

實踐圖

---

效果圖：

?

最后

---

?雖然說介紹了布局的基本原理，講得應該算是很詳細了。至少能寫出這么多東西來。

不過?Bootstrap 的布局可不止這些，你有沒有發現??.col-md-offset-* .col-md-push-*?這些類。用這些可以進行很好的細節的排版，不過在這里就不講了，畢竟這篇文章不是寫如何使用 Bootstrap 的，而是讓你理解 Bootstrap 布局的實現原理。

?

提取出的 Bootstrap 布局代碼下載，可獨立使用，就一個css，體積小而且實現了布局系統，當用不著Bootstrap這么100多K的文件的時候

?

轉自：https://www.cnblogs.com/suwings/p/6079178.html

轉載于:https://www.cnblogs.com/itplay/p/10676064.html

總結

以上是生活随笔為你收集整理的【Bootstrap】 框架 栅格布局系统设计原理的全部內容，希望文章能夠幫你解決所遇到的問題。

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