Bootstrap 个人学习知识点

1.响应式布局
Bootstrap会自动获取使用者屏幕的大小，并根据屏幕的大小自动调整HTML元素的高度和宽度来适配屏幕
将所有的HTML元素放在class名为"container-fluid"的div属性中，便形成一个响应式容器。
2.Bootstrap使用方法
使用Bootstrap，只需要在需要布局的页面头部加入以下链接：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap /3.3.1/css/bootstrap.min.css"/>

3.图片属性
给图片添加img-responsive的class属性，图片的宽度就能自动适配你页面的宽度；
4.标题居中
加上"text-center"的class属性便可以进行居中显示
5.button标签
设置button标签，需要先加上“btn”这个class
(1)btn-block这个class将按钮升级为块级元素，使button标签充满整个屏幕，并且该元素后面的元素都会浮动到下一行；
(2)btn-primary这个class是该应用的主要颜色类，这个类的颜色对于那些你希望高亮提示用户的操作上非常有用；、
(3)btn-info这个class通常被用在用户比较可能会点击的操作上；
(4)btn-danger这个class是用来告诉用户这个操作会有一定危险性，比如删除这样的操作；
(5)btn-default默认按钮
6.元素列宽设置
col-md-*这样的class，其中md表示中等，星号表示一个数字，指定了元素应该占多少列宽，md一般用来设置中等尺寸宽度的诸如笔记本电脑屏幕上的布局；
xs和md不同，xs是指屏幕较小的设备，比如手机屏幕之类；
7.文字格式
text-primary这个class用来设置文字格式为主要显示的格式（一般为蓝色）；
text-danger这个class用来显著提醒（红色）；
span标签，可以将多个标签放在一起，甚至可以对同一标签的不同部分进行不同的样式设定；
8.Bootstrap行容器
将HTML元素包含在<div class="row"></div>中，
行容器分列：分别对各个元素包含在<div class="col-xs-*"></div>中，分别设定宽度；
9.Font Awesome图标
（1）使用Font Awesome图标需要添加以下链接到HTML头部

<link rel =“stylesheet”href =“// maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”/>

(2）i标签最初是作为制作其他元素的斜体，但现在通常用作图标，可以将Font Awesome类添加到i标签转化为图标；
(3）示例展示

<i class="fa fa-thumbs-up"></i>//大拇指
<i class="fa fa-info-circle"></i>//感叹号
<i class="fa fa-trash"></i>//垃圾桶
<i class="fa fa-paper-plane"></i>//纸飞机

10.表单控件form-control
input标签加上form-control之后，效果为：
（1）宽度为100%；
（2）设置边框为浅灰色；
（3）控件具有4px的圆角；
（4）设置阴影效果，当获得焦点时，阴影和边框效果会发生变化；
（5）设置placeholder的颜色为#999；
11.well属性
well属性让创建的列具有视觉深度的层次感

本作品采用《CC 协议》，转载必须注明作者和本文链接