認識與使用 Bootstrap 4

1.關於 Bootstrap 4

Bootstrap 是基於 HTML、CSS、JavaScript，用於快速開發 Web 應用程序和網站的前端使用者開發介面，提供頁面編排、表單、按鈕、導覽及其他各種元件及 JavaScript 擴充套件，目的是讓使用者在建立動態網頁和 Web 應用程式開發時能更加容易。

Bootstrap 原名Twitter Blueprint，由Twitter 的Mark Otto和Jacob Thornton編寫，原意是製作一套可方便保持一致性的工具和版型。之後，Twitter Blueprint更名為Bootstrap，在2011/8/19做為開源專案釋出。此後，專案繼續由Mark Otto、Jacob Thornton和一個核心開發小組維護。

在2012/1/31，釋出Bootstrap 2。此版本增加了12列網格布局和回應式元件，並對許多元件進行了修改。從2.0版本起，Bootstrap支援響應式網頁設計（RWD），頁面布局可根據顯示網頁的裝置（桌面、平板電腦、手機）來進行動態的調整。

Bootstrap 3於2013釋出，設計方針開始以行動裝置優先，並使用扁平化設計為主軸，並特別強調響應式網頁設計。2015/4/23，Mark Otto宣布正在開發Bootstrap 4，在經歷了多個版本的歷練，並修改了大量元件與加入許多新元素及功能後，Bootstrap 4 Beta最終於 2017年8月釋出。

(資料來源:維基百科)

2.使用 Bootstrap 4的準備

想要快速建構 Bootstrap 頁面，請先連上官網首頁（https://getBootstrap.com），然後按下【Get started】，開啟以下網頁後，即可看見相關的內容說明：

在Quick start中即有說明所需要的相關CSS與JS檔案位址。

請自行新增並開啟空白的 HTML5 頁面，即可使用 StackPath 免費提供的 BootstrapCDN。先將CSS樣式表 link 複製／貼上到網頁中，所有其他樣式表之前的 head 中，以便載入 Bootstrap 的CSS。

接著，加入 JavaScript。請在 /body 結尾標籤前，在頁面末尾放置以下的 script ，以便啟用。

最後，Bootstrap 的開發以行動裝置為優先，為了確保在全部裝置上都能正確支援顯示和觸控縮放，請將響應式中繼標籤記添加到 head 中。

也可以直接複製Starter template所提供的完整內容至你的空白HTML頁面上。

有興趣了解更多Bootstrap4製作響應式網頁的技巧，可參考筆者的最新著作: 【響應式網頁設計驚嘆號：Dreamweaver CC╳Bootstrap 4╳JavaScript 範例大全】

相關課程 / 優勢多媒體 - RWD響應式網頁設計