每日一bootstrap 柵格

最近寫bootstrap少了，老是忘記，所以決定每天從基礎開始一點點敲敲，bootstrap很好學，看着官網的API都敲一遍就會了
一下都是我的一下體會什麼的，希望可以幫到大家~~
今天敲了敲柵格，柵格只要搞清楚柵格把屏幕分成12個分區，有xm，sm，md，lg四大屏幕尺寸，再敲一敲就可以掌握

首先先看一下柵格如何分爲12個區的，我的樣式比官網的醜點- -~~還有一點官網特意強調了，我們使用的row行必須包裹在container和container-fluid下，區別一會看圖講解

<div class="container">
            <div class="row">
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
            </div>
            <div class="row">
              <div class="col-md-8 row_style">.col-md-8</div>
              <div class="col-md-4 row_style">.col-md-4</div>
            </div>
            <div class="row">
              <div class="col-md-4 row_style">.col-md-4</div>
              <div class="col-md-4 row_style">.col-md-4</div>
              <div class="col-md-4 row_style">.col-md-4</div>
            </div>
            <div class="row">
              <div class="col-md-6 row_style">.col-md-6</div>
              <div class="col-md-6 row_style">.col-md-6</div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row">
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
              <div class="col-md-1 row_style">.col-md-1</div>
            </div>
            <div class="row">
              <div class="col-md-8 row_style">.col-md-8</div>
              <div class="col-md-4 row_style">.col-md-4</div>
            </div>
            <div class="row">
              <div class="col-md-4 row_style">.col-md-4</div>
              <div class="col-md-4 row_style">.col-md-4</div>
              <div class="col-md-4 row_style">.col-md-4</div>
            </div>
            <div class="row">
              <div class="col-md-6 row_style">.col-md-6</div>
              <div class="col-md-6 row_style">.col-md-6</div>
            </div>
        </div>

首先可以看出，每行都被分成12個分區，其次這兩份代碼唯一的區別就是外部容器一個是container，一個是container-fluid，第一個是固定寬度，居中在網頁中間，第二個是百分比寬度，寬度爲100%，根據情況我們可以選擇不同的容器。。

下一個例子是柵格的平移。也很簡單
直接上代碼

<div class="row">
          <div class="col-md-4 row_style">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4 row_style">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3 row_style">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-3 col-md-offset-3 row_style">.col-md-3 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3 row_style">.col-md-6 .col-md-offset-3</div>
</div>

我們可以計算一下第一行佔據了多少個區4+4+4=12，正好佔滿一行，記住一點就是，無論何時都分爲12個，無論你平移還是嵌套，嵌套下面說。

下面說的是嵌套，一句話記住12個區，爲什麼呢，結合圖和代碼看得更清楚

<div class="container">
            <div class="row">
                <div class="col-md-8 row_style">
                    <div class="col-md-6">col-md-6</div>
                    <div class="col-md-6">col-md-6</div>
                </div>
                <div class="col-md-4 row_style">
                    <div class="col-md-8">col-md-8</div>
                    <div class="col-md-4">col-md-4</div>
                </div>
            </div>
        </div>

第一層我分爲了8+4爲12 是一整行，而他們的嵌套我分爲了6+6=12和8+4=12，也就是說嵌套裏面也分爲了12個區。。所以說無論何時都是12個區
上面有一個row_style的樣式是方便看得更清楚
代碼如下，用的方法比較笨- -

.row_style{
    background-color: #ccc;
    border: 1px solid #000;
    margin-top:10px;
}