本文主要是介绍Bootstrap3正式版发布!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
http://www.yeahzan.com/blog/item/42-71.html
扁平化、极简化、轻量、迅捷、移动优先!
![](http://www.yeahzan.com/ui/img/article/bs3/bs3_release.jpg)
在经历几个Bootstrap3 RC版本的纠错与改进之后,在2013年的8月20日,Bootstrap3正式版本终于上线与大家见面了!
我们可以通过上一篇对RC版本的介绍对Bootstrap3的新特性有一定认识,当然,也可以通过这篇更为详尽的文章来看看,Bootstrap3与Bootstrap2相比较而言,到底有了怎样的变革与改进。
扁平化设计
![](http://www.yeahzan.com/ui/img/article/bs3/1.png)
与Bootstrap2的渐变式立体化风格不同,Bootstrap3推翻了原有的UI设计风格,完全采用了时下最为流行的扁平化设计风格,而扁平化带来的好处包括优化网站加载速度、有利于SEO搜索引擎优化、采用FontAwesome等字体类矢量网页图标。
配色清新明快
![](http://www.yeahzan.com/ui/img/article/bs3/2.png)
与Bootstrap2中默认的颜色不同,在Bootstrap3中,提供的几种默认色彩从视觉效果上来看更加清新、明亮,更加符合扁平化风格以及越来越趋于年轻化的Web网站页面设计与开发。
栅格系统层数变化
![](http://www.yeahzan.com/ui/img/article/bs3/3.png)
在Bootstrap3中的栅格层数已经达到了四层,分别为.col-xs(手机设备)、.col-sm(平板设备)、.col-md(桌面设备)、.col-lg(宽屏设备)。
如此精细的分层使得前端开发针对每种设备都能够有相当精彩的表现。
移动优先
![](http://www.yeahzan.com/ui/img/article/bs3/4.png)
曾经的Bootstrap2从整体理念上来说,主要还是针对桌面浏览器,但是随着移动领域的崛起,类似Zurb推出的前端开发框架Foundation都开始以“移动优先”作为框架理念,而Bootstrap3的框架理念也开始采用移动优先了。
浏览器兼容性
![](http://www.yeahzan.com/ui/img/article/bs3/5.png)
Bootstrap3已经放弃了对IE7的兼容,因为这些前端开发框架的使命同样也包括推广高级浏览器的普及,而非一味被低级浏览器所束缚。
当然,如果在网站建设项目中为了满足客户或者目标群体的需要,那么兼容性还是必不可少的重要因素之一。
更小的文件体积
![](http://www.yeahzan.com/ui/img/article/bs3/6.png)
在Bootstrap2中由于bootstrap.min.css与bootstrap-responsive.min文件是分开的,所以两个min文件大小为106kb+17kb=123kb。
而Bootstrap3中将两者整合到了一起,单独一个bootstrap.min.css的文件是67KB,缩减了50%之多。
其他文件也同样得到了不同程度的精简与压缩。
启用CDN
![](http://www.yeahzan.com/ui/img/article/bs3/7.png)
在Bootstrap3中启用了CDN(内容分发网络),从而保证了即使在不同区域访问网站,也能够更为快速地加载Bootstrap3的CSS与JS文件。
添加新的组件
![](http://www.yeahzan.com/ui/img/article/bs3/8.png)
在Bootstrap3中新增了List Group组件以及Panels组件,这两个组件的加入大大丰富了列表型布局的多样性。
在我们之前推出的基于Bootstrap3框架的WordPress博客主题中,也对这两个新组件进行了使用。
对于旧组件的完善
![](http://www.yeahzan.com/ui/img/article/bs3/9.png)
其中最具代表性的就是Modal组件,在Bootstrap2中,该组件显得过于复杂臃肿且不太好用,在Bootstrap3中对其进行了优化,并且在移动端的显示效果更为优秀了。
其他
![](http://www.yeahzan.com/ui/img/article/bs3/10.png)
例如增加对视网膜屏的支持、修复大量在RC版本中的BUG、以及一些全局CSS的改变等等,有兴趣的朋友可以参考一下官方的修改文档。
总结:超过6000次提交, 大于72000个增/减, 还有300多个文件的改变……从这些数据看来,Bootstrap3是一次彻头彻尾的大改动,所以需要多花些时间进行研究。如果你想要从Bootstrap2.x升级到Bootstrap3,可以参考文章末尾的升级参考链接。
这篇关于Bootstrap3正式版发布!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!