譯者序

作者簡介

審校者簡介

前言

第1章　Bootstrap入門	1

1.1　移動優先的設計	1

1.2　為什么選擇Bootstrap	3

1.3　小結	6

第2章　Bootstrap的安裝與定制	7

2.1　在HTML文件中包含Bootstrap	8

2.2　Bootstrap CDN	10

2.3　用自定義的CSS進行覆蓋	12

2.4　使用Bootstrap定制程序	15

2.5　Bootstrap的深度定制	17

2.6　下載Bootstrap源代碼	18

2.7　編譯LESS文件	20

2.7.1　使用SimpLESS編譯LESS文件	21

2.7.2　使用WinLess編譯LESS文件	22

2.7.3　使用命令行編譯LESS文件	23

2.8　整合	23

2.9　小結	31

第3章　使用Bootstrap柵格	32

3.1　使用Bootstrap柵格類	33

3.1.1　添加行與列	34

3.1.2　為小型設備定制柵格	37

3.1.3　為列添加偏移	39

3.1.4　推拉列	40

3.1.5　嵌套列	42

3.2　使用Bootstrap變量和mixin	44

3.2.1　Bootstrap柵格變量	45

3.2.2　Bootstrap柵格mixin	45

3.3　使用Bootstrap柵格mixin和變量創建博客布局	46

3.4　小結	57

第4章　使用基本CSS樣式	58

4.1　實現Bootstrap基本CSS樣式	59

4.1.1　標題	59

4.1.2　頁面主體 	63

4.1.3　排版元素	64

4.1.4　表格	78

4.1.5　按鈕	82

4.1.6　表單	84

4.1.7　代碼	88

4.1.8　圖片	90

4.1.9　字體系列	91

4.1.10　字體尺寸	92

4.2　使用LESS變量自定義基本CSS樣式	93

4.3　小結	97

第5章　添加Bootstrap組件	98

5.1　組件及其用途	99

5.1.1　字體圖標	99

5.1.2　導航標簽頁	102

5.1.3　膠囊式標簽頁	104

5.1.4　兩端對齊的標簽和膠囊式標簽	105

5.1.5　下拉菜單	106

5.1.6　導航條	108

5.1.7　路徑導航	111

5.2　小結	113

第6章　組件的更多功能	114

6.1　用組件簡化網頁設計項目	115

6.1.1　巨幕	116

6.1.2　頁頭	117

6.1.3　well	118

6.1.4　徽章	119

6.1.5　標簽	120

6.1.6　進度條	121

6.1.7　面板	122

6.1.8　縮略圖	125

6.1.9　分頁	126

6.1.10　列表組	128

6.1.11　按鈕組	129

6.1.12　按鈕工具欄	132

6.1.13　分裂式按鈕下拉菜單	133

6.1.14　兩端對齊排列的按鈕組	135

6.1.15　復選框和單選按鈕	135

6.1.16　警告框	137

6.1.17　媒體對象	139

6.1.18　具有響應式特性的嵌入內容	140

6.2　小結	143

第7章　使用JavaScript增強用戶體驗	144

7.1　使用官方插件簡化項目設計	145

7.1.1　工具提示	145

7.1.2　彈出框	147

7.1.3　折疊面板	149

7.1.4　滾動監聽	152

7.1.5　模態窗	156

7.1.6　輪播	158

7.2　小結	160

第8章　Bootstrap技術中心—Bootstrap工具介紹	161

8.1　主題和模板	162

8.1.1　開源主題和模板	162

8.1.2　商業主題和模板	163

8.2　現成的資源和插件	164

8.2.1　Font Awesome	164

8.2.2　Bootstrap的Social Buttons	165

8.2.3　Bootstrap Magic	165

8.2.4　Jasny Bootstrap	166

8.2.5　Fuel UX	167

8.2.6　Bootsnipp	169

8.2.7　Bootdey	170

8.2.8　BootBundle	172

8.2.9　Start Bootstrap	172

8.3　開發工具和編輯器	173

8.3.1　Bootply	173

8.3.2　LayoutIt	174

8.3.3　UI Bootstrap	175

8.3.4　Kickstrap	175

8.3.5　ShoeStrap	175

8.3.6　StrapPress	175

8.3.7　Summernote	176

8.4　官方的Bootstrap資源	176

8.4.1　Bootlint	176

8.4.2　Bootstrap with SaaS	176

8.4.3　Bootstrap Expo	177

8.5　小結	177

本書將幫助你駕馭Bootstrap這一功能強大的工具，讓網頁設計的過程變得更加簡單。書中從最基本的Bootstrap下載、定制和LESS開始，進而介紹柵格系統和基本的CSS樣式。本書還介紹了組件、jQuery插件和其他獨特的功能，正是因為它們的存在，Bootstrap才成為了構建網頁的神奇工具。書中還提供了Bootstrap的技術資源匯總，帶領讀者領略可以增強Bootstrap功能的各種第三方資源、主題和模板。

通過閱讀本書，你將：
掌握Bootstrap的內部工作原理，理解Bootstrap移動優先的原則。
了解Bootstrap柵格系統并實現自定義的布局元素。
集成LESS以進一步增強網頁的功能。
熟悉基本的CSS樣式和各種已有的官方組件。
理解jQuery插件的工作原理。
探索附加的資源和工具，讓網頁設計變得更加輕松。
開發響應式、美觀的電子商務網站，熟悉Bootstrap的實際應用。

隨著移動網頁開發時代的到來，移動和平板設備逐漸成為了人們使用Internet的事實標準。Bootstrap的第3版引入了移動優先的響應式柵欄、LESS變量、特制的組件以及一些可以幫助用戶設計動態用戶界面的插件等特性，是一種能夠增強前端網頁設計的強大框架。本書既詳細介紹了Bootstrap的內置特性及使用方法，還介紹許多第三方工具和資源，用淺顯易懂的方式，讓大家掌握各種技術訣竅，進而了解Bootstrap的各種復雜細節。
本書共8章，第1章簡要介紹Bootstrap并說明為什么要在網頁設計項目中使用Bootstrap；第2章詳細介紹在項目中安裝Bootstrap的不同方法，以及如何對它進行定制，構建出令人印象深刻的網站；第3章講解Bootstrap柵格以及如何在項目中使用柵格；第4章通過實際的方法和許多代碼實例，展示如何使用Bootstrap的基本CSS元素；第5章介紹Bootstrap所包含的一些流行的CSS組件以及如何在項目中使用它們；第6章進一步介紹其他一些在Bootstrap中被廣泛使用的組件，包括well、標簽、進度條、徽章、面板、警告框和分頁；第7章討論如何用JavaScript增強Bootstrap的體驗；第8章介紹一些令我們受益的第三方工具和資源，簡化Bootstrap的網頁設計體驗。

Bootstrap是一種能夠增強前端網頁設計的強大框架，它的第3版引入了更多的特性，包括移動優先（mobile-first）的響應式柵格、LESS變量、特制的組件以及一些可以幫助用戶設計動態用戶界面的插件等。隨著移動網頁開發時代的到來，移動和平板設備逐漸成為人們使用Internet的事實標準。所以，我們有必要先從移動優先的角度設計網站，繼而再考慮臺式和筆記本電腦上更大的屏幕。Bootstrap也可謂是功能豐富，它集成了各種精良的解決方案和特性，可以幫助開發人員快速輕松地實現困難的任務。除了這些內置的特性，社區還對一些附加的資源和第三方工具提供了有力的支持。當我們在構建企業級和美觀的網頁應用程序時，會用到許多復雜的布局樣式，利用這些資源和工具就可以避免在設計中出現大量不確定性因素。本書就是這樣一份內容豐富的資源，它用淺顯易懂的方式，讓大家掌握各種技術訣竅，進而了解Bootstrap的各種復雜細節。

本書內容

第1章是對Bootstrap的簡單介紹。本章解釋了我們使用Bootstrap的必要性，此外還闡述了Bootstrap為簡化網頁設計所采用的移動優先方法的相關范例。

第2章以實際演練的方式討論了Bootstrap的安裝和定制，內容涵蓋了定制樣式、Bootstrap的深度定制和LESS文件的編譯。

第3章首先介紹了Bootstrap柵格類的使用，從中我們可以學到如何添加行、列與偏移，如何嵌套列，如何使用不同的變量和mixin。最后，我們將通過一個實際的例子，創建一個自定義的博客布局來進行總結。

第4章首先介紹了排版的相關內容，然后逐一介紹CSS的各種知識，包括表格、表單、按鈕和各種響應式工具，也包括在Bootstrap中廣泛應用的輔助類工具。

第5章將學習字體圖標（glyphicon）和路徑導航（breadcrumb）這類流行的組件，此外還將學習一些不同的導航組件，比如導航標簽頁（nav tab）、膠囊式標簽頁（nav pill）和下拉菜單，這些組件將幫助大家構建出交互式的網頁。

第6章將對其他一些組件進行廣泛深入的介紹，包括Well、標簽、進度條、徽章、面板、警告框和分頁，這些組件是“現代”網站的關鍵所在，我們藉此可以構建出美觀的網站。

第7章將討論一些官方的和選配的插件，可以實現模態窗（modal）、輪播（carousel）、工具提示（tooltip）和折疊面板（accordion），我們可以利用它們快速開發出動態的網頁，而不需要為了實現這些特性而編寫很多復雜的代碼。

第8章將介紹一些令我們受益的第三方工具和主題，它們簡化了Bootstrap的網頁設計體驗。這部分內容是一個一站式的解決方案，提供了大量的資源，比如模板、自定義布局以及一些代碼片段，能夠使我們快速輕松地實現可靠的用戶界面。本章還對Bootstrap的未來、下一步的發展以及它與WordPress、Joomla這類“未來”的網頁設計的重要框架的種種兼容性問題進行了概述。

附加章節向大家逐步描述了構建現代電子商務網站的全過程，有助于大家理解現實場景中的網頁設計。這一章是一個樣例，供希望能夠利用較為輕量的系統和高效的方式構建企業級網站的讀者以參考。本章通過網絡提供給大家，地址是：https://www.packtpub.com/sites/default/files/downloads/Building%20an%20e-commerce%20Website%20with%20Bootstrap.pdf 。

閱讀本書需要準備的知識

我們除了需要掌握HTML、CSS和JavaScript的基礎知識之外，還需要一個編輯器。可以用記事本或Notepad++來處理書中的示例。雖然大部分的代碼都是在記事本中編寫的，但你可能更喜歡使用Notepad++，因為它是開源的，功能也更為強大，還具有語法高亮和語法折疊等特性，能夠幫助我們井然有序地進行編碼。

本書閱讀對象

本書既適用于初學者，也適用于那些經驗豐富的網頁設計師和希望構建具有專業外觀的動態網站的開發者。對于希望能把Bootstrap應用在開發中的有追求的用戶而言，除了HTML、HTML5和CSS的基礎知識之外，還要掌握一些（非常基本的）JavaScript知識。讀者在閱讀本書之前并不需要掌握Bootstrap的有關知識，因為本書將會把Bootstrap應用到你的“寶貝”項目中所需要的所有訣竅都教給你。

格式約定

如果我們希望你關注代碼塊的某一特定部分，相關的代碼行或條目將會加粗顯示。

新術語和重要文字將以粗體顯示。所有我們在屏幕上看到的文字，比如出現在菜單或對話框中的文本，都將以如下格式顯示：“單擊下載Bootstrap按鈕，文件將會以ZIP格式下載。”

出現在此框中的文字表示警告或重要的注意事項。

出現在此框中的文字表示提示或技巧。

下載示例代碼。