Twitter Bootstrap 有點像以前曾經介紹過的 Blueprint 和 960 Grid System 這類的 CSS Framework。Twitter Bootstrap 一樣是能夠幫助你快速設置好網頁佈局的一個 Framework,那這個 Twitter Bootstrap 和前 2 者有什麼分別呢?
介面對一個網站是極奇重要的,就算你背後的程式有多強多勁,但沒有一個好的介面也是會把用戶趕走的。Twitter Bootstrap 不單只幫助你設置網頁佈局,亦提供了一體化的介面及一些常用的網頁元件,這些元件都經過精心設計,就算不懂任何任何圖像軟件也能砌出一個美觀的網站(我一直最對網站設計最感頭痛的就是整體一致化)。
CSS 元件方面有:
- 網頁佈局的 Grid (有 Fixed layout 和 Fluid layout)
- 常用標題大小設置 Typography
- 列舉 List
- 提示貼紙 Inline labels
- 媒體框架 Media grid
- Table
- Input box
- Select box
- 按鈕 Button
- 導航列 Navigation bar
- 標籤 Taps
- 顯示層級目錄的元件 Breadcrumbs
- 頁數工具 Pagination
- 提示 Alerts & Errors
除了 CSS 外元件外,Twitter Bootstrap 亦包括了一些 Javascript 元件:
- 對話框 Modals
- Tooltips
- Popovers
元件方面真的比其他 CSS Framework 多太多了,使用了 Twitter Bootstrap 都可以做出一個不太差的網站。
因為有些元件和我現有的 CSS 相衝,還是看示範比較好。
有興趣可到 http://twitter.github.com/bootstrap/ 玩玩看示範。
下載可到 https://github.com/twitter/bootstrap。
到目前為止最新穩定版本是 1.4。