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的使用：

<!-- AdSense Now! V1.92 --><!-- Post[count: 2] -->

<script type="text/javascript">&lt;!-- google_ad_client = "ca-pub-1947244863247241"; /* 300x250, adsence 10-7-7 */ google_ad_slot = "5401857587"; google_ad_width = 336; google_ad_height = 280; //--&gt; </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

使用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