1. 柵格系統(tǒng)
bootstrap 提供了一套非常強大的系統(tǒng) —— 響應式、移動設備優(yōu)先的柵格系統(tǒng)。它可以隨著設備或者視口的尺寸大小的增加而適當的擴展列數（最多到12列）。
1.1 工作原理
首先，響應式的內容必須要用一個
.container（固定寬度）或者.container-fluid（100%寬度）包裹起來，然后接下來的直接元素必須是.row這個類名，這樣才會被賦予合適的排列和內補；通過行（row）在水平方向上創(chuàng)建一組 列（column），內容必須要放在列中，只有列才能作為行的直接子元素；
1.2 柵格參數
在使用柵格參數時，需要注意：例如當定義了 .col-md-1 時，代表寬度大于 992px 時，這一列將會占用 1/12 的寬度，如果沒有定義更大的類 .col-lg ，那當顯示器大于 1200px 時，排列的寬度仍會按照 col-md-1 來分配。但是，如果沒有定義更小的類，當前元素將會失去柵格的樣式，變成一個普通的div（沒有浮動、也沒有寬度，默認占滿一整行）。
1.3 列偏移
由于 bootstrap 3 的柵格布局是通過浮動來實現的，所以當我們一行中有一塊未占滿一整行，但又需要進行偏移或者居中的元素，就沒法通過 marin: 0 auto 或者 text-align: center ，這時就可以使用列偏移來讓該列進行偏移。
要進行列偏移，需要在對應的列中添加 col-md-offset-x
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n17" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><div class="col-md-8 col-md-offset-2">我占了3列</div></pre>
偏移完成后，我們會發(fā)現，bootstrap 偏移的原理是通過 margin-left 來實現的，所以 col-md-8 后面的與納素，也會跟著一起被推開。當偏移量加元素本身的寬度大于12列時，會導致后面的元素進行換行。另外，由于偏移是固定使用 margin-left 屬性，所以偏移只能向右偏移。
1.4 列排序
列排序，就是可以將列的顯示順序進行替換。但列排序和列偏移有點不同，就是列偏移是通過 margin-left 來實現的，但是列排序卻是通過相對定位來實現的。所以列排序它不會影響到周圍元素的布局（會導致元素之間的重疊）。
要實現列排序，只需要通過 col-md-pull 或者 col-md-push 來進行左偏移和右偏移。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n22" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><div class="row">
<div class="col-md-9 col-md-push-3"><input type="text" placeholder="username"></div>
<div class="col-md-3 col-md-pull-9"><input type="password" placeholder="password"></div>
</div></pre>
