最漂亮動感的前端框架：Bootstrap讓你的網站與眾不同

前 言

Bootstrap 是由Twitter 公司推出的一款前端開發架構，在目前的Web 和行動Web應用設計領域中非常受歡迎。基於Bootstrap 架構可以實現前端UI設計與後台業務邏輯設計的協作開發，可以完美地實現回應式版面配置介面，可以無縫轉換如PC、平板和手機等多種裝置終端，可以說Bootstrap 是所有前端開發架構中的集大成者。

關於Bootstrap 架構開發的圖書不少，但真正從實際應用出發，透過實際案例來指導讀者加強應用程式開發水準的書卻不多。本書以實戰為主旨，透過大量的程式實例與專案實例，讓讀者全面、深入、透徹地了解Bootstrap 架構開發的各種熱門技術及各種主流架構及其整合使用，加強實際開發水準和專案實戰能力。

關於Bootstrap 架構

Bootstrap 不僅是一個CSS 架構

Bootstrap 架構是以CSS 標準建置為基礎的，但如果僅認為其是一個前端CSS架構就太狹隘了。Bootstrap 架構最初是由Twitter 公司的兩個員工發佈的，旨在能夠讓Web 應用適應各種不同的終端裝置，一經推出就受到業內開發人員的廣泛關注。隨著Bootstrap 架構的快速發展，很快成為開發跨平台和跨裝置應用的首選前端技術。

目前，Bootstrap 已經是一款整合HTML5、CSS3 和JavaScript 技術的開發架構，本身已經組成了獨立的開發系統，以Bootstrap 延伸開發為基礎的外掛程式也非常受歡迎。

因此，Bootstrap 不再僅是一個CSS 架構，其涵蓋的內容已經十分廣泛。

Bootstrap 架構的主流地位

Bootstrap 架構在學習上需要花費一定的功夫，使用上會考慮設計人員的正常想法，對於有一定的前端開發基礎的設計人員還是易學好用的。

Bootstrap 架構的行動開發特性與目前行動網際網路在蓬勃發展的大背景下，二者是相得益彰。一方面，隨著行動應用程式的大行其道，促使Bootstrap 架構的不斷改進與增強；另一方面，隨著Bootstrap 架構效能的不斷提升，可以幫助前端設計開發人員利用Bootstrap 架構開發出更強大的行動應用程式。可以說，Bootstrap 架構已經成為行動應用程式開發的主流。

本書與Bootstrap 架構

許多人在學習Bootstrap 架構的時候經常會搞混一些概念和用法。從某種角度來說，Bootstrap 架構是一系列前端技術的集合，並且是不斷向前發展的技術。為幫助那些對行動開發有興趣的讀者能夠在短時間內掌握Bootstrap 架構開發技術，因此筆者撰寫本書。

本書首先從Bootstrap 架構的基礎入手，讓讀者了解Bootstrap 架構究竟如何使用。然後針對Bootstrap 架構的內容由淺入深一一進行說明，尤其是在行動開發中的應用，以期讀者能夠掌握Bootstrap 架構的核心內容。最後再說明以Bootstrap 架構為基礎的開發實戰，讓讀者可以快速成為一位高效而專業的開發者。

本書特色

內容豐富，覆蓋面廣

本書基本涵蓋Bootstrap 架構開發的所有常用基礎知識及開發工具。無論是初學者，還

是有一定基礎的Web 開發從業人員，透過閱讀本書都將獲益匪淺。

注重實作，快速上手

本書不以枯燥乏味的理論知識作為說明的重點，而是從實作出發，將必要的理論知識

和大量的開發實例相結合，並將筆者多年的實際專案開發經驗貫穿於全書的說明中，

讓讀者可以在較短的時間內了解和掌握所學的知識。

內容深入、專業

本書直擊要害，先從標準文件入手，深入淺出地說明了Web 技術的原理；然後結合行動

Web 開發的相關工具，介紹了實際的行動Web 開發，讓讀者學有所用。

實例豐富，隨學隨用

本書提供了大量來自真實Web 開發專案的實例，並列出了豐富的程式碼及註釋。讀者透過研讀這些實例，可以了解實際開發中撰寫程式的想法和技巧，而且還可以將這些程式直接重複使用，以加強自己的開發效率。

本書內容

第一篇Bootstrap 基礎（第1 ∼ 2 章）：包含Bootstrap 架構的基礎知識和開發入門等內容。

第二篇Bootstrap 架構（第3 ∼ 12 章）：主要介紹Bootstrap 架構的腳手架、樣式設計、元件設計、外掛程式設計與多媒體設計等相關的內容。

第三篇Bootstrap 實戰（第13 ∼ 15 章）：詳細說明使用Bootstrap 架構開發Web 應用與行動應用的實戰方法，包含多個Web應用與行動應用的案例。

程式下載

程式下載網址為本公司官網http://www.topteam.cc/，請搜尋本書並點擊相關連結下載。

如果對本書內容問題，請聯繫電子郵件booksaga@163.com，郵件主題為“Bootstrap 程式”。

本書讀者

需要全面學習行動應用程式開發技術的人員

Bootstrap 初學者

Web 前端開發工程師、行動應用程式開發人員

瀏覽器開發人員大專院校學生或相關教育訓練班的學員

前 言

Bootstrap 是由Twitter 公司推出的一款前端開發架構，在目前的Web 和行動Web應用設計領域中非常受歡迎。基於Bootstrap 架構可以實現前端UI設計與後台業務邏輯設計的協作開發，可以完美地實現回應式版面配置介面，可以無縫轉換如PC、平板和手機等多種裝置終端，可以說Bootstrap 是所有前端開發架構中的集大成者。

關於Bootstrap 架構開發的圖書不少，但真正從實際應用出發，透過實際案例來指導讀者加強應用程式開發水準的書卻不多。本書以實戰為主旨，透過大量的程式實例與專案實例，讓讀者全面、深入、透徹地了解Bootstrap 架構開...

01 Bootstrap 從何而來
1.1 初識Bootstrap
1.2 什麼是響應式設計
1.3 響應式設計四大原則
1.4 Bootstrap 設計目標
1.5 本章小結

02 Bootstrap 開發環境
2.1 Bootstrap 開發環境概述
2.2 呼叫Bootstrap 樣式
2.3 呼叫Bootstrap 元件
2.4 呼叫Bootstrap JS 特效
2.5 實戰：一個Bootstrap 實現的響應式頁面
2.6 本章小結

03 Bootstrap 腳手架
3.1 Bootstrap 全域樣式
3.2 網格系統
3.3 頁面設定
3.4 響應式設計
3.5 本章小結

04 Bootstrap 樣式設計
4.1 Bootstrap 排版
4.2 Bootstrap 表格
4.3 Bootstrap 按鈕
4.4 Bootstrap 圖片
4.5 本章小結

05 Bootstrap 元件設計
5.1 Bootstrap 下拉式功能表
5.2 Bootstrap 按鈕組
5.3 Bootstrap 按鈕式下拉式功能表
5.4 Bootstrap 導覽
5.5 Bootstrap 導覽列
5.6 Bootstrap 分頁
5.7 Bootstrap 標籤與徽章
5.8 Bootstrap 進度指示器
5.9 Glyphicons 字型圖示
5.10 本章小結

06 Bootstrap 外掛程式設計
6.1 Bootstrap 外掛程式概述
6.2 Bootstrap 模態對話方塊
6.3 Bootstrap 下拉式功能表（進階版）
6.4 Bootstrap 捲動監聽
6.5 Bootstrap 可切換式標籤頁
6.6 Bootstrap 提示框
6.7 Bootstrap 按鈕
6.8 Bootstrap 折疊
6.9 Bootstrap 幻燈
6.10 本章小結

07 Bootstrap 響應式多媒體
7.1 Bootstrap 圖示的響應式
7.2 Bootstrap 影像的響應式
7.3 Bootstrap 視訊的響應式
7.4 本章小結

08 Bootstrap 扁平化風格頁面
8.1 扁平化設計概述
8.2 頁眉設計
8.3 左側導覽設計
8.4 頁面主體設計
8.5 頁尾設計
8.6 本章小結

09 Bootstrap 圖片幻燈頁面
9.1 圖片幻燈風格頁面設計概述
9.2 頁眉設計
9.3 頁面主體設計
9.4 本章小結

10 Bootstrap 風格按鈕
10.1 風格按鈕設計概述
10.2 形狀與尺寸風格按鈕
10.3 邊框風格按鈕
10.4 下拉式功能表風格按鈕
10.5 按鈕組風格
10.6 本章小結

11 Bootstrap 響應式表格設計
11.1 表格設計概述
11.2 Bootstrap 基本表格
11.3 Bootstrap 陣列表格
11.4 Bootstrap Ajax 表格
11.5 本章小結

12 Bootstrap 響應式圖表設計
12.1 圖表設計概述
12.2 柱狀圖圖表
12.3 聚合線圖圖表
12.4 餅狀圖圖表
12.5 本章小結

13 jQuery UI Bootstrap 工具
13.1 jQuery UI Bootstrap 工具概述
13.2 按鈕（Button）
13.3 折疊面板（Accordion）
13.4 對話方塊（Dialog）
13.5 標籤頁（Tabs）
13.6 Overlay 與Shadow.
13.7 Highlight 與Error
13.8 日期選擇器（Datepicker）
13.9 滑桿（Slider）
13.10 自動完成（Autocomplete）
13.11 下拉式功能表（Menu）
13.12 提示訊息（Tooltip）
13.13 微調按鈕（Spinner）
13.14 本章小結

14 jQuery Mobile 架構與Bootstrap 主題風格
14.1 jQuery Mobile+Bootstrap 概述
14.2 首頁設計
14.3 按鈕設計
14.4 列表設計
14.5 導覽設計
14.6 表單設計
14.7 本章小結

15 實戰：應用Bootstrap 實現一個貼吧管理頁面
15.1 專案設計概述
15.2 頁面設定設計
15.3 頁面導覽列設計
15.4 左側邊欄設計
15.5 頁面主體設計
15.6 本章小結
附錄　CSS 選擇器速覽

01 Bootstrap 從何而來
1.1 初識Bootstrap
1.2 什麼是響應式設計
1.3 響應式設計四大原則
1.4 Bootstrap 設計目標
1.5 本章小結

02 Bootstrap 開發環境
2.1 Bootstrap 開發環境概述
2.2 呼叫Bootstrap 樣式
2.3 呼叫Bootstrap 元件
2.4 呼叫Bootstrap JS 特效
2.5 實戰：一個Bootstrap 實現的響應式頁面
2.6 本章小結

03 Bootstrap 腳手架
3.1 Bootstrap 全域樣式
3.2 網格系統
3.3 頁面設定
3.4 響應式設計
3.5 本章小結

04 Bootstrap 樣式設計
4.1 Bootstrap 排版
4.2 Bootstrap 表格
4....