什么是 Bootstrap？
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
历史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
写到这里，这篇从零开始学Bootstrap（3）我想写以下几个内容：
1. 基于我对Bootstrap的理解，做一个小小的总结。
2. 对从零开始学Bootstrap（2）例子进行UI美化和代码优化，主要是说说我是怎么做出自己想要的效果的。
3. 授人以鱼不如授人以渔，以自己的例子（因为自己也是新手，写出来的东西可能更适合初学者），讲讲代码编写过程中遇到的坑和需要注意的点。
废话不多说，下面开始：
一、 Bootstrap的小小总结
基于以Bootstrap的官方文档（）的说明，Bootstrap分为三个大块：CSS样式，组件，Javascript插件。
首先要明确一点：Bootstrap是一个框架，意思就是别人造好了轮子，你可以直接拿来用，免去了自己去造轮子。所以咱们需要明确两点：这些轮子是什么样的轮子，怎么样去使用这些轮子。
1. CSS样式：主要介绍了栅格系统和Bootstrap的全局样式。通过设定Class的值实现。
1.1栅格系统：
让我们可以很方便的实现HTML页面的布局(#grid)。
我觉得栅格系统很重要。因为HTML页面的布局是很重要也很繁琐的一项任务（你看一下W3School里关于布局的介绍，看一下例子里的代码，就明白了），并且需要考虑到不同浏览器、不同设备的兼容性。
栅格系统把这一切大大简化了。打开上面关于栅格系统的连接，你会发现只需要根据你想要实现的效果，给HTML元素Class属性赋相应的值，就可以实现，并且还能设置针对不同屏幕大小的设备展现不同的效果。
1.2 Bootstrap全局样式：
也就是Bootstrap对常用HTML元素（eg: DIV、Button、 P、 Table、 Img等等）是怎样美化的。通过给HTML元素的Class属性赋相应的值，就可以得到自己想要的效果。
举一个最简单的例子：
如上图所示，Bootstrap可以让你仅仅改变Button元素的class的值就是改变按钮的大小，而不用很麻烦的去修改css文件，或者给元素内嵌style的值。
2. 组件：我认为组件就是Bootstrap把一些元素（HTML元素和Javascript代码）组合起来，就变成了组件，并且提供了很多很好看很实用的图标。这些组件基本都是HTML开发过程中常用的。通过设定Class的值实现。()
举一个最简单的例子：
如上图所示，当我们需要实现导航功能的时候。找到Boostrap里相应的组件，依照其给的代码模板，根据自己的需求，赋相应的class和ul、li值就可以了
3. Javascript插件：我认为Bootstrap的Javascript插件就是封装了常用网页交互功能的”轮子”。只需要设定class属性和data属性就可以实现常用的网页交互功能，而不用自己写一大堆javascript代码。
首先说一个小插曲，新手可能误以为”javascript”和”java”有着很深的联系，甚至会认为javascript是java的变种。其实并不是这样，javascript是网景(Netscape)公司开发的应用于互联网的脚本语言，其实它最先的名字”是livescript”，后来网景公司与Sun公司(也就是发明Java的公司，后来被Oracle收购)达成合作，当时Java语言如日中天，名气很大，为了搭顺风车，就把livesript改名为javascript。以至于有人开玩笑：”Java”和”Javascrip”的区别就好比”雷锋”和”雷峰塔”的区别一样。
言归正传，我们知道，Javascript是为了赋予网页交互功能而存在的。所以，Bootsript上丰富的Javascript插件能够让你很方便的实现常用的网页交互功能，而不用把精力放在”造轮子”上。
如上图所示，利用Bootstrap的轮播插件(， Bootstrap的官方文档这里没有翻译成中文，runoob上却有很详细的中文翻译，并且可以在线修改代码提交观察效果，强烈推荐)，你可以很方便的实现现在很多网站都采用的图片轮播功能。这里只需要根据上述链接里面的教程，赋相应的class和图片src值就可以了，连data值都不用设。
二、 对从零开始学Bootstrap（2）例子进行UI美化和代码优化
下图是上期教程中实现的效果：
我们可以看到有以下几个缺点需要改正：