Bootstrap 3 & 4 速查表(cheat sheet)﹍中英文版整理

jQuery 這套框架(framework)的誕生，是為了讓工程師寫更少的 Javascript、做更多事。同樣的，Bootstrap 的誕生，可以讓前端工程師處理版面 CSS 時節省許多時間，能專注在更重要的主題上。

Bootstrap 把網頁設計常用的元件，例如按鈕、表單、表格等等，都打包成一組組的 class 名稱，直接呼叫就能產生不錯的樣式、版面。

但我們很難記住所有的 class 名稱，因此有個便利的線上速查表是非常必須的，就算買本 Bootstrap 書來翻，速度都還嫌太慢。在網路時代 "搜尋" 才是王道，使用實體英文字典的年代已經過去了。

最近使用 Bootstrap 的頻率挺高，因此整理了這篇含多種用途的速查表，中英文都有，同時也會說明適合使用的族群、或場合。

一、Bootstrap 3 & 4 英文版

首先介紹英文網站，如果閱讀英文 ok 的話，查閱 Bootstrap 的效率最好、最為推薦。


1. 最佳速查表

• 唯一首選：Bootstrap 4 Cheat Sheet

這個網站設計得太棒了，因此詳細說明所有操作的方式。雖然網站名稱註明了 "Bootstrap 4"，但實際上有選項可以只查詢 Bootstrap 3，因此不必擔心版本的問題。

• 這個網站很貼心，已經將 class 名稱依照不同功能分類
• 進入網站後，預設會展開所有分類群組
• 如上圖，Buttons 代表所有「按鈕」相關的 class
• Forms 代表所有「表單」相關的 class
• Tables 代表所有「表格」相關的 class

• 隨意點擊一個 class 名稱，例如 "btn-primary" 這樣的按鈕，會出現上圖畫面
• 「Code snippet」區塊會說明如何使用語法
• 「Preview」區塊會展示語法在螢幕上的效果，例如上圖的藍色按鈕，真的一目了然
• 同時 class 名稱右下角會出現兩個圖示，供複製字串之用
• 按鈕 A 可複製 class 名稱字串
• 按鈕 B 可複製「Code snippet」區塊的語法

為了方便尋找分類群組，可按上圖紅框的「Collapse all」，將分類群組收合，看分類名稱就比較方便了。




若網站安裝的是 Bootstrap 3，卻誤用了 Bootstrap 4 的 class，可是沒有作用的。

那麼可按上圖紅框的「Highlight new in v4」，所有 V4 版本的 class 名稱會自動加上綠色背景，就不會用錯了。


2. 依字母排序

另一個英文網站，則是整理了所有 V3 class 名稱，並依字母排序：

• Bootstrap 3 All CSS Classes List and Cheat Sheet PDF

同時提供 PDF 檔下載，如果有這方面的用途可以參考。

二、Bootstrap 3 中文版

1. 官方說明書

• Bootstrap V3 英文官網教學：Bootstrap CSS

官網提供了所有 class 的使用教學、範例，不過全英文的內容很難啃得下去。

但官網內容有世界多國語言的翻譯版，版面的編排方式其實也適合拿來當速查表用。


2. 繁中版

• V3 繁體中文翻譯網站：https://kkbruce.tw/bs3/CSS

進入網站後，右邊有一排導航性質的分類項目名稱：

• 例如紅色底線的 "表格"、"表單"、"按鈕"，都是分類項目名稱
• 按下分類名稱後，頁面會跳到該分類的錨點位置，並展開分類的細項
• 點擊紅框內的細項名稱可再前往對應的錨點位置
• 以上的操作，也算是接近速查表的使用方式

同時因為翻譯了 Bootstrap 原文說明內容，這個網站也可以說是很好的 Bootstrap 學習教科書。

可惜操作上有這樣的缺點：

• 網站內容禁止複製，會彈出視窗告知，指定範圍的內容才能複製
• 但某些指定範圍的「copy」按鈕，按了並無作用
• 當大部分語法都不能複製時，對學習會造成很大的障礙

可能因為譯者穿插了一些註釋，為了保護自己的心血，所以出此下策，那麼也許可以針對註釋的區塊來做保護機制就好。

對於需要複製語法的讀者，可考慮使用另一個簡中版的網站，不會有防複製的機制。


3. 簡中版

• V3 簡體中文翻譯網站：http://v3.bootcss.com/css/

如果看得懂簡體字的話，那麼就可使用這個網站來學習 Bootstrap，因為內容、版面配置都是一模一樣的，直接翻譯英文官網內容。

速查表的操作方式，請參考繁中版的說明即可。

三、小結

• 對於已經熟悉 Bootstrap 的讀者，建議使用「一、Bootstrap 3 & 4 英文版」→「1. 最佳速查表」，可節省很多時間。
• 如果還不熟悉 Bootstrap，建議先從中文版翻譯網站學習概念、使用方法。基本概念都具備後，就可使用英文速查表了。

更多 CSS 技巧：

更多 Bootstrap 相關文章：