2. Bootstrap 網頁框架(上)

一、響應式(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 必須放在 .container (固定寬度) 或 .container-fluid (100%寬度) 容器中，以便適當的進行對齊和內距(padding)調整。
3. 使用 row 來建立水平群組的 column。
4. 內容應該放置在column之內，並且僅只有column能作為row的直接子元素 。
5. 定義好的格線類別，像是 .row 和 .col-xs-4 等，可用來快速建立格線布局。
6. 每個row中允許的column，加總之數值最大為 12 。舉例來說，四個相等的column 應使用 四個 col-xs-3 來設置。
7. 如果超過12個 column 放在單一個 row 中，每個群組額外的 column 將作為一個單元包裝到新的一行。
8. 格線類別的套用，會使用設備螢幕寬度大於或等於來當判斷點，而且針對較小螢幕設備進行了格線類別的重寫。因此，套用 .col-md- 到元素上時，不僅僅是影響中螢幕設備的樣式，也會影響大螢幕設備的樣式(如果沒有套用 .col-lg- )。
9. 格線選項

   	超小螢幕設備 手機（<768px）	小螢幕設備 平板（≥768px）	中螢幕設備 桌面（≥992px）	大螢幕設備 大桌面（≥1200px）
   格線行為	總是水平怖局	開始是折疊的，當超過判斷點時回復水平怖局
   容器寬度	無（自動）	750px	970px	1170px
   類別前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
   column 數	12
   column 寬度	自動	~62px	~81px	~97px
   中縫寬度	30px（column 左右邊各 15px）
   可巢狀套用	是
   位移（Offsets）	是
   column 排序	是

四、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則是唯一