Bootstrap布局容器與柵格系統

• 布局容器

  • Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類。注意，由於 padding 等屬性的原因，這兩種 容器類不能互相嵌套。
  • .container 類用於固定寬度並支持響應式布局的容器。

  <div class="container">
    ...
  </div>
  

  • .container-fluid 類用於 100% 寬度，占據全部視口（viewport）的容器，流式布局容器。

  <div class="container-fluid">
    ...
  </div>
  

• 柵格系統

  • 每行總列數是12
  • 對於多層嵌套的情況，最好一層row，一層col，間隔着緊挨着使用（確定？？？）
  • 如果希望每列之間有間隔，可以給每列加一個padding
    • 但是要注意，如果這一列里面還有row類的元素的話，這個padding的值要大於15px，因為row這個class默認就會有margin-left和margin-right為15px
    • 有陰影效果時，table的box-shadow陰影效果在edge上無效，那么就要外面套一層div，然后在div上設置box-shadow陰影效果；然后如果業務上還需要把布局平分為兩列且有間隔，每列里面有一個table，這時如果使用了bootstrap的柵格布局，那么兩列之間的間距只能使用padding來實現而不能使用margin，但同時box-shadow陰影效果是在邊框上的，那么會導致陰影效果和table之間有空白，那么就要在這個div外面再套一層div，外層div有padding，內層div有陰影效果。
  • 柵格參數（4.0之后細分成了5個區間）
    • col-xs-適用於超小屏幕 手機 (<576px)
    • col-sm-適用於小屏幕 平板 (≥576px)
    • col-md-適用於中等屏幕 桌面顯示器 (≥768px)
    • col-lg-適用於大屏幕 大桌面顯示器 (≥992px)
    • col-xl-適用於超大屏幕 超大桌面顯示器 (≥1200px)

• 該用table的時候就用table，不一定非要用div來模擬，當然table外面可以根據需要套一層div。

• 僅在需要的時候再用柵格系統！！！比如需要按比例動態布局時，不然會帶來很多問題，因為會有很多自帶的樣式。

• 如果想要每一列的元素（如div）有一個最小寬度，那么可以設置其min-width樣式，這樣在寬度不夠時，第二列會被擠到下一行。