Bootstrap 是什麼？
Bootstrap 是一個由 HTML、CSS 和 JavaScript 寫成的前端框架，核心的設計目標是達成RWD響應式與行動優先，也就是讓你的網站排版可以自動適應螢幕大小。它預先做好一套網站的基礎建設，讓你能在框架的基礎上進行開發，不需要再去煩惱瑣碎的設定。
Bootstrap 的特性
Bootstrap 的特色是讓你不寫 CSS，只需要配置恰當的 HTML 架構並加上幾個 Bootstrap class，這種高效讓大家對他愛不釋手。
其中包含著以下的特點：
- 包含許多事先做好的組件，像是常見的按紐、導覽列以及互動視窗等，都可以藉由指定的簡短語法完成許多複雜的功能與樣式。
- 提供完整的 css grid system 使你可以輕鬆打造響應式的 layout。
- 提供高度的客製化彈性並有著良好的瀏覽器支援度。
Bootstrap 做好了一整套可重覆使用的元件樣式
- Bootstrap 聲譽良好，在開源 (open-source) 業界佔有優勢，並且已經完善地測試、維護和紀錄過，可放心使用。
- Bootstrap 本身有非常完善的教學文件，因此「學習如何使用 Bootstrap」幾乎就是弄清楚要怎麼查找 Bootstrap 的官方網站。
另外，由於 Bootstrap 提供了很多現成的元件樣式，你甚至可以把 Bootstrap 的官方文件當成 CSS 範例書，參考它是怎麼架構 HTML 和 CSS，以及如何命名 CSS class 等等。
這篇文章我們會介紹怎麼把 Bootstrap 框架整合到你的網站裡，接下來會著重介紹使用 Bootstrap 的官方文件。
Bootstrap 入門：從官方網站安裝
Bootstrap 的官方網站位於 https://getbootstrap.com/，官網提供了非常完整的資料。本文撰寫時，最新釋出的版本為 4.1.3 版，因此文中會使用第 4 版的 Bootstrap。若你學習到這裡時，已經釋出了更新版本，也請不用擔心，只要上手其中一個版本就能夠很快地轉移，因此我會建議你先使用與本文相同的版本，等到熟門熟路以後再自行升級。
導入 Bootstrap
Bootstrap 由 HTML、CSS 和 JavaScript 寫成，因此導入 Bootstrap 的方式和平常引入 CSS 和 JavaScript 檔案的方式一樣，下載檔案之後，將其引入到 HTML 檔案裡。
在官網的 Getting Started 頁面有介紹各種導入方式，以下我們介紹在JavaScript前端完整技能課程中，你可能會用到的作法：
- 專案直接連向 BootstrapCDN 的遠端內容
- 下載 Bootstrap 編譯檔後引入專案
- 在 CodePen 專案設定 Bootstrap
BootstrapCDN
CDN 是 Content Delivery Networks 的縮寫，譯為「內容傳遞網路」，簡單來說，就是利用 CDN 技術把內容放在伺服器上，開放給任何人快速存取。當然，你需要連上網路，才能使用 CDN 的內容。
BootstrapCDN 是把 Bootstrap 框架導入專案中最簡單又最快速的方式，請你到 Getting Started 頁面複製寫好的 HTML 標籤內容：
以下是引入專案的方式：
- 請將 CSS 的 <link> 標籤放在 <head> 裡，請記得瀏覽器是由上而下載入檔案，後面載入的會覆蓋掉前請載入的，如果 Bootstrap 和你自己的 CSS 發生衝突，應該要以你的為主，所以你的檔案要放在 Bootstrap 的後面。</head>
- JavaScript 會用到 jQuery、Popper.js、和 Bootstrap 的 JavaScript 函式庫，因此共有 3 支檔案。請依序將這些檔案放在 之前，同理，如果你有另外寫自己的 JavaScript 檔案，應該放在它們之後。
下載編譯檔
你也在這裡下載編輯過的 Bootstrap 檔案。之後再把檔案放進專案目錄裡，這樣一來不需要使用網路。
引入的方式和 CDN 一樣，要引入 CSS 、jQuery、Popper.js、JavaScript，只是把 CSS 和 JavaScript 換成位在本地專案裡的 Bootstrap 檔案。
Bootstrap 文件使用方式
安裝好 Bootstrap 之後，接下來就是在需要的時候，到官方文件上去尋找現成的元素，通常做法是把文件上的 HTML 複製到專案再修改。
Bootstrap 可能是世界上最直覺使用的 framework 了
也因為 Bootstrap 的使用方法是「翻找文件、複製貼上」，所以需要稍微熟悉文件裡有哪些項目。這份文件包羅萬象，我們建議你可以先快速瀏覽以下幾個頁面：
內容 (Content)
入口：https://getbootstrap.com/docs/4.1/content/
Content 介紹了 HTML 的預設樣式，例如字體大小、圖片、表格的處理。
例如在 Typography，你可以找到標題樣式：
Bootstrap 已經預先寫好了 CSS class，只要把 class 加到 <p> 元素，</p><p> 就會產生和 </p><h1> 元素一樣的樣式。</h1>
組件 (Components)
入口： https://getbootstrap.com/docs/4.1/components/
Component 是 Bootstrap 的核心所在，他把現代網頁常用的元件如導覽列、下拉選單、警告訊息、按鈕都事先做好，讓你可以複製貼上。
套用 Bootstrap 的現成 class，你也會更熟悉 class 命名的 best practice。
佈局 (Layout)
入口：https://getbootstrap.com/docs/4.1/layout/
Bootstrap Grid 系統
如果你對RWD已經有所認識，運用Bootstrap Grid系統可以讓設計網站原型（prototyping）快速有效率。Bootstrap 的網格系統允許你通過預先定義的列（columns）和行（rows）來創建響應式網頁布局。
JavaScript 插件
Bootstrap 還包含了多個自定義的 jQuery 插件。例如，模態窗口（Modal）插件可用於顯示彈出窗口。
自定義和擴展
雖然Bootstrap提供了許多現成的樣式和功能，但你也可以通過添加自定義CSS或修改Bootstrap的Sass源文件來進行擴展和個性化。
如何使用Bootstrap來創建一個簡單的網頁
步驟1：設置環境
首先，你需要在你的網頁中引入Bootstrap。最簡單的方法是使用CDN：
<!DOCTYPE html> <html> <head> <title>Bootstrap 教學案例</title> <!-- 引入Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <!-- 你的內容將在這裡 --> <!-- 引入Bootstrap JavaScript --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>
步驟2：使用網格系統創建佈局
Bootstrap使用一個12列的網格系統來創建響應式佈局。讓我們創建一個簡單的三欄佈局：
<div class="container"> <div class="row"> <div class="col-md-4">左側內容</div> <div class="col-md-4">中間內容</div> <div class="col-md-4">右側內容</div> </div> </div>
步驟3：添加導航欄
接下來，我們添加一個簡單的導航欄在頁面頂部：
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">我的網站</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">首頁 <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">功能</a> </li> <li class="nav-item"> <a class="nav-link" href="#">價格</a> </li> </ul> </div> </nav>
步驟4：添加按鈕和表單元素
在中間內容區域添加一個按鈕和一個簡單的表單：
<div class="col-md-4"> <button type="button" class="btn btn-primary">一個按鈕</button> <form> <div class="form-group"> <label for="email">電子郵件地址：</label> <input type="email" class="form-control" id="email" placeholder="輸入郵件"> </div> <div class="form-group"> <label for="pwd">密碼：</label> <input type="password" class="form-control" id="pwd" placeholder="輸入密碼"> </div> <button type="submit" class="btn btn-success">提交</button> </form> </div>
步驟5：添加響應式特性
使用Bootstrap的響應式工具類來優化你的佈局。例如，你可以讓左側和右側的欄在小屏幕上堆疊起來：
<div class="col-md-4 col-sm-12">左側內容</div> <div class="col-md-4 col-sm-12">中間內容</div> <div class="col-md-4 col-sm-12">右側內容</div>
Bootstrap 5 的重要更新
Bootstrap 5 可說是做了相當大量且有趣的改動，當然會需要一些時間來熟悉這些新功能，但這些改動都相當的正向，讓 Bootstrap 變得更有潛力許多。
1. 移除 jquery 的使用
2. 停止對於 IE10、IE11 瀏覽器的支援
3. 新增 CSS Custom Properties
4. 新增 Bootstrap Icon Library
5. 新增 Responsive Font Sizes
6. 新增／移除的 Class
7. 新增 Utilities API
這次改版還有一個值得注意的點便是：在語法上幾乎沒有與舊有的語法衝突，僅有少數 class 被刪除，這表示在舊有專案升級 Bootstrap 5 的成本相當低，同時可以給使用者帶來更好的體驗，更詳細的可以看這篇：
Bootstrap 5 來了，我該升級嗎？一起了解幾個核心改動
小結
Bootstrap 知名的原因是它的RWD響應式佈局框架。即使你想要鍛練自己手刻 CSS 的技術，我們仍然會建議你先使用一陣子 Bootstrap 直到你熟悉他，因為 Bootstrap 撰寫 CSS 的方式也很值得你學習，在導入 Bootstrap 之後，你可以隨時打開 DevTools 來查看 Bootstrap 的原始碼，這會幫助你觀摩很多專業的 CSS 設定細節。
