Bootstrap 4 做 RWD 超簡單 - 你的網頁框架從這裡入門
我從網路剛普及的年代開始做網頁，那時候的 HTML 就是個無聊、靜態、只能閱讀的畫面；後來有了 CSS，網頁樣貌有了一大進展，但說真的要刻一個版面還是很辛苦。短短幾年，現在開發環境已經截然不同，網路上各種前、後端框架可以使用，加速了網頁與應用程式的開發。這篇文章要談的 Bootstrap 就是其中一個廣泛被應用的前端框架。
簡單來說，前端框架就是個把常用的樣式、規範寫好，你只要套用就可以了！Bootstrap 是針對行動優先的網頁或應用程式所開發，所以拿來做 RWD（響應式設計）再適合不過了。
這篇文章適合已經懂 HTML、CSS 的網頁設計或前端初學者。可能還不完全會撰寫 RWD 程式碼，這篇文章會透過 Bootstrap 框架，一一帶你做出 RWD 網頁。文章概要
Bootstrap 4 簡介
這篇文章要談的是目前 Bootstrap 的最新版本：Bootstrap 4，它是目前最受歡迎的開源前端框架之一，也不斷地有更新釋出，是滿適合初步接觸 RWD 設計的設計師或工程師。
Bootstrap 的官方網站，本身就是一個教學文件，可以找到各類相關資料；台灣的六角學院也翻譯過 Bootstrap 4 中文版，但目前英文官網已經更新到 4.4 了，中文網站只到 4.2。
Bootstrap 官網本身有相當詳細的文件可參考，從如何導入，到排版、內容、通用類別，道內建一些好用的元件等，都可以在 Bootstrap 中找到範例跟作法。
在自己的網頁中導入 Bootstrap 4
進入 Bootstrap 的官方網站後，點選首頁的 Get started 就可以看到導入的方法。
Quick start 段落中有提供 CSS 及 JS 的 CDN 和程式碼，最簡單的導入方式，就是將這幾行程式碼複製，並貼在網頁正確的位置。
CSS 程式碼需要貼在 <head> 中，JS 程式碼則建議貼在 </body> 之前。
Bootstrap 4 本身有採用 jQuery 3.4 技術，若你的網頁本身已經用到 jQuery，請注意不要重複導入，另外 Bootstrap 官網提供的 jQuery 版本是 slim，如果你需要用到 jQuery 的完整功能，可以逕自修改為完整版本。
導入的網頁中，也有提供你文件必須是 HTML 5 版本，還要記得寫上響應式的 meta tag。
如果你想要自行開發或修改 Bootstrap 4 的框架，也可以進入下載 Bootstrap 4 的網頁下載所有程式碼。
導入之後，就可以嘗試在網頁中的各元素，加上「類別」（class），來看看是否有產生變化了！例如使用深色的背景色，則在元素中加入 bg-dark 的 class；使用紅色文字，則在元素中加入 text-danger 的 class。想在 HTML 原件上使用各背景色、按鈕樣式、框線甚至陰影…，都不用再自己寫 CSS了！
Bootstrap 4 的 RWD 邏輯
在 Bootstrap 官網的 Grid 網頁，可以看到詳細的響應式斷點，媒體寬度分別是 Extra small (<576px)、Small (≥576px)、Medium (≥768px)、Large (≥992px) 及 Extra large (≥1200px)。
簡單用常見的裝置來解釋這些響應式斷點，可以這樣比喻：
Extra small — 6吋以下的手機
Small — 6吋以上的手機
Medium — iPad 直著看
Large — iPad 橫著看 / iPad pro 直著看
Extra large — 電腦螢幕
*本處僅作粗略概論，實際解析度以各裝置為準。
除了各斷點的媒體寬度以外，各斷點代碼也是在撰寫 Bootstrap 時必須要時時記在心中的。Bootstrap 是以行動為優先的框架，所以 Extra small 沒有斷點代碼，其餘斷點代碼如下：
Small — sm
Medium — md
Large — lg
Extra large — xl
Bootstrap 所預設的流變格線數為 12，在 Bootstrap 中撰寫網頁欄位時，可以在 <div> 中加入名為 col-(斷點代碼)-(格數) 的 class 來進行，例如媒體寬度在 ≥768px 時，格數要佔 3 格時則寫 col-md-3 ，算是非常直覺、易懂的。
特別說明一點，如果你想要讓欄位的寬度平均分配，則不需要寫格數，Bootstrap 就會幫你平均分配各欄寬度了。例如： col-sm 。
更詳細的 Bootstrap 4 流變格線應用方式請參閱：
最新版（2020/6）的 Bootstrap 5 介紹文章：
謝謝你耐心閱讀我的文章
你可以在堯舜設計網站看到我們的案例及作品，也可以歡迎追蹤下列媒體獲得更多資訊：
堯舜設計臉書粉絲頁
堯舜設計 Instagram：各種簡單前端與網路行銷知識。
堯舜設計 YouTube 頻道：設計與網路的法律常識。
