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

網頁設計好好玩(10501)
==============

### 一、Grid System網格系統 介紹

1. Grid System 使用一系列包含內容的行和列來創建頁面佈局，使用方式如下
2. <span style="color:#FF0000;">row</span> 必須放在 <span style="color:#FF0000;">.container</span> (固定寬度) 或 <span style="color:#FF0000;">.container-fluid</span> (100%寬度) 容器中，以便適當的進行對齊和內距(padding)調整。
3. 使用 row 來建立水平群組的 column。
4. 內容應該放置在column之內，並且僅只有column能作為row的直接子元素 。
5. 定義好的格線類別，像是 .row 和 .col-xs-4 等，可用來快速建立格線布局。
6. 每個row中允許的column，加總之數值最大為 <span style="color:#FF0000;">12</span> 。舉例來說，四個相等的column 應使用 四個 <span style="color:#FF0000;">col-xs-3</span> 來設置。
7. 如果超過12個 column 放在單一個 row 中，每個群組額外的 column 將作為一個單元包裝到新的一行。
8. 格線類別的套用，會使用設備螢幕寬度大於或等於來當判斷點，而且針對較小螢幕設備進行了格線類別的重寫。因此，套用<span style="color:#FF0000;"> .col-md- </span>到元素上時，不僅僅是影響中螢幕設備的樣式，也會影響大螢幕設備的樣式(如果沒有套用<span style="color:#FF0000;"> .col-lg- </span>)。
9. 格線選項
  
   <table> <thead> <tr> <th> </th> <th>超小螢幕設備 <small>手機（<768px）</small></th> <th>小螢幕設備 <small>平板（≥768px）</small></th> <th>中螢幕設備 <small>桌面（≥992px）</small></th> <th>大螢幕設備 <small>大桌面（≥1200px）</small></th> </tr> </thead> <tbody> <tr> <th>格線行為</th> <td>總是水平怖局</td> <td colspan="3">開始是折疊的，當超過判斷點時回復水平怖局</td> </tr> <tr> <th>容器寬度</th> <td>無（自動）</td> <td>750px</td> <td>970px</td> <td>1170px</td> </tr> <tr> <th>類別前綴</th> <td>`.col-xs-`</td> <td>`.col-sm-`</td> <td>`.col-md-`</td> <td>`.col-lg-`</td> </tr> <tr> <th>column 數</th> <td colspan="4">12</td> </tr> <tr> <th>column 寬度</th> <td>自動</td> <td>~62px</td> <td>~81px</td> <td>~97px</td> </tr> <tr> <th>中縫寬度</th> <td colspan="4">30px（column 左右邊各 15px）</td> </tr> <tr> <th>可巢狀套用</th> <td colspan="4">是</td> </tr> <tr> <th>位移（Offsets）</th> <td colspan="4">是</td> </tr> <tr> <th>column 排序</th> <td colspan="4">是</td> </tr> </tbody> </table>
 
### 二、練習

1. 建立一個網頁 5-1.html
2. [複製框架](https://www.ugm.com.tw/modules/tad_book3/page.php?tbdsn=322)
3. 更改title => 5-1.html
4. 在css/ => 建立一個 style.css ```
  <pre class="brush:as3;">
  
      
      <link rel="stylesheet" type="text/css" href="css/style.css">
  ```
5. 建立三個區塊 ```
  <pre class="brush:as3;">
  
      <div>第一個區塊</div>
      <div class="container">第二個區塊</div>
      <div class="container-fluid">第三個區塊</div>
  ```
  
  ![](https://www.ugm.com.tw/uploads/tad_book3/image/10502/hhjh/5/5-1.jpg)
6. CSS 邊界 (Margin)
7. CSS 留白 (Padding)

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown