FreeCodeCamp学习笔记：Bootstrap+Font Awesome篇
一、Bootstrap框架引用：
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
二、常用class：
- .container-fluid 响应式div
- .img-responsive 使图片自适应页面大小（宽度自适应）
- .text-center 文本居中
- .text-danger 红色样式文本
- .text-primary 蓝色样式文本
- .btn以及.btn-default bootstrap默认按钮样式
- .btn-block 使按钮成为块级元素，按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。
- .btn-primary 深蓝色按钮样式（一般用于用户主要采取的操作上）
- .btn-info 浅蓝色按钮样式（一般用于用户可能采取的操作上）
- .btn-danger 红色按钮样式（一般用于提醒用户慎重操作：删除、修改等）
- .form-control 运用于表单中的文本框样式
- .well 为设定的列创造出一种视觉上的深度感
三、Bootstrap响应式网格布局
响应式网格布局，可将多个元素放入一行并且指定元素的相对宽度的需求。如下图所示为bootstrap的12列网格布局：
在FreeCodeCamp社区中是这么说明的：在这张图表中，class属性 col-md-* 正被使用。在这里，md 表示 medium (中等的)，* 代表一个数字，它指定了这个元素所占的列宽。通过此图表的属性设置可知，在中等大小的屏幕上(例如笔记本电脑)，元素的列宽被指定了。有时会使用 col-xs-* ，其中 xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕），* 是你需要填写的数字，代表在一行中,各个元素应该占的列宽。
注意：在用col-xs-* 类之前，必须要将这些div放入一个具有row类的div中，这样布局才能生效。即：<div class="row">中嵌入一个或数个<div class="col-xs-*">
四、Font Awesome Icon
Font Awesome，一套绝佳的图标字体库和css框架。其中，这些图标都是矢量图形，而且和字体一样，可以通过px单位来指定图标的大小。引用链接：<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
使用方法：<i class="fa fa-info-circle"></i> 其中，fa类为必须，第二个类参考你所需要用到的图标，其格式为fa-xxx，xxx为对应的图标代码。
参考资料：FreeCodeCamp社区 https://www.freecodecamp.cn