《Bootstrap實戰（第2版）》是2019年6月人民郵電出版社出版的圖書，作者是[荷蘭]巴斯·喬布森、[美]戴維·科克倫、[美]伊恩·惠特利。
基本介紹
- 中文名：Bootstrap實戰（第2版）
- 作者：[荷蘭]巴斯·喬布森、[美]戴維·科克倫、[美]伊恩·惠特利
- ISBN：9787115512420
- 頁數：287頁
- 定價：69元
- 出版社：人民郵電出版社
- 出版時間：2019年6月
- 裝幀：平裝
- 開本：16開
內容簡介,圖書目錄,
內容簡介
Boostrap是Twitter公司內部的一個工具，開源之後迅速得到了各方的認可。本書基於最新Bootstrap 4撰寫，在簡單介紹了安裝與配置之後就直奔主題，分別討論了構建流程、部落格站點、WordPress 主題、個人作品展示站點、企業網站、電子商務網站、單頁面行銷網站和Angular套用等幾個最具代表性的套用案例，結合這些案例細緻地剖析Bootstrap的使用方式和技巧。
圖書目錄
第 1 章 初識Bootstrap 1
1.1 數量和質量 1
1.1.1 與時俱進 2
1.1.2 Sass的威力 2
1.1.3 下載已編譯代碼 3
1.1.4 支持Flexbox的版本 3
1.1.5 僅包含格線系統的版本 3
1.1.6 從CDN載入運行Bootstrap 4
1.2 下載Bootstrap源檔案 4
1.2.1 下載後的檔案 5
1.2.2 下載安Bootstrap的其他方法 6
1.3 工具配置 6
1.4 使用Bootstrap CLI 8
1.5 準備新的Bootstrap項目 9
1.6 設定主結構元素 10
1.7 瀏覽器支持 20
1.7.1 瀏覽器引擎前綴 20
1.7.2 彈性盒模型 21
1.8 Yeoman工作流 22
1.9 排錯 22
1.10 小結 23
第 2 章 用Gulp打造自己的構建流程 24
2.1 開發目標 24
2.2 Bootstrap構建流程 26
2.3 在項目中安裝Gulp 26
2.3.1 創建包含任務信息的Gulpfile.js 27
2.3.2 清理任務 27
2.4 配置開發環境和生產環境 27
2.5 用Bower安裝Bootstrap 28
2.6 創建本地Sass檔案結構 29
2.6.1 將Bootstrap的Sass代碼編譯成CSS代碼 30
2.6.2 使用CSS調試sourcemap 30
2.6.3 運行postCSS前綴自動添加外掛程式 31
2.6.4 處理CSS代碼以適配生產環境 33
2.6.5 對SCSS代碼進行靜態檢查 33
2.7 準備JavaScript外掛程式 35
2.8 模組化HTML 36
2.8.1 新建Gulp任務，編譯Panini模板 37
2.8.2 校驗編譯後的HTML代碼 38
2.9 創建靜態Web伺服器 38
2.9.1 監聽檔案的修改 39
2.9.2 複製並壓縮圖片 39
2.10 歸納匯總，創建default任務 40
2.11 使用構建流程，完成項目 41
2.11.1 布局模板 41
2.11.2 頁眉 42
2.12 調整產品特性的樣式 48
2.13 調整頁腳的樣式 50
2.14 用Bootstrap CLI運行模板 51
2.15 JavaScript任務管理器不是必需品 52
2.16 在GitHub上發布成果 52
2.17 小結 53
第 3 章 用Bootstrap和Sass定製部落格站點 54
3.1 預期結果及搭建順序 54
3.2 項目配置與要求 56
3.3 Sass在項目開發中的威力 56
3.3.1 規則嵌套 57
3.3.2 變數 58
3.3.3 混入 59
3.3.4 操作 60
3.4 檔案引入 61
3.5 使用SCSS檢查工具編寫更簡潔易讀的代碼 61
3.6 Sass定製策略 62
3.6.1 用變數進行定製 62
3.6.2 擴展Bootstrap的預定義CSS 類 63
3.6.3 使用/復用Bootstrap中的混入 64
3.6.4 Sass函式 65
3.6.5 復用他人的代碼 65
3.7 編寫自己的定製SCSS代碼 65
3.7.1 配色方案 66
3.7.2 準備HTML模板 67
3.7.3 調整頁眉樣式 68
3.7.4 調整導航條樣式 70
3.8 部落格頁面主體部分 76
3.9 調整部落格文章的樣式 77
3.10 調整側邊欄的樣式 80
3.11 頁腳 81
3.11.1 頁腳中的左側欄 82
3.11.2 頁腳中的右側欄 84
3.12 復用社交媒體按鈕的SCSS代碼 84
3.13 本章原始碼 85
3.14 小結 86
第 4 章WordPress主題 87
4.1 安裝WordPress及相關依賴 87
4.1.1 安裝WordPress 88
4.1.2 Node.js、Gulp和Bower 88
4.2 安裝JBST 4主題 88
4.3 安裝主題 89
4.4 復用Sass代碼 91
4.5 WordPress與Bootstrap之間的衝突——預定義CSS類 93
4.5.1 將導航選單轉換成Bootstrap導航條 94
4.5.2 關於格線 96
4.6 配置導航條 96
4.6.1 更新HTML代碼 98
4.6.2 將照片置於導航條正中間 98
4.7 設定部落格的頁眉 100
4.8 不要忘了頁腳 100
4.9 調整部落格文章的樣式 102
4.10 部落格中的側邊欄 103
4.11 滑入式側邊欄 107
4.12 調整按鈕的樣式 111
4.13 在頁面上調整評論的樣式 113
4.14 在頁面中添加傳送帶效果 116
4.15 在主題中使用Font Awesome字型圖示庫 118
4.16 使用格線砌體模板 119
4.17 子主題 121
4.18 從GitHub上下載 122
4.19 小結 122
第 5 章 作品展示站點 123
5.1 設計目標 123
5.2 查看練習檔案 125
5.3 搭建傳送帶 129
5.4 創建回響式分欄 136
5.5 把連結變成按鈕 138
5.6 理解Sass 139
5.7 根據需要定製Bootstrap的Sass檔案 139
5.8 添加logo圖片 143
5.9 添加圖示 145
5.10 調整傳送帶樣式 147
5.10.1 添加上、下內邊距 147
5.10.2 重定位傳送帶指示器 147
5.10.3 調整指示器樣式 148
5.11 調整分欄及其內容 150
5.12 調整頁腳樣式 153
5.13 接下來做什麼 156
5.14 小結 157
第 6 章 企業網站 158
6.1 準備啟動檔案 160
6.2 搭建基礎設計 161
6.2.1 在導航條中添加下拉選單 161
6.2.2 用holder.js添加圖片 163
6.3 創建複雜的頁頭區 164
6.3.1 把logo放到導航條上方 165
6.3.2 調整導航條 166
6.4 添加實用導航 169
6.5 調整回響式導航 172
6.6 調整配色 174
6.7 調整摺疊後的導航條樣式 175
6.8 調整水平導航條 176
6.9 增加對Flexbox的支持 178
6.10 設計複雜的回響式布局 178
6.10.1 調整大螢幕和超大螢幕中的布局 180
6.10.2 調整平板視口的中型布局 182
6.10.3 調整標題、字號和按鈕 186
6.10.4 增大主欄 188
6.10.5 調整第三欄 190
6.10.6 針對多個視口進行微調 193
6.11 複雜的頁腳 193
6.12 準備標記 193
6.12.1 調整布局適應平板 196
6.12.2 針對性地清除 197
6.12.3 修整細節 198
6.13 小結 201
第 7 章 電子商務網站 202
7.1 商品頁面的標記 204
7.2 麵包屑、頁面標題和分頁導航 205
7.3 調整商品格線 208
7.4 側邊欄和篩選選項 217
7.4.1 基本樣式 218
7.4.2 調整Clearance Sale連結樣式 218
7.4.3 調整選項列表樣式 220
7.4.4 為選項鍊接添加FontAwesome圖示複選框 222
7.4.5 使用Sass混入在欄中對齊選項 225
7.4.6 針對平板和手機調整選項列表布局 227
7.4.7 在手機上摺疊選項面板 229
7.5 添加搜尋表單 231
7.6 小結 234
第 8 章 單頁面行銷網站 235
8.1 概況 235
8.2 研究初始檔案 238
8.3 了解頁面內容 239
8.4 添加Font Awesome圖示字型至項目 239
8.5 調整導航條 240
8.6 定製高清圖 242
8.7 美化功能列表 247
8.8 裝飾用戶評論區 250
8.8.1 定位及美化說明 252
8.8.2 調整說明元素的位置 253
8.9 吸引人的價目表 255
8.9.1 準備變數、檔案和標記 255
8.9.2 美化表格頭 258
8.9.3 調整表體和表腳樣式 259
8.9.4 為不同的價目表添加不同的樣式 260
8.9.5 適配小視口 262
8.9.6 給表格以視覺層次 263
8.10 最後的調整 265
8.11 為導航條添加ScrollSpy 266
8.12 小結 269
第 9 章 用Bootstrap搭建Angular套用 271
9.1 概述 271
9.2 首次搭建Angular套用 272
9.3 在套用中添加路由 273
9.4 配置導航 274
9.5 在應用程式中添加Bootstrap的標記代碼 275
9.6 在應用程式中集成Bootstrap的CSS代碼 276
9.6.1 設定Sass編譯器 277
9.6.2 添加後置處理器 278
9.6.3 使用ng-bootstrap指令 279
9.7 下載完整的代碼 282
9.8 使用Angular CLI 282
9.9 在React.js中使用Bootstrap 283
9.10 其他用於部署Bootstrap 4的工具 285
9.11 小結 287
