Fork me on GitHub

Programming Design Notes

助你快速開發網站的 Twitter Bootstrap

| Comments



Twitter Bootstrap 有點像以前曾經介紹過的 Blueprint960 Grid System 這類的 CSS FrameworkTwitter Bootstrap 一樣是能夠幫助你快速設置好網頁佈局的一個 Framework,那這個 Twitter Bootstrap 和前 2 者有什麼分別呢?

介面對一個網站是極奇重要的,就算你背後的程式有多強多勁,但沒有一個好的介面也是會把用戶趕走的。Twitter Bootstrap 不單只幫助你設置網頁佈局,亦提供了一體化的介面及一些常用的網頁元件,這些元件都經過精心設計,就算不懂任何任何圖像軟件也能砌出一個美觀的網站(我一直最對網站設計最感頭痛的就是整體一致化)。
CSS 元件方面有:
  1. 網頁佈局的 Grid (有 Fixed layoutFluid layout
  2. 常用標題大小設置 Typography
  3. 列舉 List
  4. 提示貼紙 Inline labels
  5. 媒體框架 Media grid
  6. Table
  7. Input box
  8. Select box
  9. 按鈕 Button
  10. 導航列 Navigation bar
  11. 標籤 Taps
  12. 顯示層級目錄的元件 Breadcrumbs
  13. 頁數工具 Pagination
  14. 提示 Alerts & Errors

除了 CSS 外元件外,Twitter Bootstrap 亦包括了一些 Javascript 元件:
  1. 對話框 Modals
  2. Tooltips
  3. Popovers

元件方面真的比其他 CSS Framework 多太多了,使用了 Twitter Bootstrap 都可以做出一個不太差的網站。

因為有些元件和我現有的 CSS 相衝,還是看示範比較好。

有興趣可到 http://twitter.github.com/bootstrap/ 玩玩看示範。
下載可到 https://github.com/twitter/bootstrap
到目前為止最新穩定版本是 1.4