使用者介面與互動架構
下載 Bootstrap
包含的文件
在網頁中使用 Bootstrap
佈局
嵌套佈局與流動佈局
響應式佈局
把現有的固定寬度佈局轉換成響應式佈局
響應式佈局的實用類
常用標籤與樣式
清單
程式碼
Google美化
表格
表單
文字方塊的前綴與後綴
單選按鈕
複選框
選擇清單
表單的排版
按鈕
按鈕群組
帶有下拉式選單的按鈕
導航選單
導覽選單裡的下拉選單
導航選單的響應式設計
選項卡 #1
選項卡 #2
導覽路徑與分頁器
提示訊息
縮圖
對話框
工具提示
折疊內容
旋轉木馬
課程介紹
響應式設計的真實例子
viewport - 可視窗口
手動配置 viewport
像素密度
應用媒體查詢的方法
media type 媒體類型
meida feature 媒體特性
aspect-ratio 可視窗口寬與高的比例
aspect-ratio 設備的寬與高的比例
orientation 設備的使用方向
height （可視視窗高度）與 device-height（裝置高度）
width（視覺視窗寬度） 與 device-width（裝置寬度）
resolution 像素密度
操作符 - and
逗號分隔連接多個媒體查詢
運算子 - not
響應式佈局 #1
響應式佈局 #2
響應式佈局 #3
響應式導航
導覽選單的 HTML
導覽選單的 CSS
切換按鈕的樣式
響應式導覽選單的樣式
響應式的圖像
響應式的背景影像
不同尺寸的設備使用不同的影像
不同尺寸的設備使用不同的背景影像
根據螢幕密度切換不同的背景影像
圖片填充
響應式幻燈片
幻燈片的控制按鈕
投影片的控制按鈕樣式
修復投影片被覆蓋的問題
結束語
本教學說明如何在網頁版面中應用響應式設計。在課程中，您將學到響應式 Web 設計。隨著行動裝置的普及，如何讓使用者透過行動裝置瀏覽您的網站獲得良好的視覺效果，已經是一個不可避免的問題了。響應式 Web 設計就是實現這個目的的有效方法。
