FreeCodeCamp学习笔记：Bootstrap+Font Awesome篇

一、Bootstrap框架引用：

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

二、常用class：

1.   .container-fluid    响应式div
   
2.   .img-responsive 使图片自适应页面大小（宽度自适应）
3.   .text-center    文本居中
   
4.   .text-danger    红色样式文本
   
5.   .text-primary    蓝色样式文本
   
6.   .btn以及.btn-default    bootstrap默认按钮样式
   
7.   .btn-block    使按钮成为块级元素，按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。                                                                                                                            
8.   .btn-primary    深蓝色按钮样式（一般用于用户主要采取的操作上）
9.   .btn-info    浅蓝色按钮样式（一般用于用户可能采取的操作上）
10.   .btn-danger    红色按钮样式（一般用于提醒用户慎重操作：删除、修改等）
11.   .form-control    运用于表单中的文本框样式
    
12.   .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"/>

扫描二维码关注公众号，回复： 1070675 查看本文章

        使用方法：<i class="fa fa-info-circle"></i>    其中，fa类为必须，第二个类参考你所需要用到的图标，其格式为fa-xxx，xxx为对应的图标代码。

参考资料：FreeCodeCamp社区    https://www.freecodecamp.cn

转载请注明出处