Bootstrap人民币玩家攻略

用bootstrap及其它基于它的框架，做了多次网站大改版~对bootstrap的特点有了越来越深的了解~从一开始接触时觉得超级鸡肋，到后来觉得方便，再到后来觉得还是能不用就别用了~为什么这么说？我们先看用法。

1.使用前的准备。

bootstrap是基于jquery的，所以在引用bootstrap的js之前，一定要先引入相应版本的jquery。然后在头部引入bootstrap.min.css,在jquery后面引入bootstrap.min.js。建议都使用它提供的min版本的js和css，这是压缩过的比较小，但是如果需要修改它的默认样式和函数，可以使用不带min版的，这样看源码比较容易。改完再压缩就好~

还有一个要引用的就是fontawesome.css，如果你的页面需要一些图标的话，当然还有响应的svg,eot,woff等字体文件。

如果你是人民币玩家，买的是基于bootstrap的框架，你还要引入这个新框架里的css和js

2.怎么用。

bootstrap就是一个不会用的时候写的特别慢，会用了之后开发特别快的工具。你要使用他提供的一些类，给页面的主要内容部分设置宽度的类：固定宽度用container，自适应用container-fluid。初学者看一遍css和组件的样例，直接把类名写上就行，这里不细说，说说可取的几点：

首先，就是自适应了。

使用它的栅格系统，就可以轻松的完成宽屏、ipad屏手机屏等屏幕的自适应，它使用的是媒体查询的方式进行的自适应，所以你的html的头部，别忘了把需要的和移动端相关的meta都引进来。

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }上面是bootstrap对屏幕大小的区分界限，可以用来参考自己写媒体查询的时候，用来做界限。

使用方法：
<div class="col-sm-5 col-md-6"></div>这个类的意思就是在中屏时，占6个单位，在小屏幕时，占5个单位。 

其次，对html元素的初始化。

div ul ol 都有一些浏览器自带的样式，比如margin和padding，这里就很好的重置了~

再次，提出一些可以全局使用的类；

比如：m-l-10:margin-left:10px !important;
这让一些只需要这一个css样式的标签，不需要再添加新的类名，直接引用即可。

3.相关插件

bootstrap有很多的插件，比如上传、时间等等~在它的cdn上一搜就有，特别方便。但是这些都是基于bootstrap的，就是说如果你想，比如bootstrap-dateitimepicker插件，如果在其他项目单独使用，还是要把jquery、bootstrap的css和js以及插件本身的js和css都引进来。

4.为什么用？

对于急需快速改版或者建立的网站

对于不会前端的服务端开发者

对于没有设计师的小组织

对于懒得自己写兼容性，自己写样式的前端~

嗯……没了，哦，还有对于想研究bootstrap以及想用bootstrap开发个模板赚钱的。

对于这样的情况，bootstrap是首选的，学习曲线低，可以非常简单的建立一个适应各种端的网站。

5.为什么不用？

对于前端，尤其是有洁癖的处女座，bootstrap实在是太冗余了，你需要引入的js里，有一大堆你网站用不着的样式重置，类等。

为了使用它的样式，你还要根据它的规则，多写很多的html标签。

可能为了不和它的某些组件重复，又是初学者，你要翻看文档，寻找组合，可能自己写已经秒秒钟写完了。

太容易撞站~跟别的网站长得特别像这种事，我会告诉你？

还有就是，每一个模板都会有不足的地方，你还需要去看源码，甚至改源码，添加新功能~

每个人有各自的爱好和癖好~除非是为了偷懒，否则我是不会用这样的模板了~~~~~