零基础HTML玩家的Bootstrap入门第一课（保证学会！）

零、前言

又看着熟悉的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作为容器，把所有的组件都要放在容器里面。

// 这样的容器，会在网页的左右留出空间，网页整体居中
<div class="container">
  ...
</div>

// 这样的容器，左右两侧不会留出空间，网页占满整个屏幕
<div class="container-fluid">
  ...
</div>

栅格

在栅格系统中，我们可以对页面内容做出精确的定位，请详细阅读文档内容。

如果看不懂，请继续看：

在Bootstrap框架中，如果不想让某个组件显示在最左边，就要使用栅格。

它把整个网页平均分成了12份，我们可以自由选择如何切分网页。

例如，复制下面的代码，保存，刷新：

<div class="row">
  <div class="col-md-1">1</div>
  <div class="col-md-1">2</div>
  <div class="col-md-1">3</div>
  <div class="col-md-1">4</div>
  <div class="col-md-1">5</div>
  <div class="col-md-1">6</div>
  <div class="col-md-1">7</div>
  <div class="col-md-1">8</div>
  <div class="col-md-1">9</div>
  <div class="col-md-1">10</div>
  <div class="col-md-1">11</div>
  <div class="col-md-1">12</div>
</div>

就能看到：

这就是12等分的页面。

如果想分成6+6呢？

<div class="row">
  <div class="col-md-6">123456</div>
  <div class="col-md-6">789012</div>
</div>

由于栅格系统使用div盒子标签，它是可以“盒子套盒子”的，通过div嵌套可以实现非常复杂的页面。

只需要保证各个盒子的col-md-？加起来是12，就可以了！

五、总结

通过以上的学习，我们让一个只会一点HTML的小白，通过自己阅读文档，学习了Bootstrap的基本用法。

之所以能学会，是因为我们做了一件事：简化信息，把很多的、复杂的、看不懂的信息，简化成我们可以接收的信息，而略过那些对我们没有用的信息！

学习方法永远比知识本身重要

这篇文章十分简单，但更关键的在于介绍“内功心法”，也就是如何学习一项新技能的流程。

从来团队到现在已经整整一年了，一年中，我学习了PHP、学习了Java、学习了Angular、正在制作小程序......

在这么多语言的学习中，唯一不变的就是学习它们的过程：

从“它能实现什么”入手 -> 去尝试“我怎么搭建环境” -> 去思考“我如何使用它” -> 然后认识到深层次的原理，知道“它是什么” -> 最终学会如果在框架的基础上创造新的东西。

（实践技能的学习过程和理论知识完完全全是相反的）

文档，你怎么看？

想象一下，高中做英语阅读的时候，你是从文章的第一个字开始一直看到最后一道题？还是有选择、有技巧的读文章找关键词？

同样的，计算机的各种文档的阅读，也是有套路的。

随着技术的发展，总有一天，Bootstrap框架会被淘汰掉，但读文档却是万古不变的重要本领。

我们遇到什么看不懂的文档，也不要怕，微笑着面对它，消除恐惧的最好办法就是压缩信息，跳过不懂的，只读关键的内容，坚持，就是胜利，加油，奥利给！！

本文作者：河北工业大学梦云智开发团队 刘宇轩