[前端工具]好用易學的 Bootstrap - 簡單的成串class

這套 Twitter 出的 CSS framework 相信很多人都久仰大名，這陣子因為進行需要 RWD 的專案將它拿來把玩一下，整個驚為天人，來跟大家分享一下：

從官網下載或是用CDN掛上 bootstrap.min.css、bootstrap-theme.min.css和bootstrap.min.js後就可以開始使用，

用法非常簡單，常常只要按照想要的樣式把 class 串成一長串(所以才叫鞋帶吧 XD)，以按鈕作為例子：

原本長這樣: <button> </button>


給予指定類別: <button class="btn btn-danger btn-lg">button</button>


class 後面那一長串的意思依序是：

1. btn: 這個 button 要長得像我 bootstrap 風格的按鈕，就算是<a><input> 我也會讓它變成這副德性。
2. btn-danger: 危險的顏色就是要讓它紅紅的，顏色都幫你調好了啦。
3. btn-lg: lg 就是 large 看起來就會大大的。sm 的話呢？ 有看過格雷就知道的吧(誤)。

基本上的用法大概就是這樣，舉凡：grid、表格、導覽列、下拉選單、圖片輪播甚至icon都是把HTML排一排 class 設一設就可以收工， 不用自己設太多 css 就可以有一個質感不錯的畫面，而且還是響應式的網頁，不滿它的樣式的話也可以自己再去改css，無怪乎它會這麼火紅，真的是救了許多沒有設計天分的人們！

說到icon順便提一下，其設定也相當簡單，

<span class="glyphicon glyphicon-user"></span>

本來以為這icon是圖，但如果去看 css 的話只會看到以下這段，
.glyphicon-user:before {
  content: "\e008";
}

原來它是一種圖標字型，既然是字型想當然可以調整字體大小：
<span class="glyphicon glyphicon-user" style="font-size:72px"></span>

有夠簡單吧 ^^

w3cschool 和 bootstrap官網 還有更多的範例和介紹，有需要可以看範例邊改邊學，相信很快就可以做出一個很 bootstrap 風格的網站了(雖然好像有點氾濫了 XD)。

bootstrap 還有一個很好的地方，就是他的程式碼都是開放的，對 HTML5、CSS3、js 有興趣的人多研究研究可以從裡面學到很多。