1.看文档
2.敲代码

看文档，还有SASS..

bootstrap 只是一个前端框架，并且你的目的就是利用他搭建出一个比较好看的网站而已。

你应该有 html\css\js\jq 等的基础，就算是没有，也肯定差不多能看懂

bootstrap 有两个版本，现在一般选择的就是3.X版本

关于设计页面，你可以先抄抄他的， bootstrap 官网就是一个很好的例子，并且在官网里面就介绍了一些基于 bootstrap 搭建的网站，你都可以邪恶的用F12抄下来

我个人认为你可以用1-2个小时大致的看一下文档，然后做一些笔记什么的，记下他提供了哪些样式。 然后直接下手做，遇到什么就按照他的文档用什么，半路中发现有更好的方式去做之前的工作了就重构一下前面的代码

最后一个，他的源码（开发的那个版本里面，可以去 github 下载）里面提供了几个比较简单的 example ，可以粗略的看一下

文档中有很多例子，拿过来套就行，主要是class标签

首先，要掌握一个前端框架，前几步走好了，后面就可以很欢快的使用了~~~

第一步：看看现成的组件的 例子 。并不是让你直接学用法，是让你预先熟悉下组件，样式的使用场景，什么样的情况用什么，有个大概的印象，对于之后自己需要什么样的东西也有个明确的目的（目的很重要）

第二步：基于第一步，等这几个现成的东西玩熟了，可以去"大致"看看 示例api (注意不要深究，慢慢来)。当然也不是让你直接就学其中的写法，你可以直接粘贴复制，看看能不能按自己的心意去实现把现场的东西"挪"到你的项目中

第三步：你会发现你直接复制过来的东西不能达到自己的效果，现在开始，就可以去仔细的看看怎么去调用api的不同写法，实现自己的需求了。这时，你要先看看这个 bootstrap的卖点 栅格系统，然后对比之前看到的示例网站，自己动手改改，删删，看看有什么不同。

第四步：等粘贴复制用熟了后，就尝试去自己来写了，然后可以去看看 成熟的网站结构源码 ，相信会悟出更多~

copy and paste， f5, yes!

~~这个放着我来！~~

知

• 你得知道，这种框架可不是直接用css写的，人家是用的less或者sass（scss）写的，然后生成出来的。恭喜你获得未点亮技能less和sass（scss）。
• bootstrap有两个大的版本，一个是2，一个是3。主要就是3不直接兼容IE8-的浏览器了，因为用了许多CSS3的东西。
• bootstrap的东家是推特，源码挂在github。致敬。
• 请看英文版文档（官方），理由我能说出1W个。

用

把要引用的文件都弄明白是干什么的，然后看着官方的例子，找到要用的直接复制粘贴。直接开浏览器调试器看。特别是栅格系统，2和3有很大的不同，要好好弄明白，毕竟是关乎整个网页的结构。然后js组件也多用用，感受一下。icon-font也是好东西，多看看，多用用。

学

重点来了，这里是一个技术人员的分水岭了。我个人认为bootstrap的一个优点是他的命令规则，值得好好研究。栅格的设计也是比较优美，相当耐用。想一下人家为什么这么设计。不止是css的设计，less和sass（scss）也是相当值得一看。里面各种精巧设计，简直就是活例子。里面各种函数化设计，相当灵活。

改

如果我想要一个24栏的栅格系统肿木办？自己修改。而且官方其实也提供了一个自定义的工具，调调颜色什么的。或者看源码，这样就能根据自己的需求生成适用于自己项目的bootstrap了。

造

拿过来，改一改，那就是自己的了。我不知道大家都用bootstrap，都是为了用那几个UI组件，反正我是把有用的抽出来，然后改一改，然后加点什么，变成适用于项目。然后你会发现，自己用的东西都是自己改造的，这个时候bootstrap才真正的发挥了他的价值。