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

網站程式設計-PHP
==========

### 一、響應式(RWD)網頁介紹

1. 響應式網頁設計(Responsive Web Design)，網站會自動針對不同瀏覽媒介(桌上型電腦、筆記型電腦、平板、手機)的螢幕尺寸，進行內容調整而以最佳瀏覽(排版)的方式呈現。
2. 需求，Internet Explorer 9 以上，Chrome、Firefox、Opera、Safari則使用最新版本即可
3. 開發成本與時間比網頁APP低
4. 不需要下載APP就能使用
5. 維護成本比APP低
6. 利於SEO(搜尋引擎最佳化)
7. 但小尺寸螢幕不適合複雜的功能或介面
 
### 二、Bootstrap安裝

1. 由Twitter所開發
2. 採模組化設計
3. 官網：<http://getbootstrap.com/>  
   中文：<https://kkbruce.tw/bs3/>
4. Bootstrap範本：<https://kkbruce.tw/bs3/GettingStarted#examples>
 
### 三、佈局規則 Grid System

1. Grid System 使用一系列包含內容的行和列來創建頁面佈局，使用方式如下
2. row 必須放在<span style="color:#FF0000;"> .container </span>(固定寬度) 或<span style="color:#FF0000;"> .container-fluid </span>(100%寬度) 容器中，以便適當的進行對齊和內距(padding)調整。
3. 使用 <span style="color:#FF0000;">row</span> 來建立水平群組的 <span style="color:#FF0000;">column</span>。
4. 內容應該放置在column之內，並且僅只有column能作為row的直接子元素 。
5. 定義好的格線類別，像是<span style="color:#FF0000;"> .row</span> 和<span style="color:#FF0000;"> .col-xs-4</span> 等，可用來快速建立格線布局。
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. <div>格線選項</div><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">格線行為</th> <td>總是水平怖局</td> <td colspan="3">開始是折疊的，當超過判斷點時回復水平怖局</td> </tr> <tr> <th class="text-nowrap">容器寬度</th> <td>無（自動）</td> <td>750px</td> <td>970px</td> <td>1170px</td> </tr> <tr> <th class="text-nowrap">類別前綴</th> <td>`.col-xs-`</td> <td>`.col-sm-`</td> <td>`.col-md-`</td> <td>`.col-lg-`</td> </tr> <tr> <th class="text-nowrap">column 數</th> <td colspan="4">12</td> </tr> <tr> <th class="text-nowrap">column 寬度</th> <td class="text-muted">自動</td> <td>~62px</td> <td>~81px</td> <td>~97px</td> </tr> <tr> <th class="text-nowrap">中縫寬度</th> <td colspan="4">30px（column 左右邊各 15px）</td> </tr> <tr> <th class="text-nowrap">可巢狀套用</th> <td colspan="4">是</td> </tr> <tr> <th class="text-nowrap">位移（Offsets）</th> <td colspan="4">是</td> </tr> <tr> <th class="text-nowrap">column 排序</th> <td colspan="4">是</td> </tr> </tbody> </table>
  
   </div>
 
### 四、Bootstrap 元件

1. Bootstrap：超過數十個可重覆使用的元件建置，元件有符號圖示(Glyphicons)、下拉選單、輸入框(Input)群組、導覽、警告視窗等等許多功能。
2. JavaScript：內含13個JQuery外掛，外掛有提示(tooltip)、彈出視窗(popover)、對話視窗(modal)等具互動性的元件。
3. 巡覽列：<https://kkbruce.tw/bs3/Components#navbar>
 
### 五、HTML5 與 CSS3

1. HTML是描述網頁內容與結構的語言，而CSS則是負責編排的工作，可說是一種控制網頁內容外觀的格式規則集合。
2. HTML決定標題、段落、超連結等基礎的項目，而CSS則是負責美化與定義這些項目的內容樣式。
3. CSS樣式表的全名為 Cascading Style Sheet，它可定義 HTML標籤，將許多文字、圖片、表格、圖層、表單等設計加以格式化。
4. CSS可以自定 CLASS(.) 與 ID(#) 兩種選擇器。
5. CLASS 可以重複 ， ID則是唯一

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown