什麼是 Bootstrap ？

Bootstrap 是一套前端 framwork，一開始是由 Twitter 的設計師 Mark Otto 和 Jacob Thornton 合作開發，並在 2011 年發表首個版本。如今，Bootstrap 已成為網站開發中廣為熟知的前端框架與開源項目之一。

Bootstrap 的目標是達到響應式設計與行動裝置優先，這句話是什麼意思呢？也就是希望網站的排版可以根據每個使用者裝置的螢幕大小不同去做調整。

使用後會發現 Bootstrap 有點像小時候玩樂高積木時的每一塊小積木，它已經預先設計一整套規範好、可重覆使用的樣式與元件，開發者只要像在看百貨公司的型錄一樣，找到想要的樣式或元件，直接使用就可以很快地完成切版以及簡單的特效。

再舉生活化的例子來說：

小明邀請暗戀已久的小美明天來家裡吃飯，為了令小美對自己有好感，小明特地跑去跟和藹可親的祖母要了一道百年祖傳且傳子不傳賢的咖哩飯食譜，沒想到，這道食譜中光是製作咖哩醬就要熬煮並不眠不休攪拌七七四十九個小時，估計是來不及明天準備好，小明為了省事以及快速方便，想到一個辦法，於是到全 X 超市買了一盒廠商已經調配並包裝好的咖哩塊，祈禱這盒咖哩塊搭配著自己一片真心切的紅蘿蔔與馬鈴薯，能夠順利感動到小美。
Bootstrap 提供的樣式，就相當於這盒事先調配並包裝好的咖哩塊，讓使用者在需要的時候可以快速使用，但也如同用咖哩塊煮出的咖哩飯，好處是一般來說有一定的水準保證，不至於太難吃，而且省時間；不過因為容易上手，很多人都會煮，所以口味可預料且大同小異，不如客製化的咖哩來的有特色。

使用 Bootstrap 的優點：

提高開發的效率：短時間開發出想要的效果，減少工程師開發上調整 UI 細節所需的時間
豐富的樣式與元件：Bootstrap 提供了詳細的文件。可以找到排版、導覽列、按鈕、表單、表格、導航、圖像輪播、jQuery 插件等教學文件。Bootstrap 的 CSS 樣式是使用 CSS 預處理器 Less 和 Sass 編譯，所以如果有需要，可從源頭的程式碼定製自己想要的樣式。
響應式設計以及網格系統：Bootstrap 的目標是達到響應式設計與行動裝置優先，讓網頁的排版在電腦、平板、手機等不同裝置，根據螢幕尺寸調整
新手較易上手：新手只要有基本的 HTML 及 CSS 的基本排版概念，就能開始使用 Bootstrap，也透過 Bootstrap 的原始碼，學習如何架構 HTML 和 CSS, 如何組織 CSS 與命名 CSS 的 class，觀摩專業的 CSS 設定細節。
一致性：在 Bootstrap 的規範下，能夠產出具有一致性風格的網頁畫面；同時，相同的規範，也確保了不同專案或同專案不同開發者，在程式碼上撰寫的一致性，方便維護與溝通。
支持資源豐富： Bootstrap 從 2001 年到現在已累積一定聲譽，在許多專案上被充分的使用和測試、維護和紀錄。且由於是開源專案，社群資源也滿豐富的，幾乎遇到的常見問題都可以找到相關地討論

使用 Bootstrap 的缺點：

太相似：流行且容易上手是 Bootstrap 的優點，但看多了 Bootstrap 做出来的網站，會覺得美的很像同一个模樣，就像草間彌生撞臉董至成

圖片來源
檔案太肥：對小專案來說 Bootstrap 檔案所佔的容量大，而且大部分的程式碼也許都用不到，會導致網站載入速度變慢，影響使用者體驗。
太依賴：只依賴 Bootstrap 框架，當專案複雜度增加，debug 難度有可能隨之增加，包括框架本身帶的 bug。
不夠語義化：class 命名不夠語義化，且有大量的縮寫
不夠彈性：遇到網站有大量的客製需求，需大規模地重新定製 CSS 樣式，使用 Bootstrap 的意義就變得不大。
瀏覽器不兼容：瀏覽器 IE6 以下的低版本不兼容

Bootstrap 的使用方法

1.直接連 BootstrapCDN or 下載 Bootstrap 的編譯檔到自己的電腦後引入
2.到官方文件尋找需要的元素，然後複製到自己 HTML 再進行修改

1.直接連 BootstrapCDN

到 Bootstrap 官方網站的 Getting Started
根據說明，複製 CSS 與 Javascript 的 link
CSS 的<link> 標籤放在 <head>標籤裡，記得將自己寫的 CSS 放在 Bootstrap 的 CSS 後面，以免被覆蓋。
JavaScript 的 jQuery、Popper.js、和 Bootstrap 這 3 支檔案的 link 放在</body>標籤之前。寫自己的 JavaScript 檔案，應該放在它們之後，以免被覆蓋。