育將電腦工作室 - 線上書籍

網頁設計與雲端應用
=========

### 一、工作原理

1. 頁面由row(列)、column(欄)所組成，資料放在由row、column所組成的框框裡
2. 一列數據(row)必須包含在 .container(固定) 或 .container-fluid(滿版) 中，以便為其賦予合適的對齊方式與留白(padding)
3. 使用 row，在水平方向創建 column
4. column用來放置「具體的內容」，且只它可以作為 row 的直接子元素
5. 格線系統：將畫面分成12格（等份），透過列 (row) 與欄 (column) 的組合建立頁面佈局。 <div class="table-responsive"> <table class="table table-bordered table-striped"> <thead> <tr> <th> </th> <th><font><font>超小屏幕 </font></font><small><font><font>手機(<768px)</font></font></small></th> <th><font><font>小屏幕 </font></font><small><font><font>平板(≥768px)</font></font></small></th> <th><font><font>中等屏幕 </font></font><small><font><font>桌面顯示器(≥992px)</font></font></small></th> <th><font><font>大屏幕 </font></font><small><font><font>大桌面顯示器(≥1200px)</font></font></small></th> </tr> </thead> <tbody> <tr> <th class="text-nowrap" scope="row"><font><font>柵格系統行為</font></font></th> <td><font><font>總是水平排列</font></font></td> <td colspan="3"><font><font>開始是堆疊在一起的，當大於這些閾值時將變為水平排列C</font></font></td> </tr> <tr> <th class="text-nowrap" scope="row">`.container`<font><font> 最大寬度</font></font></th> <td><font><font>None （自動）</font></font></td> <td><font><font>750px</font></font></td> <td><font><font>970px</font></font></td> <td><font><font>1170px</font></font></td> </tr> <tr> <th class="text-nowrap" scope="row"><font><font>類前綴</font></font></th> <td>`.col-xs-`</td> <td>`.col-sm-`</td> <td>`.col-md-`</td> <td>`.col-lg-`</td> </tr> <tr> <th class="text-nowrap" scope="row"><font><font>列（column）數</font></font></th> <td colspan="4"><font><font>12</font></font></td> </tr> <tr> <th class="text-nowrap" scope="row"><font><font>最大列（column）寬</font></font></th> <td class="text-muted"><font><font>自動</font></font></td> <td><font><font>~62px</font></font></td> <td><font><font>~81px</font></font></td> <td><font><font>~97px</font></font></td> </tr> <tr> <th class="text-nowrap" scope="row"><font><font>槽（gutter）寬</font></font></th> <td colspan="4"><font><font>30px （每列左右均有15px）</font></font></td> </tr> <tr> <th class="text-nowrap" scope="row"><font><font>可嵌套</font></font></th> <td colspan="4"><font><font>是</font></font></td> </tr> <tr> <th class="text-nowrap" scope="row"><font><font>偏移（Offsets）</font></font></th> <td colspan="4"><font><font>是</font></font></td> </tr> <tr> <th class="text-nowrap" scope="row"><font><font>列排序</font></font></th> <td colspan="4"><font><font>是</font></font></td> </tr> </tbody> </table>
  
   </div>
6. 練習 ```
  <pre class="brush:as3;">
      <div class="container">
        <div class="row">
          <div class="col-md-3"><h2>HTML</h2></div>
          <div class="col-md-3"><h2>CSS</h2></div>
          <div class="col-md-3"><h2>JS</h2></div>
          <div class="col-md-3"><h2>BOOTSTRAP</h2></div>
        </div>
      </div>
  ```
 
### 二、Media Queries的分段點

1. 手機 – xs ( < 768px )
2. 平板 – sm ( 768~991px )
3. 桌機 – md ( 992~1200px )
4. 大螢幕 - lg ( >= 1200px )
 
### 三、常用

1. 超過12欄，則會在下方另起一列
2. 只要是放在col-xx中，就一定會有所謂的gutter（欄和欄之間的間距）
3. Bootstrap將<body>和所有段落元素的font-size預設為 14px，line-height預設為 1.428。<p>元素的margin-bottom預設了 1/2 行高（即 10px）
4. 段落中內容對齊：.text-left（靠左對齊）；.text-center（置中對齊）；.text-right（靠右對齊）；.text-justify（分散對齊）；.text-nowrap（不換行）
5. 向左浮動是.pull-left；向右浮動是.pull-right；要清除浮動則用.clearfix
6. 顯示某元件可套用.show，隱藏某元件則用.hidden

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown