前端利器-Bootstrap

一般人对于企业产品的预期，可能仅停留在功能要强大，信息要安全，能够帮助企业提高工作效率。企业产品大部分都是强需求软件。

但今时已不同往日，人们开始更注重产品的用户体验。现在我们的用户在使用互联网的过程中，体验了很好的用户体验，无论是邮件系统，社区产品等。这就使得他们的使用企业产品的时候，也会希望有相同的使用体验。

企业产品竞争激烈的时候，功能差别不再是壁垒。大家都可以做到60分。好的用户体验是附加值，帮你做出差异化，赢得用户。

最近一直在搞前端技术的调研，选型，最后，我们决定基于Bootstrap3做定制，并做了一些DEMO。对Bootstrap3有了一定的了解，当然，相比大神级人物还是有很多差距的。

还是先科普一下吧。

BootStrap3 是来自Twitter的页面技术，他的JS技术是基于Jquery 1.1*的。他的CSS技术是基于LESS的动态CSS。当然他完美的将CSS3和HTML5，流体式响应布局整合起来，让三者不仅仅停留在刀耕火种的概念阶段，让三大潮流前端技术在快速应用上成为了可能。

优秀的用户体验仅仅靠靠bootstrap当然不够，还有很多，简单列举几个：

可以看出来，如果想成为一个优秀的前端工程师，要学的东西还是蛮多的。

今天，我们主要介绍下Bootstrap，别的后续会慢慢和大家聊。

先来看第一个问题，什么是Twitter风格？

两句话，扁平化设计，极简原则。如果你想象不出来，ios7，windows 8的磁贴，甚至mx3的系统都是扁平化设计的典范。

依然不明白，看下面网站;http://expo.bootcss.com/

第二个问题，什么是流体式响应布局？

适应各种分辨率的屏幕，跨平台，一次开发多次应用。

这意味着什么？以后我们开发的应用，既可以适应pc机，也可以适应pad端，手机端，甚至连TV端也适应。

这一切都归功于12栅栏系统。

栅栏系统把页面定义成了一个拥有1行12列的表格，可以各种嵌套，无任何限制。唯一的规则是这一行的列宽度要相加等于12。

非常简单就可以做出适应各种屏幕的应用。

第三个问题，Bootstrap 3到底如何简化我们的开发？

不得不说的BootStrap3 开发理念，不让你写一行JS代码，不让你写一行CSS，不让你找一张素材图。你只需要设计思路，然后就能让你做出完美的效果和页面，轻松利用上所有最新技术，并且完美兼容各种浏览器。

一句话概括：你只要知道什么时候，用什么样的class标签就可以了。

简单会用，会照猫画虎，那么你已经入门；

如果会熟练组合class，那么你已经是中级选手了；

如果你掌握足够多的class，并能轻松组合出绚丽的页面，那么你就已经高手了。

如果你心动了，想要下手了？推荐给你下面的内容：

0、http://www.bootcss.com/  中文网

1、http://getbootstrap.com/   英文官网

2、http://www.w3cschool.cc/bootstrap/bootstrap-tutorial.html

3、http://bootswatch.com/  免费主题，照着抄袭吧。

4、https://wrapbootstrap.com/  付费主题，真他奶奶的漂亮。

有这5把刀，学习Bootstrap足矣。

如果你想快速开发HTML5 流体式Web应用，如果你喜欢扁平化设计，如果不懂得那么多js和css，那么选择Bootstrap吧，BS3能用最简单的办法让你完成几乎完美的产品，并且他的Twitter团队一直在维护它，并且文档社区非常齐全。