HTML Structure
LastUpdate : 2019/08/27
Modularization 框架類似參考 Bootstrap 網格系統 ，產出的 Page 最外層會有一個 <div class="container"></div>，內由一個或多個 Row 組合，每一個 Row 下有一個或多個 Col ，而每一個 Col 都包多個 Module Content。以下是個簡單的例子:
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Module content</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Module content</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">Module content</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">Module content</div>
</div>
</div>Grid system
Grid System 是經由 Row 和 Col 來建立頁面的架構的，然後再將 Module Content 裝在這些由 Row 和 Col 組成的框框裡面。簡述規則如下：
- 每一個 Row 都包含一组 Col。
- Module Content 放置於 Col 內，並且只有 Col 是 Row 的直接子元素。
- Grid system 中的 Col 是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的 Col 會使用三個 Col Class 為 col-xs-4 來定義。
- 如果一個 row 中包含了的 Col 大於12，多餘的 Col 所在的元素將被作為一個整體另起一行排列。
- Grid system 針對不同設備螢幕寬度做分界點，分為
col-xs-*、col-sm-*、col-md-*、col-lg-*、col-xl-*，螢幕寬度詳細分界點請參考 Grid Options。
Grid Options
| Phone | Tablet | Laptop | Desktop | Extra Large | |
|---|---|---|---|---|---|
| Column width | <576px | 576~768px | 768~991px | 992~1200px | >=1200px |
| Class prefix | col-xs-{columns} | col-sm-{columns} | col-md-{columns} | col-lg-{columns} | col-xl-{columns} |
| Offsetting columns | offset-xs-{columns} | offset-sm-{columns} | offset-md-{columns} | offset-lg-{columns} | offset-xl-{columns} |
| # of columns | 1~12 | ||||
Module Content
一個 col 可以有零個或多個 Module Content ，每一個 Module Content 最外層會有一個 <div class="model-{ModuleName}"></div> 框架，其 HTML 內容會根據各 Module 的設定組成而有所不同，各 Module 詳細的 HTML 架構請參考各 Module 的說明。