可下載範例檔案跟著操作,透過完整實例,按部就班學習
由淺入深實作Bootstrap,涵蓋CSS、HTML、JavaScript
一本書搞定基本登入頁面、RWD與行動網頁、網頁App與管理主控台、以及Bootstrap自訂外掛
不論是簡單的頁面還是複雜的頁面,透過Bootstrap架構就足以應付了!
基本網頁架構︱自適應式網頁(RWD)︱行動網頁︱外部程式庫整合︱網頁應用程式︱管理主控台︱自訂Bootstrap外掛程式
深入了解Bootstrap,精通前端架構更易上手
適合想快速進入前端網頁開發工作的你
初學者-學習基本功能,打造簡易網頁與RWD行動網頁
進階者-結合JavaScript與外掛,開發出類似於twitter的網頁App以及管理主控台App
最棒的前端架構Bootstrap,大幅節省原始碼Coding時間
包含基本CSS樣式表,維持HTML元素的美觀與一致性
元件只需以拷貝、貼上原始碼的方式就能重複利用
支援JavaScript與自訂外掛,無限擴充網頁應用程式功能
透過本書,你可以用Bootstrap開發出一些常見的應用實例,包括基本的登陸頁面、網頁應用程式,以及每個網頁開發人員都想開發的主控台網頁應用程式。
每單元都透過實際案例來教導,附有詳細的圖解與程式碼解說。學習如何充分運用Bootstrap的最佳潛能,包括元件自訂、事件處理,還有外部程式庫整合等。看完本書您便可以完整的製作出適合多螢幕檢視的網頁應用程式。
作者簡介:
Silvio Moreto
Silvio Moreto是一位具有超過7 年前端技術經驗的開發人員,已用Bootstrap架構製作了許多網站與網頁應用程式。不論是簡單的頁面還是複雜的頁面,他總是利用Bootstrap架構來處理。
此外Silvio也是bootstrap-select外掛的創作者,這是個非常受Bootstrap使用者歡迎的外掛,它可用來替換Bootstrap 按鈕下拉式選單的選取元素。Silvio認為原本的Bootstrap架構少了這樣的外掛,而此外掛對該架構的使用者來說肯定非常實用,於是他便製作了這個外掛程式,並由整個使用者社群一起幫他維護。
除此之外,他也十分活躍於開放原始碼社群,經常積極參與一些和開放原始碼有關的資源庫及議題討論社群,像是Stack Overflow等。另外他還在全球Django Dash 2013挑戰賽中獲得了第3 名。
作者序
前言
前端開發可分為兩個時代,Bootstrap出現前的時代和Bootstrap出現後的時代。就在2011年,這有史以來最棒的前端架構現身世上。而同年,架構的採納與運用量也大幅成長,幾乎涵蓋了所有市場範圍。
其原因就在於:例如光是要建立一個簡單、漂亮的按鈕,你就必須在原始碼中宣告很多類別和樣式。這正是Bootstrap的創作者-來自Twitter的一些開發人員-當初所預見的。而此架構可說是快節奏網頁前端開發的一個典範變革。
Bootstrap 有三大優點。一是在樣式表方面,它包含一些基本的CSS,針對幾乎所有的HTML 元素提供漂亮且一致的外觀。
二是在元件方面,其元件只需以拷貝、貼上原始碼的方式就能重複利用。最後則是在JavaScript 外掛方面,它包含了一些別處找不到的常見額外元素。
在本書中,你將藉由範例的協助來深入了解Bootstrap 前端架構,而這些範例分別說明了各元素與元件的正確用法。透過範例,你將更充分了解目前的狀況以及你想達到的目標。
隨著書中範例解說,你將能夠掌握此架構,並運用Bootstrap 開發出一些非常常見的應用實例,包括登陸頁面、網頁應用程式,以及每個網頁開發人員都想做的主控台網頁。在你的開發人員生涯中,你將面對無數多次這類網頁開發工作,而你將徹底發揮Bootstrap 的優勢,包括自訂元件、動畫、事件處理及外部程式庫整合等功能。
我們將從基礎著手,而之後更不怕真正去進一步掌握此架構。若你能夠自行完成書中的各個範例,我們保證你就有能力成為Bootstrap 大師。
這是第一本支援Bootstrap 第4 版的相關書籍,不過我們同時也支援第3 版,因此你將能應付各種狀況。
前言
前端開發可分為兩個時代,Bootstrap出現前的時代和Bootstrap出現後的時代。就在2011年,這有史以來最棒的前端架構現身世上。而同年,架構的採納與運用量也大幅成長,幾乎涵蓋了所有市場範圍。
其原因就在於:例如光是要建立一個簡單、漂亮的按鈕,你就必須在原始碼中宣告很多類別和樣式。這正是Bootstrap的創作者-來自Twitter的一些開發人員-當初所預見的。而此架構可說是快節奏網頁前端開發的一個典範變革。
Bootstrap 有三大優點。一是在樣式表方面,它包含一些基本的CSS,針對幾乎所有的HTML 元素提供漂亮且一致的外觀。
二...
目錄
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 外掛
定義外掛的方法
創建額外的外掛方法
總結
CHAPTER 1──入門
(介紹Bootstrap架構並教你如何設定環境)
取得Bootstrap
設置架構
建立我們的第一個Bootstrap 範例
你也可選擇使用CDN 設置
相關社群活動
Bootstrap 與網頁應用程式
瀏覽器相容性
總結
CHAPTER 2──建立堅實的骨架
(運用網格系統開始製作登陸頁面範例)
了解網格系統
建立骨架
我們需要一些樣式!
表格的處理
輕鬆搞定!
一些觀念的補充說明
總結
CHAPTER 3──是的,你應該以手機為優先
(談論手機優先式開發及其做法)
讓它更棒、更好
Bootstrap 與手機優先式設計
如何在瀏覽器中替...