What is Bootstrap

『你ㄇ的，Bootstrap 到底是什麼東西啦！』

前言

如果有做過網站相關的工程師或是設計師，應該都知道 Bootstrap 是什麼東西，有人可能已經在做客製化 Bootstrap，更甚者應該已經基於 Bootstrap 開發出自己的框架出來了，所以我一直覺得這不需要寫一篇文來說明。

但這幾天跟朋友聊天才發現，其實平常沒有接觸這方面的人都搞不太懂，究竟 Bootstrap 是什麼？它能做什麼？為什麼這麼多人在討論以及使用它？

雖然人家都說『給他魚，不如給他魚竿教他釣魚』，但我個人比較喜歡講魚的故事，那我們就從網站的基本 HTML, CSS, Javascript 開始講起吧。

三位一體

要講 Bootstrap 之前，我們要先來理解網站的成分。

網站基本上是三個檔案互相作用，也就是基礎架構的 HTML 、美術指導的 CSS、以及動作指導 Javascript，我們俗稱三位一體。

HTML,CSS,Javascript

這三位的放在一起（後兩者是可有可無，不過通常應該都有三位），我們先將 HTML 寫好之後，在寫 CSS，最後加上 Javascript。

就如同這樣

Pikachu

我們可以看到原本的 HTML 就是網站主要架構，套上 CSS 之後樣子就出來了，而 Javascript 就是最後讓它動起來的原因。

所以 Bootstrap 是什麼

隨著網站上面的元件越來越多，重複性的工作也越來越多，每次要寫表單輸入時都要拉一次輸入框、提示字、確認鍵、還有錯誤訊息要紅色的！工程師這種極端懶惰的生物就會開始想著，『為什麼我們不把這些通用元件會使用到的元素都先寫好呢？』

我們打開 Bootstrap 的官方網頁，首頁的說明就有提到

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

好的，從這段描述中我們可以知道 Bootstrap 似乎幫你寫好了很多東西，讓你快速的寫出你要的畫面。

在上一個段落我們有提到 HTML, CSS, Javascript 的關係，而 Bootstrap 其實就是一大包寫好好的 CSS, Javascript，將 Bootstrap 整包引入你的 HTML 文件後，你的 HTML 內容（class 或 id）只要照著打，Bootstrap 就會賦予你的 HTML 它定義的樣式，也許不到很漂亮，但基本上有個順眼的基本雛型，就是某些測試網站會出現的樣式。

Button

如果你有玩過一些有『解鎖特殊服裝』或是『角色特殊 skin 』功能的遊戲，其實引入 Bootstrap 就有點像是解鎖（載入）特殊服裝，之後只要你的角色設定正確，就可以直接以你指定的 skin 或是特殊服裝開始遊玩了。

為什麼 Bootstrap 如此熱門

當然，首要提的一定是它讓工程師省去了很多調整畫面的時間，使工程師能夠專注於功能實作，而不是將大部分的時間花在寬度應該要幾 px 或是這張圖為什麼沒有跟著變動寬度上面。

另外，Twitter 開發者 Mark Otto 說：

「我和幾個開發者一起設計建立一個新的內部使用的工具，然後我們發現有機會可以做更多的事兒。從那之後，我們發現我們設計的工具比別人設計的更強壯。幾個月之後，我們做出了 Bootstrap 的原型，在公司內分享文件、設計和資源。」

雖然每個人每間公司的產品不同，但如同他所指出，我認為引入 Bootstrap 是在開發團隊中定下了一套規範與雛形，減少工程師與設計師在初期快速開發時會遇到衝突或是人為疏失，讓團隊能夠更專注在各自專業上。

當然有好處自然也有壞處，如果你們的產品或網站已經十分成熟，導入 Bootstrap 並不是一個明智之舉，有時可能還會成為一個負擔，但這就不是本文要討論的範圍了。

順帶一提，Bootstrap 的熱門同時也造成網路上出現許多類似編排或是相同的元件，這邊有許多 Bootstrap 的基本樣式，你是不是看到某些網站的影子呢？

最後

其實會不會用 Bootstrap 其實不用太擔心，如果你是工程師，你可以嘗試使用來增加自己快速排版或是快速產出 prototype 的能力。如果你是設計師，也可以看一下他的文件來了解網站的整體設計架構，畢竟他也是經歷過許多年的更迭才變成如今成熟的模樣。

但如果你只是因為追求什麼 RWD 而準備為了網站加入 Bootstrap，要記得的是 Bootstrap 不只可以做 RWD（請參照 layout），要做到 RWD 也不止只有 Bootstrap，不要被限制了。

其實類似 Bootstarp 這樣的框架在網路上還有許多種，像是 sematic UI 或是 Foundation 都是相當出色的框架。如果你真的不喜歡與大家一樣，除了自己寫一份自定義樣式去覆蓋 Bootstrap 外，你有更多選擇。

大概是這樣，謝謝大家！