零、前言
又看着熟悉的Bootstrap3的网站，想起去年自己刚来时举步维艰的学习过程，想着之前踩过的那些坑，感慨万千。最近团队融入了新鲜血液，本着薪火相传的原则，为了不让后面的人踩同样的坑，才有了这个入门的文章。
回想起自己学习时，最大的问题，就是不会看文档，简称抓瞎。看着琳琅满目的一堆字，却不知道哪些内容重要，最后白白浪费了许多时间。
所以这篇文章，除了介绍Bootstrap，最重要的是：
- 让初学者了解学习一门新技术的具体过程。
推荐阅读：
Bootstrap3官网： https://v3.bootcss.com/
菜鸟教程： https://www.runoob.com/bootst...
一、HTML、CSS、JS的关系
HTML是骨架
CSS是衣服
JS让网页动起来
这三句话。在坐的各位已经听了N遍了，但是对于从来没见过CSS和JS的小伙伴来说，无异于对牛弹琴，老师强调多少遍，学生也记不住，即使记住了也是死记硬背的。
所以，直接上图：
纯HTML
十分简陋，只有内容，没有一丁点样式：
加入CSS
穿上衣服之后，最直观的感受，就是页面变漂亮了：
加入JavaScript
JS让网页动起来，包括滚动、轮播图、弹窗等等，都是JS的功能。
所以，看到这里，大家应该对三者的分工有了明确的认识。
三者是一个整体。
所有的网页内容，都依赖HTML完成基本的布局。
CSS丰富了页面的样式，增加网页的美观性。
而JS负责与用户交互，接收用户的点击，并且做出相应的反应。
二、框架？
想象一下，你接到一个挖土的任务。
你可以选择用铲子来挖土，但是需要挖一个月；
但你也可以选择用挖掘机啊！用挖掘机只需要一个小时。
所以，手写代码，就像用铲子挖土，虽然一步一个脚印的走下来了，但是效率低；
而使用框架，就像是一台挖掘机，它可以在实际生产中，快速的帮你构建项目。
最终，铲子和挖掘机都能完成任务，殊途同归，最大的区别，就是效率不同。
因此，实际的生产项目中，有一个很重要的思想：
- 不重复造轮子
别人已经写好的、并且写的很完美的代码，我们当然没有必要再写一次，直接拿来用就好了。
所以，才有了各种各样高效、方便的框架，使用者只需要把框架拿过来，并且修改成自己需要的样子，就可以了。（这就是面向复制粘贴编程）
Bootstrap
我不去讲Bootstrap是什么，因为讲了也白搭——根本记不住，也没有必要去记它。
用通俗的话说就是，有一个大神，他为你写出了许许多多的CSS样式和JS效果，并且放在一个文件中。而我们使用的时候，只需要引入这个文件，就可以获得大神写好的所有样式，再也不需要自己写了。
有了Bootstrap，我们甚至可以不会CSS和JS，只需要熟悉HTML，只需要会复制粘贴，就可以创造出漂亮的页面了。
三、起步
终于来到了本文的核心内容：
- 学习一门新技术的流程是什么？
如果是学习理论知识，最先了解的应该是“它是什么”“它的定义”。
但显然，计算机不属于理论知识，它是一门实践性非常非常强的学科，我们没有必要在理论层面浪费太多的精力，而应该关注“它能实现什么”“如何使用它”！
因此，即使不知道它的定义、甚至不知道它的名字，你只要会用，会拿它做出优秀的作品，那你就是好程序员。
打开Bootstrap3的文档，看着这一大堆文字和代码，你脑海中一定会冒出来一个问题：这TM讲的是啥？
如果没有任何读文档的经验，第一次看见这么多字，一定会懵逼，这很正常。
这就是初学者的坑——不知道如何迈出第一步，往往在这里浪费了很多时间。
因此，如果是第一次阅读官方文档，我们的关注点是什么？
对，是“ 它 能 实 现 什 么 ”！
“它能实现什么”
假如事先告诉你，进入这个网页之后，不要看任何代码和文字，只看图，只看各种各样的按钮、输入框、标题、巨幕等等图片，还会不会像刚才那样懵？
这些图片，就是Bootstrap可以实现的功能，所以，学习的第一步，就是反复的看这些图片，即使啥都不会，我们至少知道了“我可以实现它”，并且不断的思考：我需要的功能，它都能实现吗？——这就是需求分析。
“我如何去实现”
在学习任何编程语言之前，都需要装环境，比如学C++需要安装VC6.0，学Python需要安装Python3.7和一款文本编辑器，学习HTML需要安装XAMPP或者NodeJS，因此装环境成了学习语言的第一步。
“你连环境都不会装，还编什么程序？”
所以在知道了某个框架能实现什么功能之后，接下来，就要思考“我怎么把它运行在我的电脑上”了。
装环境
在打开起步页面之后，你一定又懵了。
实际上，文档针对不同的群体，给出了不同的安装方法（尽管对于新手来说看起来很困难）。
我们必须学会在一大堆内容中压缩信息。
因此需要记住一点：任何的文档，只要涉及到比较难理解的内容，必然会给出模板，必然会给出模板，必然会给出模板。
因此我们没有必要看这些看不懂的东西：
只需要一直往下翻，直到找到“基本模板”这里：
把全部的代码粘贴到一个空文件中，保存，用浏览器打开，当你看到：
恭喜，成功的运行了Bootstrap！
这是最简单的安装方式！就是这么简单！简单到只需要复制一下！
复制粘贴
既然已经成功安装了环境，那么我们距离实现各种效果又近了一步，接下来就是如何去实现了。
再次打开组件页面，随意选择一个功能，比如“按钮”：
把它的所以代码，都复制到刚才显示“你好，世界”的模板中，
其他的组件也一样，需要什么就复制什么！
改模板
已经获得了各种组件之后，只要改动里面的文字，就可以把他们变成自己想要的样子了。
到此为止，我们已经可以实现大多数功能了！
四、进阶
学会改模板之后，我们可以快速的搭建一个像样的网页，但还不能对网页精确的排版布局，因此就需要容器和栅格。
容器
回到全局CSS样式，找到布局容器并阅读。
从中我们知道了：用一个div作为容器，把所有的组件都要放在容器里面。
// 这样的容器，会在网页的左右留出空间，网页整体居中
...
// 这样的容器，左右两侧不会留出空间，网页占满整个屏幕
...
栅格
在栅格系统中，我们可以对页面内容做出精确的定位，请详细阅读文档内容。
如果看不懂，请继续看：
在Bootstrap框架中，如果不想让某个组件显示在最左边，就要使用栅格。
它把整个网页平均分成了12份，我们可以自由选择如何切分网页。
例如，复制下面的代码，保存，刷新：
1
2
3
4
5
6
7
8
9
10
11
12
就能看到：
这就是12等分的页面。
如果想分成6+6呢？
123456
789012
由于栅格系统使用div盒子标签，它是可以“盒子套盒子”的，通过div嵌套可以实现非常复杂的页面。
只需要保证各个盒子的col-md-？加起来是12，就可以了！
五、总结
通过以上的学习，我们让一个只会一点HTML的小白，通过自己阅读文档，学习了Bootstrap的基本用法。
之所以能学会，是因为我们做了一件事：简化信息，把很多的、复杂的、看不懂的信息，简化成我们可以接收的信息，而略过那些对我们没有用的信息！
学习方法永远比知识本身重要
这篇文章十分简单，但更关键的在于介绍“内功心法”，也就是如何学习一项新技能的流程。
从来团队到现在已经整整一年了，一年中，我学习了PHP、学习了Java、学习了Angular、正在制作小程序......
在这么多语言的学习中，唯一不变的就是学习它们的过程：
从“它能实现什么”入手 -> 去尝试“我怎么搭建环境” -> 去思考“我如何使用它” -> 然后认识到深层次的原理，知道“它是什么” -> 最终学会如果在框架的基础上创造新的东西。
（实践技能的学习过程和理论知识完完全全是相反的）
文档，你怎么看？
想象一下，高中做英语阅读的时候，你是从文章的第一个字开始一直看到最后一道题？还是有选择、有技巧的读文章找关键词？
同样的，计算机的各种文档的阅读，也是有套路的。
随着技术的发展，总有一天，Bootstrap框架会被淘汰掉，但读文档却是万古不变的重要本领。
我们遇到什么看不懂的文档，也不要怕，微笑着面对它，消除恐惧的最好办法就是压缩信息，跳过不懂的，只读关键的内容，坚持，就是胜利，加油，奥利给！！