《jQuery从入门到精通》第三十八节 Bootstrap打造优秀的用户体验

 第11章  Bootstrap打造优秀的用户体验

11.1  Bootstrap来了

谈到Bootstrap，那要追溯到2011年。那年，twitter的一些工程师为了提高他们内部的分析和管理能力,在业余时间为他们的唱片构建了一套优雅、易用可扩展的前段框架Bootstrap，这样Bootstrap就这样诞生了。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，也是当今WEB开发者所热衷的框架。

11.1.1  一个新的开始

在像Bootstrap这样的框架未出现之前，WEB开发人员需要自己编写CSS样式代码，一个大型网站，前台的工作量是很大的，并且有时这样的工作也是重复的。为了避免这样的问题，一些开发者们就自己编写一套框架，用于自己的项目中。但是能够让大众接受的，不是很多。知道Bootstrap的出现，WEB前端的开发进入了一个新世界。Bootstrap有很多优点，优雅、大方的页面让众人眼前一亮。图11-1为Bootstrap中文官网。

图11-1 Bootstrap中文官网
现在有很多大型的网站就是利用Bootstrap开发的前台，像Github，Gitcafe等。

11.1.2  我能用Bootstrap做点什么

用Bootstrap能点什么呢？对于这个问题先不要着急知道答案，当读者看完这章，自能体会到Bootstrap的优雅之处。
Bootstrap的口号是Designed for everyone，everywhere，即适用于任何场景，适用于每一个人。笔者总结，大体上Bootstrap有以下几个特色：
其能够适用于各种技术水平的开发者，无论是设计师还是程序员，即使是初学者，参考Bootstrap官方文档，就可以做出自己漂亮的网页。
跨平台性，即跨浏览器。这一点是很重要的，在以前WEB前台的开发中，让设计师最头疼的就是各个浏览器的兼容性，但是跨平台这一特性，确实给WEB开发人员带来了方便。
栅格布局，这样的布局开发，让应用的核心层有了一个稳定并且灵活的栅格系统，这样让开发变的更加灵活，简单。
响应式设计，Bootstrap的所有组件能够根据分辨率灵活缩放，这样就提供一致性的用户体验。
定制的jQuery插件，有了这些好用的插件，能够让开发出来的网站更加美观，用户的体验度更高。
介绍了这么多特性，读者应该能够初步认识到，用Bootstrap能够做些什么了吧。先来了解一下Bootstrap能够做一些什么漂亮的控件吧。
图11-2所示为Bootstrap中的按钮。

图11-2 Bootstrap中的Button
图11-3所示为Bootstrap中的文本编辑框。

图11-3 Bootstrap中的文本编辑框
图11-4所示为Bootstrap中的菜单栏。

图11-4 Bootstrap中的菜单栏
当然Bootstrap中的漂亮控件还有很多很多，这个就读者自己到官网上看看吧，这里就不多介绍了。

11.1.3  jQuery和Bootstrap

对于jQuery和Bootstrap的来说，简单一点说，Bootstrap是显示给用户的，jQuery是来控制Bootstrap来进行展示功能的，Bootstrap是做前台，jQuery是网页脚本，两者搭配来实现相应的功能。
在以前的WEB开发中，前台是HTML的代码，样式是CSS来控制，然后是JavaScript的后台脚本。自从Bootstrap出现后，前台的CSS就不用费心思了，直接拿来Bootstrap用就可以了，jQuery也是对JavaScript的一个封装，这样开发网站就事倍功半了。