本書(shū)是目前市面上少見(jiàn)的實(shí)戰(zhàn)類(lèi)Bootstrap圖書(shū)，全書(shū)通過(guò)5個(gè)真實(shí)、具體、鮮活，又有代表性的項(xiàng)目實(shí)例，講解了Bootstrap的各種特性和用法。5個(gè)實(shí)例由淺入深，既各自獨(dú)立，又環(huán)環(huán)相扣，豐富的代碼，精美的插圖，加上細(xì)致入微的解釋?zhuān)屪x者極易上手，不知不覺(jué)中就能掌握所有重要概念，步入Bootstrap高手行列。本書(shū)講解了以下5種類(lèi)型的網(wǎng)站：個(gè)人作品網(wǎng)站、WordPress主題、企業(yè)門(mén)戶頁(yè)面、在線電子商務(wù)站點(diǎn)和單頁(yè)營(yíng)銷(xiāo)網(wǎng)站。

除了令人驚艷的項(xiàng)目實(shí)例，本書(shū)還向讀者介紹了很多實(shí)用插件、框架，以及前端開(kāi)發(fā)的工作流程，這些知識(shí)和技術(shù)并不局限于Bootstrap。特別地，作者用相當(dāng)篇幅介紹了LESS的基本原理和使用方法，讓即使從未接觸過(guò)LESS的人也能感覺(jué)游刃有余。此外，全書(shū)各章還分別介紹了HTML5 Boilerplate、Font Awesome、Respond.js、Masonry、Scroll-Spy，以及Roots的WordPress啟動(dòng)主題，讓讀者不必白手起家也能實(shí)現(xiàn)各種酷炫效果。

本書(shū)附錄還介紹了為獲得最快下載速度而對(duì)站點(diǎn)資源進(jìn)行優(yōu)化、實(shí)現(xiàn)響應(yīng)式圖片，以及為圖片傳送帶添加手勢(shì)的技術(shù)。作者提供的項(xiàng)目代碼也非常完整、清晰，每一章都有相應(yīng)的開(kāi)始和完成文件夾，方便讀者參考使用。

本書(shū)適合有一定HTML/CSS基礎(chǔ)的開(kāi)發(fā)人員和愛(ài)好者閱讀學(xué)習(xí)，經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員也可以把它當(dāng)作參考。

目錄

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