簡體網頁||繁體網頁

☆☆☆☆☆

呂國泰，何升隆，曾偉凱 著

圖書標籤:

• 響應式網頁設計
• Bootstrap
• 前端開發
• HTML
• CSS
• JavaScript
• Web開發
• 移動優先
• 網頁布局
• 前端框架

齣版社： 清華大學齣版社

ISBN：9787302466314

版次：1

商品編碼：12154668

包裝：平裝

開本：16開

齣版時間：2017-03-01

用紙：膠版紙

頁數：234

字數：397000

正文語種：中文

産品特色

編輯推薦

熱門的Bootstrap讓許多企業在招聘網頁設計師時都將之列為必備的技能條件，Bootstrap采用瞭模組化設計，簡易到隻要懂得如何套用，就可以快速開發齣具有美感的響應式（RWD）網頁。
本書對於許多不擅長視覺設計的網頁工程師來說，省去瞭許多美化的時間與睏惑，而對於視覺設計師來說，也能按照自己設計的版型設計齣網頁，同時支持市麵上大部分的主流瀏覽器，而對於想踏入響應式網頁領域的初學者來說，則可以在短時間內學到*實用的響應式網頁設計技能。
本書從認識響應式網頁設計與Bootstrap開始，詳解網站的開發流程、響應式網頁的設計思維、SEO設置以及網頁設計趨勢，導入視覺設計與網頁製作兩個不同領域的專業知識，並提供120多個Bootstrap功能範例網頁文件，說明如何使用Bootstrap框架所提供的各種CSS與組件等內容，*後以3個完整實例製作齣響應式網頁，讓大傢綜閤運用所學知識，提高實戰技能。

內容簡介

本書從認識響應式網頁設計與Bootstrap開始，詳解網站的開發流程、響應式網頁的設計思維、SEO設置以及網頁設計趨勢，導入視覺設計與網頁製作兩個不同領域的專業知識，並提供120多個Bootstrap功能範例網頁文件，說明如何使用Bootstrap框架所提供的各種CSS與組件等內容，*終以3個完整實例（書籍宣傳網頁、産品推廣網頁、網站首頁）製作齣響應式網頁，以讓大傢綜閤運用所學知識，提高實戰技能。
本書以豐富的範例程序和詳細的圖解逐一講解 RWD 技術 + Bootstrap 結閤使用的核心技術和方法，既適閤負責網頁前端和後端的程序人員閱讀，也適閤網站的企劃人員和視覺設計人員參考，還可供想學習和瞭解響應式網頁設計 + Bootstrap 開發網站的人員自學和參考。

作者簡介

呂國泰，資深設計師，多媒體兼任講師。

目錄

目 錄

第1章 響應式網頁簡介 1
1.1 何謂響應式網頁 1
1.2 響應式網頁的優點 2
1.3 響應式網頁的缺點 3
1.4 響應式的概念 3
1.5 Viewport 4
1.6 流式網格 5
1.6.1 網格設計 5
1.6.2 流式布局 6
1.7 媒體查詢的基礎 7
1.7.1 使用方法 8
1.7.2 設置方式 8
1.7.3 媒體類型 8
1.7.4 判斷條件 9
1.7.5 媒體特徵 10
1.8 流式圖像 10
1.9 字體 11
第2章 Bootstrap簡介 12
2.1 何謂Bootstrap 12
2.2 Bootstrap 具有哪些內容 12
2.3 下載Bootstrap 13
2.4 鏈接Bootstrap框架 15
2.5 下載與鏈接 jQuery 文件 16
2.6 快速體驗——運用 CSS 樣式 17
第3章 網站的開發流程 20
3.1 項目 20
3.2 企劃 21
3.3 設計 21
3.4 前端 22
3.5 後端 22
3.6 測試 23
3.7 上綫 23
第4章 響應式網頁的設計思維 25
4.1 與傳統網站開發的差異 25
4.2 響應式網頁的設計考慮 26
4.3 移動設備的設計考慮 28
4.3.1 移動設備的特徵 28
4.3.2 移動設備優先 28
第5章 視覺設計師與前端工程師的專業認知 31
5.1 網頁與印刷的差異 31
5.2 網頁嚮量格式 SVG 32
5.3 版麵設計時的常見詞匯 33
5.4 網格的運用與製作 35
5.4.1 網格輔助—— PSD 35
5.4.2 網格輔助—— AI 36
5.4.3 網格輔助——自行設置 38
5.5 讓視覺設計師懂得切版 42
5.5.1 切版重點 42
5.5.2 瞭解版麵的構成 42
第6章 SEO簡介 44
6.1 何謂SEO 44
6.2 改善網站標題與描述 45
6.3 改善網站架構 47
6.3.1 網站架構簡介 47
6.3.2 架構*佳做法 48
6.3.3 讓網站更易於瀏覽 48
6.3.4 易於瀏覽的*佳做法 49
6.4 可優化的內容與做法 50
6.4.1 優質內容與服務 50
6.4.2 鏈接 50
6.4.3 圖片 51
6.4.4 標題 52
6.5 管理與營銷 53
6.5.1 使用網站管理工具 53
6.5.2 網站營銷工作要點 54

第7章 網頁設計趨勢 56
7.1 響應式網頁設計 56
7.2 全幅背景 57
7.3 單頁式網頁 57
7.4 固定式菜單 59
7.5 扁平化設計 59
7.6 微動畫 60
7.7 卡片式設計 61
7.8 隱藏式菜單 61
7.9 超大的字體 62
7.10 幽靈按鈕 63
第8章 HTML5+CSS3 的基礎知識 64
8.1 認識DIV與CSS 64
8.1.1 認識DIV 64
8.1.2 CSS Class 與 CSS ID 65
8.2 HTML5與CSS3的新增內容 67
8.2.1 認識 HTML5 67
8.2.2 HTML5 的新元素與屬性 68
8.2.3 認識 CSS3 71
8.2.4 CSS3 新增的屬性 71
第9章 響應式網頁的布局方式 76
9.1 Grid System簡介 76
9.1.1 何謂 Grid System 76
9.1.2 網頁的 Grid System 77
9.1.3 網頁設計為何需要 Grid System 78
9.1.4 Grid System 的使用方法 78
9.2 布局規則 79
9.2.1 Bootstrap 中的 Grid System 79
9.2.2 不同設備的 Grid 設置 80
9.2.3 嵌套排版 82
9.2.4 移動與調整 Column 的位置 83
9.2.5 Column 的規則 83
9.2.6 調整Column的順序 84
第10章 Bootstrap CSS 樣式的使用 86
10.1 排版 86
10.1.1 標題 86
10.1.2 頁麵主題 87
10.1.3 行內文字元素 88
10.1.4 對齊類 90
10.1.5 轉換類 91
10.1.6 聯係字段 91
10.1.7 引用 91
10.1.8 列錶 93
10.2 錶格 95
10.2.1 錶格類 95
10.2.2 狀態類 97
10.2.3 響應式錶格 97
10.3 窗體 98
10.3.1 基本範例 98
10.3.2 窗體布局 99
10.3.3 支持的控件 100
10.3.4 焦點狀態 105
10.3.5 禁用狀態 105
10.3.6 隻讀狀態 106
10.3.7 驗證狀態 106
10.4 按鈕 108
10.4.1 按鈕標簽 108
10.4.2 顔色類 109
10.4.3 大小類 109
10.4.4 啓用狀態 111
10.4.5 禁用狀態 111
10.5 圖片 113
10.5.1 響應式圖片 113
10.5.2 圖片形狀 113
第11章 Bootstrap布局組件的使用 115
11.1 字體圖標 115
11.2 下拉式菜單 116
11.2.1 說明 116
11.2.2 使用的方法 116
11.2.3 其他輔助項目 117
11.2.4 範例 119
11.3 按鈕群組 120
11.3.1 說明 120
11.3.2 使用方法 120
11.3.3 其他輔助項目 120
11.3.4 範例 122
11.4 輸入框群組 123
11.4.1 說明 123
11.4.2 使用方法 123
11.4.3 其他輔助項目 124
11.4.4 範例 125
11.5 導航 127
11.5.1 說明 127
11.5.2 使用方法 127
11.5.3 其他輔助項目 127
11.5.4 範例 129
11.6 導航欄 130
11.6.1 說明 130
11.6.2 使用方法 130
11.6.3 其他輔助項目 131
11.6.4 範例 133
11.7 分頁 135
11.7.1 說明 135
11.7.2 使用方法 135
11.7.3 其他輔助項目 135
11.7.4 範例 137
11.8 提示標誌 137
11.8.1 說明 137
11.8.2 範例 138
11.9 大屏幕效果 138
11.9.1 說明 138
11.9.2 範例 139
11.10 縮略圖 139
11.10.1 說明 139
11.10.2 使用方法 140
11.10.3 範例 140
11.11 進度條 141
11.11.1 說明 141
11.11.2 使用方法 142
11.11.3 其他輔助項目 142
11.11.4 範例 144
11.12 麵闆 144
11.12.1 說明 144
11.12.2 使用方法 144
11.12.3 其他輔助項目 145
11.12.4 範例 146
11.13 響應式嵌入內容 147
11.13.1 說明 147
11.13.2 範例 147
第12章 Bootstrap JS 插件的使用 149
12.1 概觀 149
12.2 頁簽 149
12.2.1 說明 149
12.2.2 使用方法 150
12.2.3 淡入效果 150
12.2.4 範例 150
12.3 提示工具 152
12.3.1 說明 152
12.3.2 使用方法 152
12.3.3 範例 153
12.4 彈齣提示 154
12.4.1 說明 154
12.4.2 使用方法 154
12.4.3 範例 155
12.5 摺疊效果 156
12.5.1 說明 156
12.5.2 使用方法 156
12.5.3 範例 157
12.6 輪播效果 159
12.6.1 說明 159
12.6.2 使用方法 159
12.6.3 標題製作 161
12.6.4 範例 161
第13章 網站實踐——書籍宣傳網頁 164
13.1 套入鏈接 164
13.2 網格布局 165
13.3 頁麵設計 166
13.3.1 左邊容器 166
13.3.2 右邊容器 167
13.4 CSS美化與運用 171
第14章 網站實踐——産品推廣網頁 174
14.1 套入鏈接 174
14.2 網格布局 175
14.2.1 建立分層說明文字 175
14.2.2 *外層與*層的布局 176
14.2.3 第二層的布局 177
14.2.4 第三層左邊的布局 178
14.2.5 第三層右邊的布局 179
14.2.6 第四層的布局 180
14.3 頁麵設計 180
14.3.1 *層設計 180
14.3.2 第二層設計 180
14.3.3 第三層左邊的設計 181
14.3.4 第三層右邊的設計 183
14.3.5 第四層設計 183
14.4 運用CSS 184
14.4.1 *層 184
14.4.2 第二層 185
14.4.3 第三層左邊 186
14.4.4 第三層右邊 187
14.4.5 第四層 189
第15章 網站實踐——網站首頁製作 190
15.1 套入鏈接 190
15.2 網格布局 191
15.2.1 建立層次說明文字 192
15.2.2 *層與第二層布局 193
15.2.3 第三層布局 193
15.2.4 第四層布局 194
15.2.5 第五層與第六層布局 195
15.3 *層設計——菜單 195
15.3.1 運用導航欄 JavaScript 195
15.3.2 修改類 196
15.3.3 運用 CSS 樣式 197
15.4 第二層設計——廣告橫幅 198
15.4.1 使用輪播JavaScript 198
15.4.2 修改內容 199
15.4.3 運用 CSS 樣式 200
15.5 第三層設計——*新公告與廣告區 200
15.5.1 加入*新公告圖片 200
15.5.2 應用摺疊效果 JavaScript 201
15.5.3 修改類 201
15.5.4 加入廣告圖片 202
15.5.5 運用 CSS 樣式 203
15.6 第四層設計——課程分享 204
15.6.1 加入課程標題圖片 204
15.6.2 加入課程 1 圖片與內容 204
15.6.3 加入課程 2 圖片與內容 205
15.6.4 加入課程 3 圖片與內容 206
15.6.5 加入課程 4 圖片與內容 206
15.6.6 運用 CSS 樣式 207
15.7 第五層設計——按鈕鏈接 210
15.7.1 加入圖片 210
15.7.2 運用 CSS 樣式 211
15.8 第六層頁麵設計——頁腳 212
15.8.1 加入文字 212
15.8.2 運用 CSS 樣式 212
15.9 迴到頂部按鈕的製作 212
15.10 檢查各尺寸瀏覽狀態 214
15.10.1 問題一的解決方式 214
15.10.2 問題二的解決方式 215
第16章 輔助工具 217
16.1 Bootstrap 套件下載 217
16.2 可視化Bootstrap 在綫編輯器 219
16.2.1 GRID SYSTEM 219
16.2.2 BASIC CSS 220
16.2.3 COMPONENTS 221
16.2.4 JAVASCRIPT 222
16.2.5 預覽版式 222
16.2.6 下載結果 223
16.3 瀏覽器開發者模式檢測 224
16.3.1 Firefox 瀏覽器 224
16.3.2 IE瀏覽器 226
16.3.3 Google Chrome 瀏覽器 226
16.3.4 在綫檢測 228
16.3.5 插件的輔助檢測 231
16.4 尺寸對照工具 232
16.5 檢測優化工具 233
16.6 設備尺寸參考 234

精彩書摘

第11章 Bootstrap布局組件的使用
11.1 字體圖標
Bootstrap約有200個由Glyphicon Halflings 所提供的字體格式符號，讓設計者選擇使用，而不是像早期那樣需通過設計軟件來産生符號圖片。
在每個符號的下方都有用於引用的類名稱，如圖11-1所示，在 HTML 設計中隻要在指定的元素中加入此類名稱，即可運用該圖標。

圖11-1 字體圖標及其類名稱
在使用圖標的過程中，並非所有情況都適用。*常發生的問題是，將圖標類應用到本身已經應用瞭非常多類的標簽中，這種做法的結果常會導緻圖標無法順利顯示。因此，*佳的用法應該是先加入一個 標簽，再將圖標類應用其中。
範例
可在按鈕、工具欄的群組、導航欄或窗體 input 元素使用圖標類。本範例以 標簽為例，並加入兩種圖標類進行說明，效果如圖11-2所示。
? 範例：圖標類的使用 (ch11.1example.html)




Star


圖11-2 圖標類使用的示範 (ch11.1example.html)
11.2 下拉式菜單
11.2.1 說明
下拉式菜單通常被用於導航欄或窗體中，將某個類進行分類以呈現一個具有層次關係的菜單。例如，“視頻教學”是*上層的按鈕，當單擊後可展開“Android 應用開發”“GameSalad 2D 遊戲製作”“Google Web Design”等選項，屆時用戶再通過單擊鼠標選擇其一，以便前往對應的頁麵。下拉式菜單的效果如圖11-3所示。

圖11-3 下拉式菜單的效果 (ch11.2example.html)
11.2.2 使用的方法
使用方法有兩種，一種為加入 dropdown 類，另一種為建立 data 屬性做呼應，具體說明如下（參考圖11-4）：

圖11-4 下拉式菜單的使用方法
（1）在*外層的 標簽中設置 dropdown 類。
（2）在 標簽中建立 data-toggle="dropdown" 屬性，與*外層的dropdown類呼應。
11.2.3 其他輔助項目
可搭配使用的類如錶11-1所示。
錶11-1 輔助項目類
類 名稱 說明 使用方法
dropdown-menu-right 菜單嚮右對齊 菜單按鈕不變，但菜單項內容會整體靠右對齊 在 標簽中的 dropdown-menu 類之後加入此類
dropdown-menu-left 菜單嚮左對齊 菜單按鈕不變，但菜單項內容會整體靠左對齊 在 標簽中的 dropdown-menu 類之後加入此類
dropdown-header 標題 給下拉菜單加入標題，以呈現齣一個群組的概念 在 標簽中加入此類
divider 分隔綫 用來分隔每個係列下拉菜單的鏈接 在 標簽中加入此類且此標簽不需具有任何內容，隻單純顯示分隔綫效果，
disabled 禁用鏈接 鏈接完全失去作用 在 標簽中加入此類
相關類的頁麵展示效果如圖11-5~圖11-8所示。

圖11-5 菜單靠右對齊 (ch11.2alignment.html)

圖11-6 標題 (ch11.2headers.html)

圖11-7 分隔綫 (ch11.2divider.html)

圖11-8 禁用鏈接 (ch11.2disabled menu items.html)
11.2.4 範例
此範例使用瞭標題、分隔綫、禁用鏈接3種類，執行結果如圖11-9所示。
? 範例：下拉式菜單的製作 (ch11.2example final.html)



視頻教學




雙口呂教學










凱弟教學






圖11-9 下拉式菜單的製作 (ch11.2example final.html)
11.3 按鈕群組
11.3.1 說明
通過群組的方式將 標簽放置於同一行中，以産生如同單選（radio）或復選（checkbox）效果的操作，如圖11-10所示。

圖11-10 按鈕群組的效果 (ch11.3example.html)
在按鈕群組的工具提示與彈齣窗口中需要特彆設置（參閱第 12.3 或 12.4節的內容）。
當在 .btn-group 中的元素使用工具提示（Tooltips） 或彈齣提示（popovers）時必須指定 container: 'body' 選項，以避免不必要的副作用（例如，工具提示或彈齣窗口被觸發時會讓元素變寬和（或）失去圓角效果）。
11.3.2 使用方法
在*外層的 標簽中加入 .btn-group 類來包覆其他需要群組的 標簽即可。在群組的效果部分，*左邊與*右邊的按鈕會以圓角樣式來呈現，如圖11-11所示。

圖11-11 按鈕群組的使用方法
11.3.3 其他輔助項目
可搭配使用的類如錶11-2所示，各個範例的執行結果如圖11-12~圖11-16所示。
錶11-2 按鈕群組輔助類
類 名稱 說明
btn-toolbar 按鈕工具欄 在 < div class="btn-toolbar" > 內包含多組< div class="btn-group" > 內容
.btn-group-* 大小 為群組內每個button運用大小作用類的替代做法，隻需要在.btn- group加入.btn-group-*類，尺寸為lg、md、sm、xs四種
（續錶）
類 名稱 說明
嵌套 在一個按鈕組內嵌套另一個按鈕組，即在一個 .btn-group 內嵌套另一個 .btn-group
.btn-group-vertical 垂直變化 讓群組按鈕以垂直堆疊方式呈現而不是水平方式
. btn-group-justi?ed 水平變化 讓群組按鈕延伸為相同大小（平均分配）以填滿父元素的寬度


圖11-12 按鈕工具欄 (ch11.3utton toolbar.html)

圖11-13 大小 (ch11.3sizing.html)

圖11-14 嵌套 (ch11.3 esting.html)

圖11-15 垂直變化 (ch11.3vertical variation.html)

圖11-16 水平變化 (ch11.3Justified button groups.html)
11.3.4 範例
此範例使用瞭工具欄、嵌套、水平變化3種類，範例的執行結果如圖11-17所示。
? 範例：按鈕群組的製作 (ch11.3example final.html)

















圖11-17 按鈕群組的製作 (ch11.3example final.html)
11.4 輸入框群組
11.4.1 說明
在輸入框（input）群組的使用當中，可在 標簽之前、之後加入其他元素，讓用戶在通過輸入框進行相關操作時可更直覺與便利。添加的元素可為美元符號、@符號、按鈕等。輸入框的效果範例如圖11-18所示。

圖11-18 輸入框的效果 (ch11.4example.html)
11.4.2 使用方法
為 .input-group 加入 .input-group-addon 類，可以讓 .form-control 的前麵或後麵額外加入其他元素。建立的步驟如下：
在*外層的 標簽中加入 .input-group 類。
建立 標簽，並加入 .input-group-addon 類與內容，並將 標簽放置在 標簽的前麵或後麵，如圖11-19所示。

圖11-19 建立輸入框的方法
11.4.3 其他輔助項目
可搭配使用的類與其他效果，如錶11-3所示，4個輔助項對應的範例如圖11-20~圖11-23所示。
錶11-3 輸入框群組輔助類
類 / 效果 名稱 說明
.input-group-* 大小 為 .input-group 加入對應的大小類，包含的元素會自動重設大小，尺寸為 lg、md、sm、xs 四種
type="radio"、type="checkbox" 單選與復選 添加單選（radio）或復選（checkbox）選項到 群組，以替換文字
包覆按鈕內容 使用 .input-group-btn 替代 .input-group-addon 來包覆 button 內容
下拉式菜單 在輸入框群組中添加帶有下拉式菜單的按鈕，隻需要簡單地在一個 .input-group-btn 類中包裹按鈕和下拉式菜單即可。建立的方式請參閱第11.2節

圖11-20 大小 (ch11.4sizing.html)

圖11-21 附加checkbox 和 radio 元素 (ch11.4checkboxes and radio addons.html)

圖11-22 前後包覆按鈕 (ch11.4utton addons.html)

圖11-23 下拉式菜單 (ch11.4dropdown.html)
11.4.4 範例
此範例結閤瞭按鈕與下拉式菜單兩種項目，同時讓單邊可呈現多個按鈕，且加入粗體與斜體兩種圖標類（圖標類請參閱第11.1節）。範例的執行結果如圖11-24所示。
? 範例：多個按鈕與圖標的運用 (ch11.4example final.html)








下拉式菜單













圖11-24 多個按鈕與圖標的運用範例 (ch11.4example final.html)
11.5 導 航
11.5.1 說明
導航（見圖11-25）在Bootstrap中可共享相同的標簽（.nav 類）樣式。此方式需搭配 JavaScript 的頁簽功能，使其呈現切換的效果，頁簽功能請參閱第 12 章。

圖11-25 導航效果 (ch11.5example.html)
11.5.2 使用方法
導航是一個無項目符號的效果，因此必須使用 與 標簽的關係來建立內容。建立的步驟如下（參考圖11-26）：
在*外層的 標簽中加入 .nav 類。
在 .nav 類之後加入 .nav-tabs 類。

圖11-26 導航的使用方法 (ch11.5example.html)
11.5.3 其他輔助項目
可搭配使用的類如錶11-4的示，各個輔助項目的範例如圖11-27~圖11-30所示。
錶11-4 導航輔助類
類 名稱 說明
.nav-pills 按鈕樣式 使用 .nav-pills 替換 .nav-tabs
.nav-stacked 垂直堆疊 .nav-stacked 類需加在 .nav-tabs 或 .nav-pills 之後
.nav-justi?ed 等寬樣式 在大於 768px 的屏幕上，通過加入 .nav-justi?ed 很容易讓頁簽或按鈕樣式以等寬的樣式來呈現。另外，在小屏幕上，導航鏈接會以堆疊方式呈現
.disabled 禁用鏈接 對於任何導航組件（ 頁簽或按鈕樣式）都可以加入 .disabled 類，以呈現灰色鏈接和無鼠標滑入的效果


圖11-27 按鈕樣式 (ch11.5pills.html)

圖11-28 垂直堆疊 (ch11.5stacked.html)

圖11-29 等寬樣式 (ch11.5justified.html)

圖11-30 禁用鏈接 (ch11.5disabled links.html)
11.5.4 範例
此範例與下拉式菜單功能進行整閤（製作下拉式菜單的方式可參閱第 11.2節的內容），執行結果如圖11-31所示。

圖11-31 導航加下拉式菜單製作 (ch11.5example final.html)
? 範例：導航加下拉式菜單的製作 (ch11.5example final.html)
















11.6 導 航 欄
11.6.1 說明
導航欄可用於應用程序或網站導航標題的響應式基礎組件。它們在移動設備的可視區域是以摺疊方式呈現的（可切換開關），在可視區域的寬度漸漸增加時（大於移動設備的判斷點時）會轉為以水平布局方式呈現。範例的執行結果如圖11-32所示。

圖11-32 導航欄說明 (ch11.6example.html)
11.6.2 使用方法
建立導航欄的步驟如下，範例如圖11-33所示。
在*外層的 標簽中按序加入 .navbar 與 .navbar-default 兩個類。
在第二層 標簽中加入 .navbar-header 類，且此 標簽內的內容必須帶有 .navbar-brand 類的




















Submit



















圖11-39 導航欄的示範 (ch11.6example final.html)
11.7 分 頁
11.7.1 說明
此效果是一種無順序符號，可為網站的應用程序提供分頁鏈接的多分頁組件，提供簡單的換頁功能。
11.7.2 使用方法
因為此效果屬於無順序符號，所以必須使用 與 兩個標簽建立齣順序的效果。分頁效果的顯示隻需在 標簽中加入 .pagination 類即可。分頁的範例效果如圖11-40所示。

圖11-40 分頁效果 (ch11.7example.html)
11.7.3 其他輔助項目
可搭配使用的類如錶11-6所示，各個範例如圖11-41~圖11-44所示。
錶11-6 分頁輔助類
類 名稱 說明
.disabled 禁用 指定為不能單擊的鏈接
.active 啓用 標示為當前的頁麵
.pagination-* 大小 尺寸為 lg、md、sm、xs 四種
.pager 換頁 默認的狀態下，換頁鏈接會居中對齊，且不必使用 .previous與.next兩個類
.previous 上一頁 標簽中需加入 pager 類纔可順利呈現效果
.next 下一頁 標簽中需加入 pager 類纔可順利呈現效果

圖11-41 禁用與啓用 (ch11.7disabled.html)

圖11-42 大小 (ch11.7sizing pagination.html)

圖11-43 換頁 (ch11.7pager.html)

圖11-44 對齊鏈接 (ch11.7pager aligned links.html)
11.7.4 範例
此範例以*常見的分頁方式作為介紹，執行結果如圖11-45所示。
? 範例：分頁的製作 (ch11.7example final.html)
















圖11-45 分頁製作的示範 (ch11.7example final.html)
11.8 提示標誌
11.8.1 說明
加入 < span class="badge" > 元素到鏈接、導航或其他元素，可呈現齣醒目的“新”或“未讀”信息的提示效果，如圖11-46 所示。

圖11-46 提示標誌效果 (ch11.8example.html)
11.8.2 範例
? 範例：提示標誌的製作 (ch11.8example final.html，見圖11-47)






圖11-47 提示標誌製作的示範 (ch11.8example final.html)
11.9 大屏幕效果
11.9.1 說明
此效果能使元素延展至整個瀏覽器的可視區域，以展示網站的關鍵內容。這個組件本身已具有響應式的效果。範例的執行結果如圖11-48所示。

圖11-48 大屏幕的效果 (ch11.9example.html)
11.9.2 範例
在 標簽中加入 .jumbotron 類，且搭配 .container 類可使內容顯示的區域不是整個瀏覽器寬度。範例的執行結果如圖11-49所示。
? 範例：大屏幕效果的製作 (ch11.9example final.html)


Hello, world!

這是一個超大屏幕（Jumbotron）的範例

圖11-49 大屏幕效果製作的示範 (ch11.9example final.html)
11.10 縮 略 圖
11.10.1 說明
在網頁設計中，多數都需要在網格中布局圖像、視頻、文字等內容。通過thumbnail 類，隻需用*少的標簽就可以展示齣帶有鏈接的圖片，如圖11-50所示。

圖11-50 縮略圖的效果 (ch11.10example.html)
11.10.2 使用方法
使用 Bootstrap 創建縮略圖的步驟如下（參考範例，如圖11-51所示）：
在

縮略圖標簽

123LERNGO是由一群熱愛程序設計、遊戲以及視覺設計的人所組成的小團隊，初衷是分享自己的學習經驗，讓人們可以通過我們的網站學習到更多有關信息科技等知識。

圖11-52 縮略圖製作的示範 (ch11.10example final.html)
11.11 進 度 條
11.11.1 說明
通過這些簡單又具有彈性的進度條，為工作流程或活動進度提供瞭*新的反饋信息，進度條的效果如圖11-53所示。

圖11-53 進度條效果 (ch11.11example.html)

Bootstrap 進度條使用 CSS3 過渡和動畫來獲得這種效果。IE 9以及之前的版本和舊版的 Firefox 不支持該特性，Opera 12 則不支持進度條動畫這個效果。
11.11.2 使用方法
創建一個基本的進度條步驟如下（見圖11-54）：
在*外層的 標簽中加入 .progress 類。
在第二層的 標簽中加入 .progress-bar 類。
添加一個帶有百分比錶示的寬度的 style 屬性，例如 style="60%"; 屬性錶示進度條在 60% 的位置。

圖11-54 創建進度條的步驟
11.11.3 其他輔助項目
可搭配使用的類如錶11-7所示，各個輔助項目的範例如圖11-55~圖11-58所示。
錶11-7 進度條輔助項目
類 名稱 說明
progress-bar-primary、progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger 顯示狀態 進度條使用與按鈕類和警告類一緻的場景顔色樣式
progress-bar-striped 條紋樣式 此類需加在 progress-bar 類之後
active 動畫樣式 將.active加入.progress-bar-striped類，以呈現從右嚮左的條紋動畫效果
堆疊樣式 將多個進度條（.progress-bar）放置於同一個.progress容器內

圖11-55 顯示狀態 (ch11.11contextual alternatives.html)

圖11-56 條紋樣式 (ch11.11striped.html)

圖11-57 動畫樣式 (ch11.11animated.html)

圖11-58 堆疊樣式 (ch11.11stacked.html)
11.11.4 範例
此範例在每條進度條中加入對應的數值並顯示齣來，該範例的執行結果如圖11-59所示。
? 範例：進度條的製作 (ch11.11example final.html)

35%


20%

10%



圖11-59 進度條製作的示範 (ch11.11example final.html)
11.12 麵 闆
11.12.1 說明
建立一個麵闆，並將需要放置的內容放置在此麵闆中，以顯示齣一個區塊的效果，如圖11-60所示。

圖11-60 麵闆效果 (ch11.12example.html)
11.12.2 使用方法
創建麵闆隻需在 標簽中按序加入 .panel 和 .panel-default 這兩個類即可，範例及其執行結果如圖11-61所示。

圖11-61 創建麵闆的方法
11.12.3 其他輔助項目
可搭配使用的類如錶11-8所示，各個輔助項目的範例如圖11-62~圖11-64所示。
錶11-8 麵闆輔助項目
類 名稱 說明
.panel-heading 標題 加入標題類到麵闆之中，在視覺顯示上更為突顯主題
.panel-footer 頁腳 將按鈕或次要文字放置在 .panel-footer 內。麵闆頁腳不會從狀態類繼承顔色或邊框的設置，因為它們並不是主要的內容
panel-primary、panel-success、panel-info、panel-warning、panel-danger 顯示狀態 與其他組件一樣，隻需要為麵闆加入狀態類，很容易讓麵闆在特定場景下更有意義

圖11-62 標題 (ch11.12panel with heading.html)

圖11-63 頁腳 (ch11.12panel with footer.html)

圖11-64 顯示狀態 (ch11.12contextual alternatives.html)
11.12.4 範例
本範例采用瞭標題與顯示狀態兩個類，並加入錶格內容進行顯示，如圖11-65所示。
? 範例：麵闆的製作 (ch11.12example final.html)


123LearnGo


我們是一個熱愛程序設計、遊戲以及視覺設計的小團隊


AndroidGameSalad
教學 A教學 A
教學 B教學 B



圖11-65 麵闆製作的示範 (ch11.12example final.html)
11.13 響應式嵌入內容
11.13.1 說明
在網頁設計中，有時會嵌入外部的視頻或相關頁麵，但嵌入的內容並無法應對響應式網頁的縮放而實時進行調整，隻會以固定的大小顯示齣來。
因此，此響應式的嵌入內容可直接運用於 < iframe >、< embed > 和 < object > 元素上，當想要符閤某些屬性的樣式時，可以選擇使用明確的類 .embed-responsive-item。
11.13.2 範例
本範例按步驟引導各位讀者製作響應式嵌入內容。
? 完整範例：範例文件ch11ch11.13example.html
復製視頻嵌入的全部程序代碼，如圖11-66所示。

圖11-66 復製視頻嵌入的全部程序代碼
將語句粘貼到 標簽中。
將程序代碼中的“寬”與“高”部分刪除，如圖11-67所示。

圖11-67 粘貼程序代碼並刪除代碼中的“寬”與“高”部分
添加一個 標簽並加入 embed-responsive 類，其後再加入embed-responsive embed-responsive-16by9 類即可完成，如圖11-68所示。

圖11-68 添加一個 標簽並加入 embed-responsive 類

前言/序言

前 言
2012年之後，在各大企業和公司都會聽到一個名詞RWD（Responsive Web Design），即被稱作“響應式網頁設計”的名詞。就網頁發展史而言，無論在美感或技術等層麵上，它一直都在不斷地演進與更新，因此對於從事網頁設計的人而言，必須不斷進步以強化自身的實力，進而設計齣更好的網頁來呈現在眾人麵前。

隨著科技的演進，造就瞭移動設備的普及，使瀏覽網頁的設備不再僅限於計算機。演變至今，移動設備在尺寸上的不一緻使得網頁在視覺呈現上所要顧慮的因素越來越多，為瞭使瀏覽者在移動設備上能獲得*佳閱讀體驗，因而誕生瞭“響應式網頁設計”的概念。

預計在今後幾年，響應式網頁（Web或網站）設計仍會繼續鞏固其地位。在這個不斷創新的時代，使用響應式網頁設計技術而製作的網頁已躍升為現代與未來重要的營銷媒介。本書收錄瞭完整的設計範例和基礎的示範教學，以引導網頁工程師在Bootstrap網頁框架的輔助下快速進入響應式網頁設計領域。

同時，對於從事網頁平麵設計的人員而言，也可從書中瞭解到什麼是響應式網頁，以及學習響應式網頁設計與傳統網頁設計之間的差異等知識，使得設計齣來的網頁版式能符閤工程師的需求。藉此希望每位讀者可以通過此書成為一個與時俱進、具有充實技術能力、深得客戶和老闆歡心的設計師。


呂國泰 曾偉凱 何升隆

響應式網頁設計：Bootstrap開發速成 前言 互聯網時代，用戶體驗至關重要。網站的呈現方式是否能適應不同屏幕尺寸的設備，直接影響著用戶是否願意停留、是否能高效獲取信息。想象一下，你精心設計的網站在手機上變成一團糟，文字扭麯，圖片錯位，按鈕難以點擊，這無疑是對用戶體驗的巨大打擊。而響應式網頁設計，正是解決這一痛點的關鍵技術。它能夠讓你的網頁像一位訓練有素的侍者，根據訪客使用的設備——無論是寬屏的颱式電腦、便攜的筆記本，還是小巧的智能手機、平闆電腦——自動調整布局、尺寸和內容，提供最佳的瀏覽體驗。 在眾多響應式網頁設計框架中，Bootstrap以其強大的功能、簡潔的代碼和易於上手的特性，成為瞭無數開發者和企業的首選。它不僅僅是一個CSS框架，更是一個集成瞭JavaScript插件、UI組件和預設樣式的完整生態係統，能夠極大地提高開發效率，讓你快速構建齣既美觀又實用的響應式網站。 本書《響應式網頁設計：Bootstrap開發速成》正是為瞭幫助您快速掌握Bootstrap，駕馭響應式網頁設計的潮流而編寫。我們深知，對於許多開發者來說，時間是寶貴的。您可能需要快速上手，高效完成項目，而不是沉浸在繁瑣的概念和冗長的教程中。《響應式網頁設計：Bootstrap開發速成》的目標就是為您提供一條直達掌握Bootstrap核心技能的捷徑。 我們將從最基礎的概念齣發，逐步深入到Bootstrap的各項核心功能。您將學習如何利用Bootstrap強大的柵格係統來構建靈活、可擴展的網頁布局，無論是在桌麵端還是移動端，都能呈現齣令人驚艷的效果。我們將詳細講解Bootstrap提供的豐富UI組件，從導航欄、按鈕、錶單到卡片、模態框等，讓您的網頁在功能和視覺上都達到專業水準。更重要的是，本書將聚焦於Bootstrap在響應式設計方麵的核心優勢，教您如何利用其預設的響應式類和工具，輕鬆實現網頁在不同設備間的無縫切換和完美適配。 本書的編寫，旨在將復雜的技術轉化為易於理解和實踐的操作。我們摒棄瞭冗餘的理論，專注於實際應用。您將通過大量的代碼示例和實際案例，親身體驗Bootstrap的強大之處，並在動手實踐中鞏固所學知識。無論您是初次接觸響應式設計的新手，還是希望快速掌握Bootstrap以提升開發效率的資深開發者，本書都將是您不可多得的寶貴資源。 準備好瞭嗎？讓我們一起踏上這段快速掌握Bootstrap、打造卓越響應式網頁的旅程吧！ 第一章：響應式網頁設計概覽與Bootstrap入門 在數字信息爆炸的時代，網站的可用性已經成為衡量其成功與否的關鍵指標之一。用戶不再局限於使用颱式電腦訪問網站，智能手機和平闆電腦的普及，使得多設備瀏覽成為瞭常態。在這種背景下，響應式網頁設計應運而生，它提供瞭一種優雅的解決方案，讓網站能夠智能地適應各種屏幕尺寸，為用戶提供一緻且優化的瀏覽體驗。 1.1 什麼是響應式網頁設計？ 響應式網頁設計（Responsive Web Design, RWD）是一種利用HTML、CSS和JavaScript技術，創建能夠根據用戶設備屏幕尺寸、分辨率和方嚮自動調整頁麵布局、字體大小、圖片大小及其他元素顯示方式的網站設計方法。其核心思想是“一網多用”，即用一套代碼，在不同的設備上都能呈現齣最佳的效果，避免瞭為不同設備單獨開發不同版本網站的繁瑣。 響應式設計的幾個關鍵技術點包括： 流體網格布局（Fluid Grids）： 使用百分比單位代替固定像素單位來定義元素的寬度，使布局能夠隨著屏幕大小的變化而伸縮。 彈性圖片（Flexible Images）： 通過CSS設置圖片的`max-width: 100%;`，確保圖片不會超齣其容器的邊界，實現自適應縮放。 媒體查詢（Media Queries）： CSS3的一項強大功能，允許開發者根據設備的特定屬性（如屏幕寬度、分辨率、方嚮等）應用不同的CSS樣式。這是實現響應式布局的基石，可以定義在特定屏幕尺寸範圍內應用的樣式規則。 1.2 為什麼要學習響應式網頁設計？ 提升用戶體驗： 響應式網站能夠為用戶提供無縫的跨設備瀏覽體驗，無論用戶使用何種設備，都能輕鬆閱讀內容、瀏覽圖片、進行交互，從而提高用戶滿意度和參與度。 搜索引擎優化（SEO）： 搜索引擎（如Google）傾嚮於為移動友好型網站提供更好的排名。一個響應式網站隻有一個URL，這比擁有單獨的移動版本（如m.example.com）在SEO方麵更有優勢，更容易獲得搜索引擎的青睞。 降低開發和維護成本： 隻需維護一套代碼，即可覆蓋所有設備，大大節省瞭開發時間和維護成本。避免瞭為桌麵版和移動版分彆開發和維護不同網站的麻煩。 適應未來設備： 隨著新設備的不斷湧現，響應式設計能夠更好地適應未來可能齣現的各種屏幕尺寸和分辨率，具有更好的前瞻性。 提高轉化率： 良好的用戶體驗通常意味著更高的轉化率。當用戶能夠輕鬆地在您的網站上找到所需信息或完成目標操作時，他們更有可能進行購買、注冊或聯係。 1.3 Bootstrap簡介 Bootstrap，原名Twitter Bootstrap，是由Twitter團隊開發的一個開源的前端Web開發框架。它是一個包含瞭HTML、CSS和JavaScript的工具集，用於快速開發響應式、移動優先的網站。Bootstrap提供瞭大量預先設計好的UI組件、柵格係統、JavaScript插件和實用工具類，極大地簡化瞭前端開發的流程，讓開發者能夠專注於內容和功能實現，而不是從零開始構建基礎樣式和交互。 Bootstrap的核心優勢： 響應式設計： Bootstrap天生為響應式設計而生。其強大的柵格係統和預設的響應式類，使創建適應不同屏幕的布局變得異常簡單。 移動優先（Mobile First）： Bootstrap鼓勵開發者從移動設備的視角齣發進行設計，先為小屏幕構建基礎樣式，然後逐步為大屏幕添加更豐富的樣式和功能。這種方式有助於構建更高效、更流暢的移動體驗。 豐富的組件： 提供瞭大量可復用的UI組件，如導航欄、按鈕、錶單、模態框、輪播圖、卡片等，開箱即用，大大提高瞭開發效率。 易於定製： 雖然提供瞭大量預設樣式，但Bootstrap也允許開發者進行高度定製，可以輕鬆修改顔色、字體、間距等，以滿足項目的個性化需求。 強大的社區支持： 作為一個流行的開源項目，Bootstrap擁有龐大的開發者社區，這意味著豐富的文檔、教程、插件和解決問題的資源。 跨瀏覽器兼容性： Bootstrap經過廣泛測試，能夠良好地兼容主流的現代瀏覽器。 1.4 Bootstrap的安裝與基本結構 在使用Bootstrap之前，您需要將其集成到您的項目中。Bootstrap提供瞭兩種主要的引入方式： 1.4.1 通過CDN引入（推薦用於快速開始或小型項目） 這是最簡單快捷的引入方式，您無需下載任何文件，隻需在HTML文件的``部分添加Bootstrap的CSS和JavaScript的CDN鏈接即可。 ```html ``` 關鍵點解釋： ``：這是響應式設計的關鍵之一。`width=device-width`告訴瀏覽器頁麵寬度與設備屏幕寬度相同，`initial-scale=1.0`設置初始縮放比例為1，確保頁麵在移動設備上以1:1的比例顯示。 `Bootstrap CSS`：引入Bootstrap的CSS文件，它包含瞭所有的樣式規則。 `Bootstrap JavaScript Bundle with Popper`：引入Bootstrap的JavaScript包。這個包包含瞭大部分Bootstrap組件所需的JavaScript插件，並且還包含瞭Popper.js，用於處理下拉菜單、工具提示等彈齣式組件的定位。注意： 務必將JavaScript放在HTML文檔的末尾，``標簽之前，以確保頁麵元素在JavaScript執行前已經加載完畢。 1.4.2 下載Bootstrap文件並本地引入 如果您需要更精細的控製，或者在沒有網絡連接的環境下進行開發，可以下載Bootstrap的源文件，然後將其引入到您的項目中。 1. 訪問Bootstrap官方網站（getbootstrap.com）下載最新版本的Bootstrap。 2. 解壓下載的文件，您會看到`css`、`js`和`fonts`（或`img`）等文件夾。 3. 將這些文件放置在您的項目目錄中，例如： ``` my-project/ ├── index.html ├── css/ │ └── bootstrap.min.css ├── js/ │ └── bootstrap.bundle.min.js └── img/ └── ... ``` 4. 在HTML文件的``部分引入本地的CSS文件，在``之前引入JavaScript文件： ```html ``` 1.5 你的第一個Bootstrap頁麵 現在，讓我們創建一個簡單的頁麵，看看Bootstrap是如何工作的。 ```html ``` 這段代碼的亮點： `.container`：Bootstrap提供的一個用於居中內容並設置最大寬度的容器類。這是構建響應式布局的基礎。 `.mt-4`, `.mb-4`, `.mt-5`：這是Bootstrap的間距工具類。`m`代錶margin（外邊距），`t`代錶top（頂部），`b`代錶bottom（底部），數字`4`和`5`代錶不同的間距層級（從0到5，數字越大間距越大）。 `.text-center`：將文本居中對齊。 `.lead`：用於突齣顯示段落的類，通常用於頁麵的主要介紹性文字。 `.row`：Bootstrap柵格係統的核心。它錶示一行，可以包含多個列。 `.col-md-6`：這是Bootstrap柵格係統的列類。`col`錶示列，`md`錶示中等屏幕（medium-sized devices and up），`6`錶示該列將占據父容器（.row）12個網格單位中的6個。這意味著在屏幕寬度等於或大於中等屏幕時，此列將占據一半寬度。當屏幕寬度小於中等屏幕時，這個列將自動堆疊。 `.card`：Bootstrap提供的卡片組件，用於展示內容塊。 `.card-img-top`：將圖片放置在卡片頂部。 `.card-body`：卡片的正文區域。 `.card-title`：卡片標題樣式。 `.card-text`：卡片文本樣式。 `.btn`, `.btn-primary`, `.btn-success`：Bootstrap提供的按鈕樣式。`.btn`是基礎按鈕樣式，`.btn-primary`和`.btn-success`是不同顔色的主題樣式。 `.form-label`, `.form-control`, `.form-text`：Bootstrap提供的錶單元素的樣式類，使錶單看起來更加整潔和專業。 `.mb-3`：為錶單元素添加底部外邊距。 在瀏覽器中打開這個HTML文件，您會看到一個帶有居中標題、介紹性文字、一張卡片和一個簡單錶單的頁麵。嘗試調整瀏覽器窗口的大小，您會發現卡片和錶單會隨著窗口大小的變化而變化，當窗口變小到一定程度時，它們會堆疊起來，這就是響應式設計的初步體現。 小結： 本章我們理解瞭響應式網頁設計的必要性和核心概念，並對Bootstrap這一強大的前端框架進行瞭初步的介紹。通過CDN和本地引入兩種方式，我們學會瞭如何將Bootstrap集成到項目中，並通過一個簡單的示例頁麵，初步體驗瞭Bootstrap的布局和組件功能。接下來的章節，我們將深入探索Bootstrap的柵格係統、排版、錶單、組件和實用工具，一步步掌握構建專業響應式網頁的技能。 第二章：Bootstrap柵格係統：構建靈活的響應式布局 響應式網頁設計的基石在於靈活的布局，能夠根據屏幕尺寸的變化自動調整內容區域的寬度和排列方式。Bootstrap強大的柵格係統（Grid System）正是為解決這一問題而生。它提供瞭一套預定義的網格結構，讓開發者能夠輕鬆地創建復雜的、響應式的頁麵布局。 2.1 柵格係統的概念 Bootstrap的柵格係統基於12列的網格模型。這意味著每一行（row）可以被劃分為12個等寬的列（column）。您可以通過組閤這些列來創建不同寬度的內容區域。Bootstrap還定義瞭幾個斷點（breakpoints），用於在不同屏幕尺寸上應用不同的布局。 核心組成部分： 容器（Container）： 頁麵布局的根基。Bootstrap提供瞭兩種容器： `.container`：一個固定寬度（在不同屏幕尺寸下有不同最大寬度）的響應式容器，用於居中內容。 `.container-fluid`：一個全寬度的容器，它會延伸到整個視口的寬度。 行（Row）： 用於包裹列的容器。一行（`.row`）中的所有列的總寬度加起來不能超過12列。行還具有負外邊距，用於抵消列的左右內邊距，從而實現整潔的布局。 列（Column）： 實際放置內容的區域。列的類名遵循 `col-[size]-[number]` 的格式。 2.2 柵格係統的斷點（Breakpoints） Bootstrap定義瞭幾個用於響應式設計的斷點，分彆對應不同的設備屏幕尺寸。這些斷點可以用來控製元素的顯示和布局。 | 斷點名稱 | 屏幕尺寸（最小寬度） | 對應的CSS類前綴 | 描述 | | :----------- | :----------------- | :------------- | :----------------------- | | Extra extra small (xs) | < 576px | `col-` | 手機（通常所有設備都適用） | | Small (sm) | ≥ 576px | `col-sm-` | 平闆電腦（縱嚮） | | Medium (md) | ≥ 768px | `col-md-` | 平闆電腦（橫嚮）/小筆記本 | | Large (lg) | ≥ 992px | `col-lg-` | 筆記本/桌麵電腦 | | Extra large (xl) | ≥ 1200px | `col-xl-` | 大屏幕桌麵電腦 | | Extra extra large (xxl) | ≥ 1400px | `col-xxl-` | 超大屏幕桌麵電腦 | 2.3 使用柵格係統創建布局 2.3.1 基本的行和列 ```html ``` 在這個例子中，我們在一個`.container`中創建瞭一個`.row`，然後在其中放置瞭三個`.col`。由於沒有指定具體的列寬，Bootstrap會自動將這三個列平均分配到12個網格單位中，每個列占據4個單位。在任何屏幕尺寸下，這三列都會並排顯示。 2.3.2 指定列寬 使用 `col-[size]-[number]` 的格式來指定列的寬度。 `col-6`: 在任何屏幕尺寸下，占據6個網格單位（即一半寬度）。 `col-md-4`: 在中等屏幕（≥768px）及以上，占據4個網格單位。在小於中等屏幕時，它將獨占一行。 `col-lg-3 col-md-6 col-sm-12`: 在超大屏幕 (lg) 及以上，占據3個網格單位。 在中等屏幕 (md) 及以上，占據6個網格單位。 在小屏幕 (sm) 及以上，占據12個網格單位（獨占一行）。 在 Extra small (xs) 屏幕，也會自動占據12個單位。 示例：響應式布局 ```html ``` 2.3.3 自動布局的列 如果一行中的所有列都未指定寬度，Bootstrap會自動計算並平均分配寬度。 ```html ``` 在這個例子中，`col-md-3` 會在中等屏幕及以上占據3個網格單位。剩下的9個網格單位將由前後兩個`.col`自動平均分配，每個占據4.5個單位。 2.3.4 列的順序（Order） Bootstrap允許您使用類來改變列的視覺順序，而不改變HTML的結構，這對於響應式設計非常有用。 `order-first`: 將該列顯示在前麵。 `order-last`: 將該列顯示在後麵。 `order-[size]-[number]`: 在指定的屏幕尺寸及以上，調整列的順序。數字越大，顯示越靠後。 ```html ``` 2.3.5 列的偏移（Offset） 如果您想在列之間創建空白區域，可以使用列的偏移類。 `offset-[size]-[number]`: 在指定的屏幕尺寸及以上，在列的左側添加指定數量的網格單位的空白。 ```html ``` 2.3.6 列的嵌套（Nesting） 您可以在列內部嵌套另一個`.row`，以創建更復雜的布局結構。 ```html ``` 2.3.7 響應式列的通用類 除瞭上麵提到的 `col-[size]-[number]` 之外，Bootstrap還提供瞭一些更通用的響應式類： `col-xs-12` (等同於 `col-12`): 在所有屏幕尺寸下都占據12列。 `col-sm-6`: 在小屏幕 (sm) 及以上，占據6列。 `col-md-4`: 在中等屏幕 (md) 及以上，占據4列。 `col-lg-3`: 在大屏幕 (lg) 及以上，占據3列。 `col-xl-2`: 在超大屏幕 (xl) 及以上，占據2列。 示例：一個典型的三欄布局 ```html ``` 2.4 常用柵格工具類 除瞭直接使用類名控製布局，Bootstrap還提供瞭一些實用的柵格工具類，可以幫助您快速調整元素的顯示和對齊。 顯示/隱藏元素（Display Utilities）： `.d-none`: 隱藏元素。 `.d-[size]-none`: 在指定屏幕尺寸（xs, sm, md, lg, xl, xxl）及以上隱藏元素。 `.d-[size]-block`, `.d-[size]-inline`, `.d-[size]-inline-block`, `.d-[size]-flex`, `.d-[size]-inline-flex`: 在指定屏幕尺寸及以上，以特定的顯示方式顯示元素。 `.d-flex`: 以 Flexbox 方式顯示元素。 `.d-inline-flex`: 以內聯 Flexbox 方式顯示元素。 對齊和間距（Alignment and Spacing）： `.align-items-start`, `.align-items-center`, `.align-items-end`: 在 Flex 容器中垂直對齊項目。 `.justify-content-start`, `.justify-content-center`, `.justify-content-end`, `.justify-content-between`, `.justify-content-around`: 在 Flex 容器中水平對齊項目。 `.text-start`, `.text-center`, `.text-end`: 文本對齊。 前麵已介紹的間距工具類 `.m-` 和 `.p-` (margin/padding, top/bottom/start/end/x/y, size)。 示例：使用顯示工具類 ```html ``` 小結： Bootstrap的柵格係統是創建響應式布局的強大工具。通過理解容器、行和列的概念，以及掌握不同斷點和列的類名，您可以輕鬆地構建齣在各種設備上都能良好展示的網頁結構。靈活運用列的寬度、偏移、順序以及柵格工具類，能夠幫助您實現更復雜、更精細化的頁麵設計。在下一章，我們將繼續探索Bootstrap如何幫助我們美化文本和創建高質量的排版。

評分☆☆☆☆☆

最近入手瞭《響應式網頁設計：Bootstrap開發速成》，這本書給我帶來的改變是實實在在的。在沒讀這本書之前，我對響應式設計一直處於一種“聽說過，但不怎麼會用”的狀態。感覺需要掌握很多繁雜的CSS媒體查詢，以及復雜的布局技巧。 這本書讓我眼前一亮的地方在於，它直接切入瞭Bootstrap這個核心。我之前雖然聽說過Bootstrap的大名，但總覺得它是一個龐大而復雜的框架，不敢輕易嘗試。然而，這本書的講解方式非常友好，就像一位經驗豐富的前輩，循循善誘地將我帶入瞭Bootstrap的世界。 它並沒有一開始就羅列大量的代碼，而是從最基礎的Bootstrap柵格係統入手，用非常形象的比喻和直觀的圖示，讓我理解瞭“容器”、“行”和“列”是如何工作的。我能夠清晰地看到，Bootstrap是如何通過簡單的類名，就能實現網頁在不同屏幕尺寸下的自動適應。這大大降低瞭響應式設計的門檻。 接著，書中的內容逐步深入，開始講解各種Bootstrap的預設組件。從最基礎的按鈕、錶單，到更復雜的導航條、卡片、模態框等等，都進行瞭詳細的介紹。我尤其喜歡它講解每個組件時，都會附帶可以直接復製粘貼的代碼示例，並且會解釋這些代碼是如何構建齣預期的效果的。這讓我能夠立刻上手實踐，並在自己的項目中使用這些組件。 最讓我感到驚喜的是，這本書的“速成”特質。它沒有冗餘的理論，而是直擊核心，讓你在最短的時間內掌握最實用的技術。通過這本書的學習，我感覺自己已經能夠獨立完成一個具備基本響應式功能的網頁瞭。這對於我來說，是前所未有的成就感。如果你和我一樣，想要快速提升網頁設計的技能，讓自己的作品在各種設備上都能有齣色的錶現，那麼這本書絕對是你的不二之選。它不僅教會瞭我技術，更重要的是，它給瞭我信心。

評分☆☆☆☆☆

這本書，《響應式網頁設計：Bootstrap開發速成》，給我帶來的衝擊是顛覆性的。在此之前，我對於網頁設計，尤其是要在各種設備上都能良好展示的“響應式”概念，一直是模糊不清的。我常常為如何在手機上適配復雜的桌麵布局而頭疼，要麼就是效果慘不忍睹，要麼就是耗費大量時間進行重復勞動。 這本書的齣現，簡直如同黑暗中的一道曙光。它不僅僅是教我如何使用Bootstrap，更是讓我從根本上理解瞭響應式設計的哲學。作者以一種極其巧妙的方式，將那些原本看似復雜的概念，如流體布局、媒體查詢，用非常具象的語言和貼閤實際需求的案例講解齣來。我能夠清晰地看到，Bootstrap的柵格係統是如何通過簡單的類名，就能夠實現內容在不同屏幕尺寸下的自動重排和伸縮，這種“巧勁”讓我驚嘆不已。 書中的內容安排也極其閤理，循序漸進。它不會一下子就讓你麵對海量的組件代碼，而是從最核心的網格係統入手，讓你先建立起響應式布局的骨架。然後，再逐步引入導航、錶單、卡片等各種常用組件，並詳細說明如何在響應式布局中靈活運用它們。我最喜歡的部分是，每講解一個組件，都會附帶實際的網頁截圖，讓你能夠直觀地感受到這個組件在不同設備上的實際錶現。這對於我這種視覺型學習者來說，簡直是福音。 最關鍵的是，這本書真的做到瞭“速成”。我原本以為學習一個框架需要花費數周甚至數月的時間，但通過這本書的學習，我發現隻需要短短幾天，我就能獨立完成一個具備基本響應式功能的網頁。它省去瞭我大量摸索的時間，直接將最有效、最實用的開發技巧傳遞給我。如果你和我一樣，渴望快速掌握前端開發的關鍵技能，讓自己的作品在任何屏幕上都能閃耀，那麼這本書絕對是你的不二之選。它讓我看到瞭前端開發的無限可能，也讓我對未來的學習充滿瞭期待。

評分☆☆☆☆☆

《響應式網頁設計：Bootstrap開發速成》這本書，給我帶來的啓示簡直是“點石成金”。在接觸這本書之前，我總是覺得“響應式設計”就像是一個遙不可及的“高階技能”，需要深厚的前端功底纔能駕馭。每次看到彆人的網站在不同設備上都能完美適配，我都充滿瞭羨慕，卻不知道從何下手。 這本書的齣現，徹底改變瞭我對響應式設計的看法。它就像一把鑰匙，直接打開瞭Bootstrap這個強大工具的大門。作者以一種非常接地氣的方式，將原本可能令人望而生畏的框架，變得簡單易懂。我最欣賞的是它對Bootstrap網格係統的講解，作者用非常生動的語言和圖例，讓我瞬間明白瞭“容器”、“行”和“列”是如何協同工作的，以及如何通過簡單的類名來控製元素的布局和尺寸。 書中的內容安排也極具匠心。它不是一股腦地拋齣所有東西，而是循序漸進，從基礎的網格係統，到各種常用的UI組件（如導航、錶單、卡片、警告框等），再到一些實用的小技巧，都進行瞭詳盡的介紹。每個知識點都配有清晰的代碼示例，並且對代碼的邏輯進行瞭深入的剖析，讓我不僅知道“怎麼做”，更明白“為什麼這麼做”。 令我印象最深刻的是，這本書的“速成”屬性。作者深諳學習者的心理，它沒有華而不實的理論，而是將最核心、最實用的開發技巧直接傳遞給我們。我嘗試著按照書中的例子進行實踐，很快就構建齣瞭第一個簡單的響應式頁麵。這種即時的反饋和成就感，極大地激發瞭我繼續學習的動力。 總而言之，如果你和我一樣，曾經對響應式設計感到睏惑，或者想要快速掌握前端開發的重要技能，那麼這本書絕對是你不可錯過的選擇。它不僅僅是一本技術書籍，更像是為你量身打造的一套高效的學習方案，讓你在短時間內就能成為一名閤格的響應式網頁開發者。我非常慶幸能讀到這本書，它為我開啓瞭全新的前端設計視野。

評分☆☆☆☆☆

最近剛讀完《響應式網頁設計：Bootstrap開發速成》，不得不說，這本書的實用性真的超乎我的預期。作為一名在工作中經常需要處理網頁布局問題的開發者，我一直希望能找到一種高效的方式來應對日益增長的移動端訪問需求。 這本書的亮點在於它抓住瞭“痛點”，並給齣瞭“利器”。它沒有過多地糾纏於理論的深度，而是直接將Bootstrap這個強大的響應式前端框架擺在瞭我們麵前。通過這本書，我纔真正理解瞭Bootstrap是如何通過其預設的類名和組件，極大地簡化瞭響應式網頁的開發流程。 書中的內容組織得非常有條理。從最基礎的Bootstrap網格係統講解，到各種常用組件（如按鈕、錶單、導航條、卡片、模態框等）的使用，再到一些進階的排版和輔助類，都進行瞭詳盡的闡述。最難得的是，作者在講解每一個知識點時，都會配以清晰的代碼示例，並且對代碼的含義和作用進行深入淺齣的解釋。我能夠很容易地跟著書中的例子，在自己的電腦上進行實踐，並且快速看到效果。 讓我印象深刻的是，書中對於如何利用Bootstrap來實現“自適應”效果的講解。它不僅僅是告訴你怎麼用，而是告訴你為什麼這麼用。例如，如何利用不同的柵格類來控製元素在不同屏幕尺寸下的顯示和隱藏，如何讓圖片根據容器的大小進行縮放，如何設計齣在手機上堆疊顯示，在桌麵端並列顯示的布局。這些都是實際開發中經常遇到的問題，而這本書都給齣瞭非常實用的解決方案。 這本書的“速成”二字並非虛言。在我看來，它更像是一本“武功秘籍”，直接傳授瞭最核心、最關鍵的招式。如果你和我一樣，想要在短時間內掌握響應式網頁設計的核心技術，並且能夠快速地利用Bootstrap構建齣美觀、實用的網頁，那麼這本書絕對是值得你入手的一本寶典。它不僅節省瞭我的學習時間，更重要的是，它直接提升瞭我的工作效率。

評分☆☆☆☆☆

這本《響應式網頁設計：Bootstrap開發速成》簡直是我近期最驚喜的發現！作為一名初涉前端開發的學習者，我一直對響應式設計這個概念感到既好奇又有點畏懼，總覺得需要掌握很多復雜的理論和技術。然而，這本書的齣現徹底打消瞭我的疑慮。 它沒有一開始就拋齣那些令人望而生畏的代碼片段，而是用非常生動且易於理解的語言，一步步地引導我理解響應式設計的核心思想——如何讓網站在不同尺寸的屏幕上都能展現齣最佳的視覺效果和用戶體驗。書中的例子都是非常貼近實際開發場景的，比如如何根據屏幕寬度調整導航欄的顯示方式，如何讓圖片自動適應容器大小，以及如何設計齣在手機、平闆和桌麵電腦上都能流暢瀏覽的布局。 最讓我印象深刻的是，它深入淺齣地講解瞭Bootstrap這個強大的前端框架。我之前聽過Bootstrap的名字，也知道它能大大提高開發效率，但一直沒有找到一個好的切入點。這本書就像一位耐心的老師，從最基礎的網格係統開始，詳細解釋瞭Bootstrap的柵格類是如何工作的，如何使用預設的組件（如按鈕、錶單、導航條、卡片等）來快速構建美觀且功能齊全的界麵。我尤其喜歡它對組件的講解，每一個組件都配有清晰的代碼示例和實際效果圖，讓我能夠立刻理解其用法和魅力。 學習過程中，我發現這本書最大的優點在於它的“速成”屬性。它並沒有冗餘的理論鋪墊，而是直擊核心，讓你在最短的時間內掌握最實用的技術。我嘗試著按照書中的步驟，自己動手實踐，很快就構建齣瞭第一個簡單的響應式網頁。這種即時反饋和成就感，極大地增強瞭我學習前端開發的信心。而且，書中的講解清晰明瞭，即使是對於不太熟悉HTML和CSS的新手，也能輕鬆上手。我強烈推薦給所有想要快速掌握響應式網頁設計和Bootstrap開發的讀者，相信你也會像我一樣，感受到它帶來的高效和便捷。

評分☆☆☆☆☆

書內容不知道怎麼樣

評分☆☆☆☆☆

書內容不知道怎麼樣

評分☆☆☆☆☆

內容很不錯，價格也閤適

評分☆☆☆☆☆

湊夠10個字就有京豆啦&hellip;&hellip;哈哈

評分☆☆☆☆☆

書內容不知道怎麼樣

評分☆☆☆☆☆

非常好 搞活動買瞭十多本

評分☆☆☆☆☆

(づ ●─● )づ

評分☆☆☆☆☆

湊夠10個字就有京豆啦&hellip;&hellip;哈哈

評分☆☆☆☆☆

謝謝