[Bootstrap 3] 格狀系統 Grid System

參考：https://getbootstrap.com/css/#grid

 

格狀系統的使用會用到很多層<div> 或是其他像似Tag(<main>, <section> 之類)

 

1. 在最外圈放入.container 或 .container-fluid

<div class="container">

......

</div>

 

2. 在裡面放入.row

<div class="container">

  <div class="row">

    .....

  </div>

</div>

 

3. Bootstrap會把row所佔的寬度切成12等分，類似<table>

如果分別佔3等分 或是 9等分寫法如下

<div class="container">

   <div class="row">

       <div class="col-xs-3">

          佔3等分

       </div>

       <div class="col-xs-9">

          佔9等分

       </div>

  </div>

</div>

 

4. 如果不同的裝置要切成不同的等分，需要用不同的Class

其中xs代表裝置寬度小魚768px(手機裝置)，

sm代表大於768px且小於992px(平板)，

md代表大於992px且小於1200px(筆電)，

lg代表大於1200px(外接螢幕)。

 

 

所以若指定筆電為 2 / 10 分，寫法如下

<div class="container">

   <div class="row">

       <div class="col-xs-3 col-md-2">

          佔3等分

       </div>

       <div class="col-xs-9 col-md-10">

          佔9等分

       </div>

  </div>

</div>

 

5. 如果大裝置沒有被設定則會沿用小裝置的設定。

如：已加入.col-xs-9 其他都沒加

會相同於class=".col-xs-9 .col-sm-9 .col-md-9 .col-lg-9"

 

如果加入 .col-xs-9  .col-md-8

則等於 .col-xs-9  .col-sm-9 .col-md-8  .col-lg-8