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"/>Copy

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”/>Copy

(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>//纸飞机Copy

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

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