內容簡介
基於“回響式內容”的本質，頁面應該在任何合理螢幕大小的設備上看上去都很舒服，我們做設計的就應該站在用戶的角度考慮，一切設計都應該看上去很美、很實用。本書的回響式設計正是基於這一理念，從小到一個圖示，大到完整的頁面布局，都從回響式UI設計入手，適合所有回響式設計的入門人員和中小企業的網站搭建人員學習。本書分為3篇共11章，第一篇是回響式設計基礎，我們首先介紹清楚到底什麼是回響式設計，然後介紹分解回響式設計頁面，包括頁面中的元素、頁面的布局、導航欄、多媒體等；第二篇是回響式設計框架，詳細介紹了目前使用最廣泛的Bootstrap框架，包括它的各種樣式設計和特效設計；最後一篇是實戰，用一個Bootstrap貼吧和HTML 5扁平化公司主頁，實踐前面所學的內容。
作者簡介
楊旺功，男，畢業於重慶郵電大學，碩士。現任北京印刷學院設計藝術學院教師，主要研究方向是信息與互動設計產品創新設計，具有豐富的數字媒體互動產品設計和移動套用UI設計的教學經驗。在數位化藝術與設計領域成果顯著，發表多篇數位化藝術與設計的論文，對信息與互動設計有深入的研究。
趙榮嬌，女，畢業於中國傳媒大學，碩士。中國傳媒大學新媒體研究院主辦《信息科技周刊》總編輯，《新媒體技術動態》發起人。
圖書目錄
第1章 傳說中的回響式設計 1
1.1 支持跨平台設備的回響式設計 1
1.1.1 什麼樣的設計是回響式的 1
1.1.2 回響式設計堅守的4大原則 3
1.2 回響式設計與其他頁面設計的對比 4
1.2.1 固定布局 5
1.2.2 流式布局 7
1.3 實戰：創建一個回響式網頁 9
1.3.1 設定HTML文檔的Meta標籤 9
1.3.2 設計HTML文檔結構 9
1.3.3 使用CSS 3媒介查詢 10
1.3.4 運行第一個回響式頁面 12
1.4 小結 14
第2章 回響式網頁中的元素 15
2.1 文字 15
2.2 表單 18
2.2.1 自定義Radiobox 19
2.2.2 自定義Checkbox動畫 21
2.2.3 美化輸入框 24
2.2.4 下拉框 27
2.3 框架 28
2.3.1 傳統的iFrame框架 29
2.3.2 回響式的iFrame框架 29
2.4 實戰：實現一個回響式登錄表單 31
2.4.1 設定登錄表單的HTML結構 31
2.4.2 設計登錄表單的通用樣式 33
2.4.3 使用CSS 3媒介查詢實現回響式登錄表單 35
2.5 小結 37
第3章 回響式布局 38
3.1 布局切換 38
3.2 側邊欄 40
3.3 寬高等比例變化 44
3.4 列表 46
3.4.1 定義列表分級選單 46
3.4.2 列表切換效果 48
3.5 表格 52
3.5.1 簡單自適應表格 52
3.5.2 翻轉滾動表格 55
3.5.3 隱藏表格欄目 60
3.6 實戰：回響式商品展示列表 61
3.7 小結 64
第4章 回響式導航 65
4.1 回響式導航選單設計五大原則 65
4.1.1 按照優先權顯示內容 65
4.1.2 用創造力來處理有限的空間 66
4.1.3 下拉選單 66
4.1.4 給導航選單換位置 66
4.1.5 放棄導航選單 66
4.2 導航類型 66
4.2.1 單層導航 67
4.2.2 多層導航 70
4.2.3 麵包屑導航 72
4.3 頁碼設計 73
4.4 小結 75
第5章 回響式多媒體 76
5.1 圖示的回響式 76
5.2 圖像 78
5.2.1 可適配的圖像 78
5.2.2 圖像格線 80
5.3 視頻 84
5.3.1 內嵌視頻回響式的難點 85
5.3.2 從其他網站中手動嵌入視頻 85
5.4 回響式圖表 86
5.4.1 一款回響式圖表庫 86
5.4.2 帶Tooltip提示的線形圖 88
5.4.3 簡單的餅圖 91
5.5 小結 93
第6章 Bootstrap入門 94
6.1 初次接觸Bootstrap 94
6.1.1 Bootstrap的優勢 94
6.1.2 下載Bootstrap 96
6.2 在網站中引入Bootstrap 97
6.3 調用Bootstrap的樣式 98
6.4 調用Bootstrap的組件 100
6.5 調用Bootstrap的js特效 101
6.6 實戰：一個Bootstrap實現的回響式頁面V1.0 102
6.7 小結 104
第7章 Bootstrap的樣式設計 105
7.1 字型 105
7.1.1 標題 105
7.1.2 全局字型和段落 106
7.2 表格 107
7.2.1 基本用法 108
7.2.2 表格的附加樣式 108
7.2.3 為表格行或單元格添加狀態標識 110
7.2.4 回響式表格 112
7.3 表單 112
7.4 按鈕 115
7.4.1 按鈕的基本樣式 115
7.4.2 調節按鈕大小 116
7.4.3 塊級按鈕 117
7.4.4 為按鈕設定不可點擊樣式 118
7.5 圖片 118
7.5.1 圖片類 118
7.5.2 回響式圖片 119
7.6 Bootstrap工具類 119
7.6.1 回響式工具 119
7.6.2 工具類 120
7.7 實戰：Bootstrap回響式頁面V2.0 122
7.8 小結 123
第8章 Bootstrap的組件設計 124
8.1 下拉選單 124
8.2 按鈕組 125
8.2.1 垂直排列的按鈕組 126
8.2.2 兩端對齊的按鈕組 126
8.2.3 嵌套按鈕組 127
8.3 input控制項組 128
8.3.1 最常見的搜尋框 128
8.3.2 帶提示的搜尋框 128
8.4 導航 129
8.4.1 膠囊式導航 129
8.4.2 麵包屑導航 130
8.4.3 頭部導航 130
8.5 列表組 133
8.6 分頁 134
8.6.1 普通的分頁 134
8.6.2 上一頁/下一頁 135
8.7 標籤 136
8.8 面板 137
8.9 進度條 139
8.10 縮略圖 140
8.11 實戰：Bootstrap回響式頁面V3.0 142
8.12 小結 143
第9章 Bootstrap的特效設計 144
9.1 模態對話框 144
9.2 標籤頁切換 146
9.3 Tootip 147
9.4 彈出框 147
9.5 摺疊 148
9.6 幻燈片 149
9.7 實戰：Bootstrap回響式頁面V4.0 151
9.8 小結 153
第10章 使用Bootstrap實現一個百度貼吧後台 154
10.1 確定後台管理的需求 154
10.2 設計頁面布局 155
10.2.1 引入Bootstrap 3框架 155
10.2.2 實現頁面布局代碼 156
10.3 設計導航欄 157
10.3.1 構建導航的整體架構 157
10.3.2 設計標題和導航連結 158
10.3.3 實現搜尋框和通知系統 158
10.3.4 實現管理員的登錄信息 159
10.3.5 構建回響式導航 160
10.4 設計左側邊欄 162
10.5 設計主功能部分 163
10.5.1 主功能的頭部 163
10.5.2 主功能的帖子列表 165
10.6 小結 168
第11章 使用HTML 5設計扁平化的公司主頁 169
11.1 回響式設計的關鍵 169
11.2 導航欄的設計 170
11.2.1 列表的實現 170
11.2.2 彈出式選單的實現 174
11.3 主功能部分的設計 176
11.3.1 什麼是視差滾動效果 176
11.3.2 視差效果的實現 176
11.3.3 圖文列表的實現 178
11.4 小結 183
附錄 CSS 3選擇器使用一覽 184
f1.1 標籤選擇器 184
f1.2 類選擇器 184
f1.3 id選擇器 185
f1.4 通配符選擇器 186
f1.5 子元素選擇器 186
f1.6 後代元素選擇器 187
f1.7 相鄰元素選擇器 187
f1.8 屬性選擇器 188
f1.9 組選擇器 188
f1.10 複合選擇器 189
f1.11 結構化偽類 190
f1.12 目標偽類:target 195
f1.13 狀態偽類 195
f1.14 否定偽類:not(S) 196
