CHAPTER 1──入門

（介紹Bootstrap架構並教你如何設定環境）

取得Bootstrap

設置架構

建立我們的第一個Bootstrap 範例

你也可選擇使用CDN 設置

相關社群活動

Bootstrap 與網頁應用程式

瀏覽器相容性

總結



CHAPTER 2──建立堅實的骨架

（運用網格系統開始製作登陸頁面範例）

了解網格系統

建立骨架

我們需要一些樣式！

表格的處理

輕鬆搞定！

一些觀念的補充說明

總結



CHAPTER 3──是的，你應該以手機為優先

（談論手機優先式開發及其做法）

讓它更棒、更好

Bootstrap 與手機優先式設計

如何在瀏覽器中替不同的視圖除錯

整理亂掉的部份

為各種不同的裝置建立登陸頁面

總結



CHAPTER 4──套用Bootstrap 樣式

（使用Bootstrap的主題和一些Bootstrap元素）

改變網格版面

製作表單

圖片

輔助類別

總結



CHAPTER 5──讓它更花俏點

（是在為登陸頁面範例添加更多Bootstrap元素）

使用Bootstrap 的圖示

注意你的導覽列

把它拉下來

建立輸入群組

準備迎接flexbox！

總結



CHAPTER 6──你會做網頁App 嗎？

（是在挑戰用Bootstrap製作網頁應用程式）

了解網頁應用程式

加入導覽列

再次建立網格

嘗試使用卡片元件

實作主要內容

建立路徑導覽列

完成右側內容

總結



CHAPTER 7──你當然能夠建立出網頁App！

（只用Bootstrap元素和元件製作網頁應用程式頁面）

網頁App 中的通知元件

等待進度列

建立設定頁面

總結



CHAPTER 8──運用JavaScript

（在網頁應用程式範例中使用一些JavaScript外掛）

了解JavaScript外掛

超讚的Bootstrap模態視窗

製作提示用的工具

把它彈出來

製作能固定不動的附加導覽元件

完成整個網頁應用程式

總結



CHAPTER 9──進入進階模式

（運用進階元件並整合外掛來製作主控台範例）

主要計畫

運用了flexbox 的導覽列

填入主要的流動式內容

填入主要內容

上層載入動畫

為手機修正下拉選單鈕

總結



CHAPTER 10──讓元件活起來

（為網頁進行最後的自訂處理，並完成主控台範例）

建立主要卡片

修正手機視圖的顯示

學習更多的進階外掛

總結



CHAPTER 11──做出你的味道

（是本書最後的挑戰，你將自訂Bootstrap外掛程式並為此架構創作出新的外掛）

自訂Bootstrap 元件

Bootstrap 外掛的自訂處理

創建我們的Bootstrap 外掛

定義外掛的方法

創建額外的外掛方法

總結

前言



　　前端開發可分為兩個時代，Bootstrap出現前的時代和Bootstrap出現後的時代。就在2011年，這有史以來最棒的前端架構現身世上。而同年，架構的採納與運用量也大幅成長，幾乎涵蓋了所有市場範圍。



　　其原因就在於：例如光是要建立一個簡單、漂亮的按鈕，你就必須在原始碼中宣告很多類別和樣式。這正是Bootstrap的創作者－來自Twitter的一些開發人員－當初所預見的。而此架構可說是快節奏網頁前端開發的一個典範變革。



　　Bootstrap 有三大優點。一是在樣式表方面，它包含一些基本的CSS，針對幾乎所有的HTML 元素提供漂亮且一致的外觀。



　　二是在元件方面，其元件只需以拷貝、貼上原始碼的方式就能重複利用。最後則是在JavaScript 外掛方面，它包含了一些別處找不到的常見額外元素。



　　在本書中，你將藉由範例的協助來深入了解Bootstrap 前端架構，而這些範例分別說明了各元素與元件的正確用法。透過範例，你將更充分了解目前的狀況以及你想達到的目標。



　　隨著書中範例解說，你將能夠掌握此架構，並運用Bootstrap 開發出一些非常常見的應用實例，包括登陸頁面、網頁應用程式，以及每個網頁開發人員都想做的主控台網頁。在你的開發人員生涯中，你將面對無數多次這類網頁開發工作，而你將徹底發揮Bootstrap 的優勢，包括自訂元件、動畫、事件處理及外部程式庫整合等功能。



　　我們將從基礎著手，而之後更不怕真正去進一步掌握此架構。若你能夠自行完成書中的各個範例，我們保證你就有能力成為Bootstrap 大師。



　　這是第一本支援Bootstrap 第4 版的相關書籍，不過我們同時也支援第3 版，因此你將能應付各種狀況。