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

PHP SMARTY 樣板引擎
===============

一、bootstrap 容器

1. container
2. container-fluid(滿版)
 
二、bootstrap 網格系統

<div class="table-responsive"> <table class="table table-bordered table-striped"> <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 class="text-nowrap" scope="row">栅格系统行为</th> <td>总是水平排列</td> <td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td> </tr> <tr> <th class="text-nowrap" scope="row">`.container ` 最大宽度</th> <td>None （自动）</td> <td>750px</td> <td>970px</td> <td>1170px</td> </tr> <tr> <th class="text-nowrap" scope="row">类前缀</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">列（column）数</th> <td colspan="4">12</td> </tr> <tr> <th class="text-nowrap" scope="row">最大列（column）宽</th> <td class="text-muted">自动</td> <td>~62px</td> <td>~81px</td> <td>~97px</td> </tr> <tr> <th class="text-nowrap" scope="row">槽（gutter）宽</th> <td colspan="4">30px （每列左右均有 15px）</td> </tr> <tr> <th class="text-nowrap" scope="row">可嵌套</th> <td colspan="4">是</td> </tr> <tr> <th class="text-nowrap" scope="row">偏移（Offsets）</th> <td colspan="4">是</td> </tr> <tr> <th class="text-nowrap" scope="row">列排序</th> <td colspan="4">是</td> </tr> </tbody> </table>

</div>三、表單

1. form：[http://www.w3school.com.cn/html/html\_forms.asp](http://www.w3school.com.cn/html/html_forms.asp)   
   action 屬性：指定某個服務器的腳本，來處理提交的表單  
   method屬性：規定在提交表單時所用的HTTP方法（GET或POST)
2. 表單元素：[http://www.w3school.com.cn/html/html\_form\_elements.asp](http://www.w3school.com.cn/html/html_form_elements.asp)   
   input：單行  
   select：下拉選單  
   textarea：多行
3. html輸入類型：[http://www.w3school.com.cn/html/html\_form\_input\_types.asp](http://www.w3school.com.cn/html/html_form_input_types.asp)  
   *<input type="text">：文本  
   <input type="password"> ：密碼  
   <input type="submit">：提交*  
   <input type="radio"> ：單選  
   <input type="checkbox">：複選  
   *<input type="button>：按鈕  
   以及html5新增的類型*
4. *圖解  
   ![](https://docs.google.com/drawings/d/e/2PACX-1vRTEvKQcwH5FPVsQmyIA0yn6YF4shd1jFsje9RdVZTu4vi1V6XJP54CUyG4C7B8nRcl8Dl7TeXZWWV_/pub?w=803&h=684)*
 
四、包裝表單

1. 按鈕：<http://v3.bootcss.com/css/#buttons>   
   class="btn btn-primary btn-xs" => "button類 顏色 尺吋"
2. bootstrap 整合應用：  
   ![](https://docs.google.com/drawings/d/e/2PACX-1vRnVujom8Cx4_ToNuXCKWBJb0TATufqQGB0RErWFplpLoQB61ou6pYBwz4s_pKKpEfn7Vta0xQ_NOjP/pub?w=755&h=821)
3. [20171018](http://st.ugm.com.tw/p_20171018_6.zip)

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown