Bootstrap實戰(zhàn)（第2版）

目錄
第 1 章 初識Bootstrap 1
1．1 數(shù)量和質(zhì)量 1
1．1．1 與時俱進 2
1．1．2 Sass的威力 2
1．1．3 下載已編譯代碼 3
1．1．4 支持Flexbox的版本 3
1．1．5 僅包含網(wǎng)格系統(tǒng)的版本 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 設置主結(jié)構(gòu)元素 10
1．7 瀏覽器支持 20
1．7．1 瀏覽器引擎前綴 20
1．7．2 彈性盒模型 21
1．8 Yeoman工作流 22
1．9 排錯 22
1．10 小結(jié) 23
第 2 章 用Gulp打造自己的構(gòu)建流程 24
2．1 開發(fā)目標 24
2．2 Bootstrap構(gòu)建流程 26
2．3 在項目中安裝Gulp 26
2．3．1 創(chuàng)建包含任務信息的Gulpfile．js 27
2．3．2 清理任務 27
2．4 配置開發(fā)環(huán)境和生產(chǎn)環(huán)境 27
2．5 用Bower安裝Bootstrap 28
2．6 創(chuàng)建本地Sass文件結(jié)構(gòu) 29
2．6．1 將Bootstrap的Sass代碼編譯成CSS代碼 30
2．6．2 使用CSS調(diào)試sourcemap 30
2．6．3 運行postCSS前綴自動添加插件 31
2．6．4 處理CSS代碼以適配生產(chǎn)環(huán)境 33
2．6．5 對SCSS代碼進行靜態(tài)檢查 33
2．7 準備JavaScript插件 35
2．8 模塊化HTML 36
2．8．1 新建Gulp任務，編譯Panini模板 37
2．8．2 校驗編譯后的HTML代碼 38
2．9 創(chuàng)建靜態(tài)Web服務器 38
2．9．1 監(jiān)聽文件的修改 39
2．9．2 復制并壓縮圖片 39
2．10 歸納匯總，創(chuàng)建default任務 40
2．11 使用構(gòu)建流程，完成項目 41
2．11．1 布局模板 41
2．11．2 頁眉 42
2．12 調(diào)整產(chǎn)品特性的樣式 48
2．13 調(diào)整頁腳的樣式 50
2．14 用Bootstrap CLI運行模板 51
2．15 JavaScript任務管理器不是必需品 52
2．16 在GitHub上發(fā)布成果 52
2．17 小結(jié) 53
第 3 章 用Bootstrap和Sass定制博客站點 54
3．1 預期結(jié)果及搭建順序 54
3．2 項目配置與要求 56
3．3 Sass在項目開發(fā)中的威力 56
3．3．1 規(guī)則嵌套 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函數(shù) 65
3．6．5 復用他人的代碼 65
3．7 編寫自己的定制SCSS代碼 65
3．7．1 配色方案 66
3．7．2 準備HTML模板 67
3．7．3 調(diào)整頁眉樣式 68
3．7．4 調(diào)整導航條樣式 70
3．8 博客頁面主體部分 76
3．9 調(diào)整博客文章的樣式 77
3．10 調(diào)整側(cè)邊欄的樣式 80
3．11 頁腳 81
3．11．1 頁腳中的左側(cè)欄 82
3．11．2 頁腳中的右側(cè)欄 84
3．12 復用社交媒體按鈕的SCSS代碼 84
3．13 本章源代碼 85
3．14 小結(jié) 86
第 4 章WordPress主題 87
4．1 安裝WordPress及相關(guān)依賴 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 將導航菜單轉(zhuǎn)換成Bootstrap導航條 94
4．5．2 關(guān)于網(wǎng)格 96
4．6 配置導航條 96
4．6．1 更新HTML代碼 98
4．6．2 將照片置于導航條正中間 98
4．7 設置博客的頁眉 100
4．8 不要忘了頁腳 100
4．9 調(diào)整博客文章的樣式 102
4．10 博客中的側(cè)邊欄 103
4．11 滑入式側(cè)邊欄 107
4．12 調(diào)整按鈕的樣式 111
4．13 在頁面上調(diào)整評論的樣式 113
4．14 在頁面中添加傳送帶效果 116
4．15 在主題中使用Font Awesome字體圖標庫 118
4．16 使用網(wǎng)格砌體模板 119
4．17 子主題 121
4．18 從GitHub上下載 122
4．19 小結(jié) 122
第 5 章 作品展示站點 123
5．1 設計目標 123
5．2 查看練習文件 125
5．3 搭建傳送帶 129
5．4 創(chuàng)建響應式分欄 136
5．5 把鏈接變成按鈕 138
5．6 理解Sass 139
5．7 根據(jù)需要定制Bootstrap的Sass文件 139
5．8 添加logo圖片 143
5．9 添加圖標 145
5．10 調(diào)整傳送帶樣式 147
5．10．1 添加上、下內(nèi)邊距 147
5．10．2 重定位傳送帶指示器 147
5．10．3 調(diào)整指示器樣式 148
5．11 調(diào)整分欄及其內(nèi)容 150
5．12 調(diào)整頁腳樣式 153
5．13 接下來做什么 156
5．14 小結(jié) 157
第 6 章 企業(yè)網(wǎng)站 158
6．1 準備啟動文件 160
6．2 搭建基礎設計 161
6．2．1 在導航條中添加下拉菜單 161
6．2．2 用holder．js添加圖片 163
6．3 創(chuàng)建復雜的頁頭區(qū) 164
6．3．1 把logo放到導航條上方 165
6．3．2 調(diào)整導航條 166
6．4 添加實用導航 169
6．5 調(diào)整響應式導航 172
6．6 調(diào)整配色 174
6．7 調(diào)整折疊后的導航條樣式 175
6．8 調(diào)整水平導航條 176
6．9 增加對Flexbox的支持 178
6．10 設計復雜的響應式布局 178
6．10．1 調(diào)整大屏幕和超大屏幕中的布局 180
6．10．2 調(diào)整平板視口的中型布局 182
6．10．3 調(diào)整標題、字號和按鈕 186
6．10．4 增大主欄 188
6．10．5 調(diào)整第三欄 190
6．10．6 針對多個視口進行微調(diào) 193
6．11 復雜的頁腳 193
6．12 準備標記 193
6．12．1 調(diào)整布局適應平板 196
6．12．2 針對性地清除 197
6．12．3 修整細節(jié) 198
6．13 小結(jié) 201
第 7 章 電子商務網(wǎng)站 202
7．1 商品頁面的標記 204
7．2 面包屑、頁面標題和分頁導航 205
7．3 調(diào)整商品網(wǎng)格 208
7．4 側(cè)邊欄和篩選選項 217
7．4．1 基本樣式 218
7．4．2 調(diào)整Clearance Sale鏈接樣式 218
7．4．3 調(diào)整選項列表樣式 220
7．4．4 為選項鏈接添加FontAwesome圖標復選框 222
7．4．5 使用Sass混入在欄中對齊選項 225
7．4．6 針對平板和手機調(diào)整選項列表布局 227
7．4．7 在手機上折疊選項面板 229
7．5 添加搜索表單 231
7．6 小結(jié) 234
第 8 章 單頁面營銷網(wǎng)站 235
8．1 概況 235
8．2 研究初始文件 238
8．3 了解頁面內(nèi)容 239
8．4 添加Font Awesome圖標字體至項目 239
8．5 調(diào)整導航條 240
8．6 定制高清圖 242
8．7 美化功能列表 247
8．8 裝飾用戶評論區(qū) 250
8．8．1 定位及美化說明 252
8．8．2 調(diào)整說明元素的位置 253
8．9 吸引人的價目表 255
8．9．1 準備變量、文件和標記 255
8．9．2 美化表格頭 258
8．9．3 調(diào)整表體和表腳樣式 259
8．9．4 為不同的價目表添加不同的樣式 260
8．9．5 適配小視口 262
8．9．6 給表格以視覺層次 263
8．10 最后的調(diào)整 265
8．11 為導航條添加ScrollSpy 266
8．12 小結(jié) 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 其他用于部署B(yǎng)ootstrap 4的工具 285
9．11 小結(jié) 287