响应式设计

1 .資訊與 科技 -8 響應式 設計 ( Responsive Web Design) 朱學亭老師

2 .大綱 什麼是響應 式設計 (Responsive Web Design) 什麼是 Bootstrap 什麼是網頁格系統 (Grid system) 針對不同 Device 的網頁設計

3 .什麼是響應式網頁 設計 ( Responsive Web Design) 網站 使用 CSS3 彈性 的畫面設計 ， 在 不同解析度下改變網頁頁面的佈局 排版 讓 不同的設備都可以正常瀏覽同一 網站

4 .什麼是 Bootstrap Bootstrap 是響應 式設計 框架主流 包括 HTML 、 CSS 及 JavaScript 的 框架 提供字體 排印、表單、按鈕、導航及其他各種 元件 提供 Javascript 擴充 套件。 Bootstrap 與最新版的 Google Chrome 、 Firefox 、 Internet Explorer 、 Opera 和 Safari 瀏覽器相容，儘管有些瀏覽器並不是支援所有作業系統 。 頁面布局可以根據顯示網頁的裝置（桌面、平板電腦、手機）來進行動態調整。

5 .Bootstrap CSS Bootstrap 對一系列 HTML 元件的基本樣式進行了定義，並且為文字、表格和表單元素設計了一套獨特的、現代化的樣式。 例如 Bootstrap 定義了 HTML 的表格標箋 <table> 對應的 CSS 樣式 (.Table) ， 只要在 HTML 檔案中宣告使用 Bootstrap CSS ， 這樣做出來的表格 ， 就會有不錯的外觀及 響應式設計。

6 .表格 Bootstrap CSS 的 呈現 (1) 條列式表格行 (Striped rows) <table class="table table-striped"> ... </table>

7 .表格 Bootstrap CSS 的 呈現 (2) 表格外框 (Bordered table) <table class="table table-bordered"> ... </table>

8 .表格 Bootstrap CSS 的 呈現 (3) 浮標表格列 (Hover rows) <table class="table table-hover"> ... </table>

9 .Bootstrap 元件 Bootstrap 還包括了其他常用的介面 元素 ： 帶有 高階功能的按鈕（例如按鈕組合 、 帶有 下拉式選單選項的按鈕 、 導航 欄 、 水平 和垂直標籤組、導航、分頁等等） 、 標籤 、高階排版、縮圖、警告資訊、進度條等 。 這些 元件都使用 CSS 的類實現。在頁面中需要將其對應到特定的 HTML 元素上面。

10 .Glyphicons 小圖示

11 .Bootstrap 內建一些小圖示範例 <button type="button" class=" btn btn -default" aria-label="Left Align"> <span class=" glyphicon glyphicon -align-left" aria-hidden="true"></span> </button>   <button type="button" class=" btn btn -default btn-lg "> <span class=" glyphicon glyphicon -star" aria-hidden="true"></span> Star </button>

12 .Dropdown( 下拉式選單） <div class="dropdown"> <button class=" btn btn -default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria- haspopup ="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> < ul class="dropdown-menu" aria- labelledby ="dropdownMenu1"> <li><a href ="#">Action</a></li> <li><a href ="#">Another action</a></li> <li><a href ="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href ="#">Separated link</a></li> </ ul > </div>

13 .JavaScript 元件 通過 jQuery ， Bootstrap 加入了一些 JavaScript 元件 。提供了 ： 對話 方塊 、 工具 提示 、 輪 播等功能 。 此外 還增強了一些使用者介面元素的功能， 例如 ： 輸入 框的自動完成 。 Bootstrap 2.0 支援以下 JavaScript 外掛模組： Modal （模態對話方塊）、、 Scrollspy （捲動監聽）、 Tab （分頁）、 Tooltip （工具提示）、 Popover （浮動提示）、 Alert （警告）、 Button （按鈕）、 Collapse （摺疊）、 Carousel （輪播）、 Typeahead （輸入提示）、 Affix （附加導航）。

14 .Carousel （輪播） 亞大服學組網站的 Carousel （輪播） 。 https://sls.asia.edu.tw/

15 .使用 Bootstrap 做 響應 式設計 電腦畫面 手機畫面 手機畫面可以由 Chrome 流覽器的 Responsive Web Design Tester 查看 。

16 .Chrome 流覽器的 Responsive Web Design Tester

17 .Chrome 流覽器的 Responsive Web Design Tester

18 .網頁格系統 (Grid system) 響應式設計是同一個網頁可以根據查詢顯示的頁面大小來決定顯示的畫面格式。 Bootstrap 要達到這個目的，有兩個步驟 ： 第 一個步驟是透過 jQuery 的函數查詢網頁畫面的大小。 Queries 的分段點： • Mobile – xs ( < 768px ) • Tablet – sm ( 768~991px ) • Desktop – md ( 992~1200px ) • Large Desktop - lg ( >= 1200px ) 第二個步驟是將網頁根據網頁格系統 (Grid System) 來決定呈現方式。

19 .網頁格系統 (Grid system ) 後綴

20 .針對不同 Device 的 網頁設計 混合 不同的 Grid Class 就可以達到響應式設計 。每一種 class 單獨控制一種裝置，例如： col- xs -* 控制 Mobile ， col-sm-6-* 控制 Tablet ， col-md-* 控制 Desktop 。