第1 章 初識Bootstrap 1
1.1 數量和質量 1
1.1.1 與時俱進 1
1.1.2 LESS 的威力 2
1.2 下載Bootstrap 2
1.3 準備項目模板文件夾 4
1.3.1 下載H5BP 4
1.3.2 刪除不必要的樣板文件 4
1.3.3 理解樣板中的.htaccess 文件 5
1.3.4 更新必要的樣板文件 5
1.3.5 更新站點桌面和觸摸設備圖標 5
1.4 加入Bootstrap 文件 5
1.4.1 字體 6
1.4.2 JavaScript 6
1.4.3 暫時不考慮CSS 文件 9
1.4.4 復制LESS 文件 9
1.5 大盤點 9
1.6 構造HTML 模板 10
1.7 設定站點標題 12
1.7.1 調整過時的瀏覽器消息 12
1.7.2 設置主結構元素 13
1.8 導航條 14
1.9 編譯和鏈接默認的Bootstrap CSS 15
1.9.1 編譯Bootstrap CSS 15
1.9.2 完成響應式導航條 17
1.9.3 排除故障 19
1.9.4 支持IE8 20
1.10 小結 21
第2 章 作品展示站點 23
2.1 設計目標 23
2.2 查看練習文件 26
2.3 搭建傳送帶 28
2.4 創建響應式分欄 30
2.5 把鏈接變成按鈕 31
2.6 理解LESS 32
2.6.1 嵌套規則 32
2.6.2 變量 33
2.6.3 混入 33
2.6.4 運算式 34
2.6.5 導入文件 34
2.6.6 模塊化 35
2.7 根據需要定制Bootstrap 的LESS文件 35
2.8 添加Logo 圖片 38
2.9 調整導航項內邊距 40
2.10 添加圖標 41
2.11 添加Font Awesome 圖標 43
2.12 調整導航項圖標顏色 45
2.13 調整響應式導航條斷點 47
2.14 調整傳送帶 47
2.14.1 把控件改成使用Font Awesome 圖標 48
2.14.2 添加上、下內邊距 50
2.14.3 強制圖片全寬 50
2.14.4 約束傳送帶的高度 51
2.14.5 重定位指示器 52
2.14.6 調整指示器外觀 54
2.15 調整分欄及其內容 56
2.16 修飾頁腳 60
2.17 接下來做什么 62
2.18 小結 63
第3 章 WordPress 主題 64
3.1 下載并重命名Roots 主題 64
3.2 安裝主題 66
3.3 配置導航條 69
3.4 添加首頁內容 71
3.5 自定義頁面模板 75
3.6 理解Roots 的基準模板 76
3.7 創建自定義的基本模板 79
3.8 在自定義結構中使用自定義欄目 81
3.9 創建自定義的內容模板 83
3.9.1 通過自定義欄目構建傳送帶 84
3.9.2 使用自定義欄目構建三欄內容 87
3.10 加入頁腳內容 88
3.11 Roots 的assets 文件夾里有什么 89
3.12 更換設計資源 90
3.13 鏈接樣式表 91
3.14 鏈接JavaScript 文件 92
3.15 為導航條和頁腳添加Logo 圖片 94
3.16 添加圖標鏈接 96
3.17 恢復WordPress 特有的樣式 97
3.18 小結 99
第4 章 企業網站 100
4.1 準備啟動文件 103
4.2 頁頭區 105
4.2.1 把Logo 放到導航條上方 105
4.2.2 調整導航條 108
4.3 添加實用導航 110
4.4 調整響應式導航 112
4.5 調整配色 115
4.6 調整折疊后的導航條配色 116
4.7 設計復雜的響應式布局 120
4.7.1 調整中、寬布局 122
4.7.2 調整標題、字體大小和按鈕 124
4.7.3 增大主欄 126
4.7.4 調整第三欄 128
4.7.5 針對多個視口進行微調 131
4.8 復雜的頁腳 131
4.8.1 準備標記 131
4.8.2 調整布局適應平板 132
4.8.3 針對性地清除 134
4.8.4 修整細節 135
4.9 小結 138
第5 章 電子商務網站 139
5.1 商品頁的標記 141
5.2面包屑、頁面標題和分頁導航 142
5.3 調整商品網格 145
5.4 側邊欄和篩選選項 150
5.4.1 基本布局 152
5.4.2 Clearance Sale 按鈕 152
5.4.3 選項列表 154
5.4.4 為選項鏈接添加Font Awesome 圖標復選框 156
5.4.5 使用LESS 混入在欄中對齊選項 159
5.4.6 針對平板和手機調整選項列表布局 159
5.4.7 在手機上折疊選項面板 161
5.5 小結 165
第6 章 單頁營銷網站 166
6.1 概況 166
6.2 初始文件 169
6.3 了解頁面內容 169
6.4 調整導航條 170
6.5 定制高清圖 171
6.6 美化功能列表 178
6.7 裝飾用戶評論區 182
6.7.1 定位及美化說明 183
6.7.2 調整說明元素的位置 186
6.7.3 添加Bootstrap 的網格類 187
6.7.4 下載并鏈接JavaScript 插件 188
6.7.5 初始化Masonry 插件 189
6.7.6 切齊圖片 191
6.7.7 適應小微屏幕 194
6.8 吸引人的價目表 194
6.8.1 準備變量、文件和標記 195
6.8.2 表格頭 197
6.8.3 表體和表腳 199
6.8.4 為不同的價目表添加不同的樣式 200
6.8.5 適配小視口 202
6.8.6 突出重要的表格 205
6.9 最后的調整 209
6.10 為導航條添加ScrollSpy 211
6.11 小結 213
附錄A 優化站點資源 214
附錄B 實現響應式圖片 218
附錄C 讓傳送帶支持手勢 225