bootstrap的使用

写在前面的话：


1、首先要了解bootstrap是一个框架，用于开发响应式布局、移动设备优先的项目；
2、bootstrap包括起步、全局CSS样式、组件、JS函数插件、定制五部分；
3、学习bootstrap需要bootstrap手册；
4、使用bootstrap主要是使用其中的CSS样式表，不仅要记住，而且要熟练使用一千多个class样式；
5、bootstrap可以免费使用两百多个Glyphicons Halflings字体图标，免费的Fontawesome字体图标也是开发的一个不错的选择；
6、要想熟练使用一千多个class样式，必须了解组件等的底层处理技巧（即效果是如何实现的）；
7、因为bootstrap中的动画效果数量少且效率低，尽量不要使用boostrap中的动画效果，可以优先使用jQueryUI；
8、bootstrap中CSS样式表是基于Less和Sass开发的，所以学习bootstrap也要学习这两种预处理脚本语言；
9、Less文件经过Less编译器可以转换为CSS样式文件，可以在Less源码基础上对bootstrap进行定制，实现自己需要的效果；


如何使用bootstrap（使用webstorm开发）：
1、打开webstorm新建项目，引入官网中下载好的文件：
1.1 bootstrap.css；-->该文件中包含约6800行代码；
1.2 5个glyphicons字体文件；
1.3 bootlint.js、bootstrap.js、html5shiv.min.js、jquery-1.11.3.js、response.min.js；
   实际开发过程中可以都引入带min的压缩版本；

如下图1所示：

图1

2、Files>new...>Edit File Templates...菜单目录下新建一个带有bootlint检查工具的HTML模板；
   模板中引入相关css以及js文件，其中引入bootlint工具的那一块可以单独创建一个外部脚本并引入；
如下图2所示：

图2

3、完成模板后，就可以利用该模板进行开发工作了。

如下图3所示：

图3