Bootstrap & Jetstrap-快速構建你的網站

http://www.iteye.com/topic/1126947

原文地址：Bootstrap & Jetstrap-快速構建你的網站

Boostrap來自於Twitter，是一個基於html，css，javascript的時尚的、直觀的、強大的流行前端框架及交互組件集，可用於快速，簡單構建你的網站。

Bootstrap擁有以下特性：

由匠人建，爲匠人用

和您一樣，我們樂於創造出色的web應用，於是想幫助更多象我們一樣的匠人更爲高效快捷地構建產品。Bootstrap因此而生。

適應各種技術水平

Bootstrap適應不同技術水平的從業者，無論是設計師還是程序員，大牛還是菜鳥。既能用來開發簡單的小東西，也能構造更爲複雜的應用。

跨設備，跨瀏覽器

最初設想中的Bootstrap只支持現代瀏覽器，不過新版本已經能支持所有主流瀏覽器（甚至包括IE7）。從Bootstrap 2開始，提供對平板和智能手機的支持。

12列柵格佈局

柵格系統不是萬能的，不過在應用的核心層有一個穩定和靈活的柵格系統確實可以讓開發變得更簡單。可以選用內置的柵格或是自己手寫。

響應式設計

從Bootstrap 2開始，提供完整的響應式特性。所有的組件都能根據分辨率和設備靈活縮放，從而提供一致性的用戶體驗。

樣式化的文檔

與其他前端工具箱不同，Bootstrap優先設計了一個樣式化的使用指南，不僅用來介紹特性，更用以展示最佳實踐，應用以及代碼實例。

不斷完善的庫

儘管只有10kb(gzip壓縮後)，Bootstrap卻仍是最完備的前端工具箱之一，提供了幾十個全功能的隨時可用的組件。

定製的jquery插件

一個出色的組件設計豈能沒有易用易擴展的人機界面？Bootstrap爲此提供了定製的jQuery內置插件。

用LESS構建

當傳統的枯燥CSS寫法止步不前時，LESS橫空出世了。LESS中使用變量，嵌套，操作，混合編碼，花費很小成本卻讓書寫CSS更快更靈活。

html5

支持html5標籤和語法

css3

逐步改進組件達到最終效果

開源

全部託管於 GitHub.

Twitter製造

由經驗豐富的工程師和設計師奉獻

Bootstrap的使用：

使用Bootstrap開發網站非常簡單，你只需用它提供的組件及樣式即可開發出美觀、大方、交互性很強的網站，如：新浪微博jssdk官網，汽車標誌大全 等，開發教程非常簡單，去Bootstrap官網下載開發包，解壓至你的項目，引入其核心js和css文件，然後按其教程去做就可以了，這裏不再多講。

Jetstrap可視化工具：

如果你覺得按Bootstrap教程做並且寫代碼比較麻煩，那麼好吧，推薦一個可視化的在線構建 Bootstrap 的工具：jetstrap。jetstrap提供了一個可視化工具，它提供了一個設計面板，一個工具箱（內置多組組件），使用方法很簡單：

你只需將工具箱裏面的組件拖到設計面板中，點擊組件會出現一個組件設置框，裏面可以設置組件的id和class、文本等。雙擊組件，可以調整html內容及樣式等。如果設計完成，可以點擊右上角的預覽工具預覽，再次點擊可回到編輯狀態進行修改。而且可以在多種平臺下預覽效果。如下圖：

如果確認無誤後，還可以導出爲html文件，實爲便捷，如果還是不太清楚操作，請看下面視頻。

如果你感興趣，趕快去試試吧。

參考資料及網站：

Bootstrap官方網站：http://twitter.github.com/bootstrap/

Bootstrap中文站點：http://wrongwaycn.github.com/bootstrap/docs/

Jetstrap網站：http://jetstrap.com/

新浪微博jssdk官方網站：http://www.weibojs.com

汽車標誌大全地址：http://apps.weibo.com/autobrand