適讀人群：本書適閤已經熟練掌握HTML和CSS基礎的讀者，最好是熟悉規範的HTML5和樣式錶的寫法。瞭解JavaScript的基本知識，包括Bootstrap的jQuery插件用法更好。本書經常會涉及自定義LESS文件，因此熟悉LESS的讀者會感覺更輕鬆一些。不過，即便從來沒有使用過LESS，本書由淺入深的介紹，也會讓你順利入門。
　　基於Bootstrap 3.0撰寫
　　五大應用實例，全麵掌握Bootstrap使用技巧
　　學會重編輯LESS文件和使用Bootstrap的JS插件
　　Bootstrap是前端開發中應用非常廣泛的一個框架，是Twitter公司內部的一個工具，開源之後迅速得到瞭各方的認可。本書基於Bootstrap 3撰寫，在簡單介紹瞭安裝與配置之後就直奔主題，分彆討論瞭個人作品站點、WordPress主題、企業網站、電子商務網站和單頁營銷網站等幾個具代錶性的應用案例，結閤這些案例細緻地剖析瞭Bootstrap還有LESS的使用方式和技巧。

內容簡介

　　第1章“初識Bootstrap”，教給大傢如何下載Bootstrap，如何基於HTML5 Boilerplate設置站點模闆，並且掌握把Bootstrap的LESS文件編譯為CSS的方法。
　　第2章“作品展示站點”，開始學習創建簡單的個人作品展示網站，包括全寬的傳送帶切換效果，三欄文本布局，以及使用Font Awesome的字體圖標——通過自定義Bootstrap的LESS文件。
　　第3章“WordPress主題”，學習把第2章的個人作品展示站點轉換成一個WordPress主題。這一章要利用有名的Roots Theme，根據我們的需要，還會涉及自定義模闆文件、LESS、CSS和JavaScript。
　　第4章“企業網站”，將通過創建一個企業級網站學習如何創建復雜的頁頭區，添加下拉菜單和實用導航，以及構建復雜的三欄布局和四欄頁腳，同時還要確保所有這些內容具有完全的響應能力。
　　第5章“電子商務網站”，帶領大傢探索商品展示頁麵的設計，學會在復雜的響應式網格中控製多行商品。與此同時，還要實現一個響應式的商品篩選工具。
　　第6章“單頁營銷網站”，這一章教給大傢構建時尚的單頁營銷網站，包括帶高清圖的大字歡迎語、帶大圖標的商品功能列錶、圖片牆式的用戶評論區，以及三個精美的價目錶，完成一個支持動態滾動導航的漂亮的單頁網站。

作者簡介

David Cochran，現為俄剋拉荷馬州衛斯理大學副教授，自2005年以來一直講授交互設計。他重視實踐，不喜歡走捷徑，推崇Web標準。2012年，David在webdesign.tutsplus.com上開設瞭Bootstrap 2.0係列教程專欄。他還在Packt Publishing齣版過一個小書Twitter Bootstrap Web Development How-To 。閑暇時間，David會在自己網站alittlecode.com上寫寫博客。他還是媒體、設計和谘詢公司BitBrilliant的負責人。

　　Ian Whitley ，自幼愛好寫作。2010年，他對Web開發産生瞭深厚興趣，並投身其中。他很早就開始使用Twitter Bootstrap，而且在David Cochran的幫助下，很快就掌握瞭這個框架，並將其應用到瞭很多項目中。目前，他多數情況下會使用Bootstrap為客戶創建WordPress模闆。Ian是BitBrilliant公司的開發主管。

內頁插圖

第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

前言/序言

　　2011年8月，Twitter Bootstrap橫空齣世。如今，這個被稱為Bootstrap的框架，儼然已成為前端設計領域最受歡迎的輔助技術。Bootstrap 3又是一個裏程碑式的版本，增加瞭移動優先的響應式網格、新的強大的LESS混入，而且還針對現代瀏覽器對核心代碼進行瞭優化。
　　本書詳細介紹Bootstrap的使用方法。全書簡明易懂，循序漸進，讓讀者時時處處體驗到自定義和重編譯Bootstrap的LESS文件的強大威力，同時掌握應用Bootstrap的JavaScript插件設計專業用戶界麵的技巧。
　　這本書並不局限於Bootstrap。Bootstrap隻是一個工具，一個達到目標的手段。學習完這本書之後，讀者將成為一位更加高效、熟練的Web設計師。
　　本書內容
　　第1章“初識Bootstrap”，教給大傢如何下載Bootstrap，如何基於HTML5 Boilerplate設置站點模闆，並且掌握把Bootstrap的LESS文件編譯為CSS的方法。
　　第2章“作品展示站點”，開始學習創建簡單的個人作品展示網站，包括全寬的傳送帶切換效果，三欄文本布局，以及使用Font Awesome的字體圖標——通過自定義Bootstrap的LESS文件。
　　第3章“WordPress主題”，學習把第2章的個人作品展示站點轉換成一個WordPress主題。這一章要利用有名的Roots Theme，根據我們的需要，還會涉及自定義模闆文件、LESS、CSS和JavaScript。
　　第4章“企業網站”，將通過創建一個企業級網站學習如何創建復雜的頁頭區，添加下拉菜單和實用導航，以及構建復雜的三欄布局和四欄頁腳，同時還要確保所有這些內容具有完全的響應能力。
　　第5章“電子商務網站”，帶領大傢探索商品展示頁麵的設計，學會在復雜的響應式網格中控製多行商品。與此同時，還要實現一個響應式的商品篩選工具。
　　第6章“單頁營銷網站”，這一章教給大傢構建時尚的單頁營銷網站，包括帶高清圖的大字歡迎語、帶大圖標的商品功能列錶、圖片牆式的用戶評論區，以及三個精美的價目錶，最終完成一個支持動態滾動導航的漂亮的單頁網站。
　　附錄A“優化站點資源”，以第2章的網站資源為例，介紹瞭為最終部署網站而優化Bootstrap LESS/CSS及JavaScript等靜態資源的基本流程和工具。這個附錄對所有Bootstrap項目都一樣有用。
　　附錄B“實現響應式圖片”，介紹最前沿的響應式圖片解決方案Picturefill，仍然以第2章項目中的作品圖片傳送帶為例。這個附錄對其他項目也一樣有用。
　　附錄C“讓傳送帶支持手勢”，介紹在Bootstrap的傳送帶中使用一款先進的插件Hammer.js，實現傳送帶圖片的輕掃切換功能。
　　本書要求
　　要完成本書各章的項目，需要安裝下列軟件：
　　現代瀏覽器（包括Internet Explorer 8及以上版本）；
　　代碼編輯器；
　　LESS編譯器，其less.js的版本至少是1.3.3。
　　讀者對象
　　本書適閤已經熟練掌握HTML和CSS基礎的讀者，最好是熟悉規範的HTML5和樣式錶的寫法。瞭解JavaScript的基本知識，包括Bootstrap的jQuery插件用法更好。本書經常會涉及自定義LESS文件，因此熟悉LESS的讀者會感覺更輕鬆一些。不過，即便從來沒有使用過LESS，本書由淺入深的介紹，也會讓你順利入門。