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

零、前言

又看着熟悉的Bootstrap3的网站，想起去年本身刚来时举步维艰的学习过程，想着以前踩过的那些坑，感慨万千。最近团队融入了新鲜血液，本着薪火相传的原则，为了避免让后面的人踩一样的坑，才有了这个入门的文章。

回想起本身学习时，最大的问题，就是不会看文档，简称抓瞎。看着琳琅满目的一堆字，殊不知道哪些内容重要，最后白白浪费了许多时间。

因此这篇文章，除了介绍Bootstrap，最重要的是：

• 让初学者了解学习一门新技术的具体过程。

1、HTML、CSS、JS的关系

HTML是骨架
CSS是衣服
JS让网页动起来

这三句话。在坐的各位已经听了N遍了，可是对于历来没见过CSS和JS的小伙伴来讲，无异于对牛弹琴，老师强调多少遍，学生也记不住，即便记住了也是死记硬背的。

因此，直接上图：

纯HTML

十分简陋，只有内容，没有一丁点样式：

加入CSS

穿上衣服以后，最直观的感觉，就是页面变漂亮了：

加入JavaScript

JS让网页动起来，包括滚动、轮播图、弹窗等等，都是JS的功能。

因此，看到这里，你们应该对三者的分工有了明确的认识。

三者是一个总体。
全部的网页内容，都依赖HTML完成基本的布局。
CSS丰富了页面的样式，增长网页的美观性。
而JS负责与用户交互，接收用户的点击，而且作出相应的反应。

2、框架？

想象一下，你接到一个挖土的任务。
你能够选择用铲子来挖土，可是须要挖一个月；
但你也能够选择用挖掘机啊！用挖掘机只须要一个小时。

因此，手写代码，就像用铲子挖土，虽然一步一个脚印的走下来了，可是效率低；
而使用框架，就像是一台挖掘机，它能够在实际生产中，快速的帮你构建项目。

最终，铲子和挖掘机都能完成任务，异曲同工，最大的区别，就是效率不一样。

所以，实际的生产项目中，有一个很重要的思想：

• 不重复造轮子

别人已经写好的、而且写的很完美的代码，咱们固然没有必要再写一次，直接拿来用就行了。
因此，才有了各类各样高效、方便的框架，使用者只须要把框架拿过来，而且修改为本身须要的样子，就能够了。（这就是面向复制粘贴编程）

Bootstrap

我不去讲Bootstrap是什么，由于讲了也白搭——根本记不住，也没有必要去记它。

用通俗的话说就是，有一个大神，他为你写出了许许多多的CSS样式和JS效果，而且放在一个文件中。而咱们使用的时候，只须要引入这个文件，就能够得到大神写好的全部样式，不再须要本身写了。

有了Bootstrap，咱们甚至能够不会CSS和JS，只须要熟悉HTML，只须要会复制粘贴，就能够创造出漂亮的页面了。

3、起步

终于来到了本文的核心内容：

• 学习一门新技术的流程是什么？

若是是学习理论知识，最早了解的应该是“它是什么”“它的定义”。

但显然，计算机不属于理论知识，它是一门实践性很是很是强的学科，咱们没有必要在理论层面浪费太多的精力，而应该关注“它能实现什么”“如何使用它”！

所以，即便不知道它的定义、甚至不知道它的名字，你只要会用，会拿它作出优秀的做品，那你就是好程序员。

打开Bootstrap3的文档，看着这一大堆文字和代码，你脑海中必定会冒出来一个问题：这TM讲的是啥？

若是没有任何读文档的经验，第一次看见这么多字，必定会懵逼，这很正常。
这就是初学者的坑——不知道如何迈出第一步，每每在这里浪费了不少时间。

所以，若是是第一次阅读官方文档，咱们的关注点是什么？

对，是“ 它 能 实 现 什 么 ”！

“它能实现什么”

假如事先告诉你，进入这个网页以后，不要看任何代码和文字，只看图，只看各类各样的按钮、输入框、标题、巨幕等等图片，还会不会像刚才那样懵？

这些图片，就是Bootstrap能够实现的功能，因此，学习的第一步，就是反复的看这些图片，即便啥都不会，咱们至少知道了“我能够实现它”，而且不断的思考：我须要的功能，它都能实现吗？——这就是需求分析。

“我如何去实现”

在学习任何编程语言以前，都须要装环境，好比学C++须要安装VC6.0，学Python须要安装Python3.7和一款文本编辑器，学习HTML须要安装XAMPP或者NodeJS，所以装环境成了学习语言的第一步。

“你连环境都不会装，还编什么程序？”

因此在知道了某个框架能实现什么功能以后，接下来，就要思考“我怎么把它运行在个人电脑上”了。

装环境

在打开起步页面以后，你必定又懵了。

实际上，文档针对不一样的群体，给出了不一样的安装方法（尽管对于新手来讲看起来很困难）。

咱们必须学会在一大堆内容中压缩信息。

所以须要记住一点：任何的文档，只要涉及到比较难理解的内容，必然会给出模板，必然会给出模板，必然会给出模板。

所以咱们没有必要看这些看不懂的东西：

只须要一直往下翻，直到找到“基本模板”这里：

把所有的代码粘贴到一个空文件中，保存，用浏览器打开，当你看到：

恭喜，成功的运行了Bootstrap！
这是最简单的安装方式！就是这么简单！简单到只须要复制一下！

复制粘贴

既然已经成功安装了环境，那么咱们距离实现各类效果又近了一步，接下来就是如何去实现了。

再次打开组件页面，随意选择一个功能，好比“按钮”：

把它的因此代码，都复制到刚才显示“你好，世界”的模板中，

保存，刷新浏览器，就能看到，刚才的组件，活生生的出如今本身的网页中。

其余的组件也同样，须要什么就复制什么！

改模板

已经得到了各类组件以后，只要改动里面的文字，就能够把他们变成本身想要的样子了。

到此为止，咱们已经能够实现大多数功能了！

4、进阶

学会改模板以后，咱们能够快速的搭建一个像样的网页，但还不能对网页精确的排版布局，所以就须要容器和栅格。

容器

回到全局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，就能够了！

5、总结

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

之因此能学会，是由于咱们作了一件事：简化信息，把不少的、复杂的、看不懂的信息，简化成咱们能够接收的信息，而略过那些对咱们没有用的信息！

学习方法永远比知识自己重要

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

历来团队到如今已经整整一年了，一年中，我学习了PHP、学习了Java、学习了Angular、正在制做小程序......

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

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

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

文档，你怎么看？

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

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

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

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

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