bootstrap 是一个开源的前端框架，主要应用于页面的布局。
官网介绍：
同时，它也是移动优先的布局框架。
移动优先，指使用bootstrap开发的页面，不仅能用于web显示，还能用于移动端显示。
使用bootstrap中规范好的CSS样式，能使页面根据屏幕大小自适应，但必须要在 head 部分加入：
可以设置的属性：
m - 设置外边距 margin
p - 设置内边距 padding
可以设置的方向：
t - 设置上 距 *-top
b - 设置下 距 *-bottom
l - 设置左 距 *-left
r - 设置右 距 *-right
x - 设置x方向的*距，即左右边距 both *-left and *-right
y - 设置y方向 both *-top and *-bottom
(none) - 空则表示设置四个方向
可以设置的大小：
0 - 设置 边距为0：for classes that eliminate the margin or padding by setting it to 0
1 - (by default) 设置 the margin or padding to $spacer * .25
2 - (by default) 设置 the margin or padding to $spacer * .5
3 - (by default) 设置 the margin or padding to $spacer
4 - (by default) 设置 the margin or padding to $spacer * 1.5
5 - (by default) 设置 the margin or padding to $spacer * 3
auto - 设置自动的 外边距 * the margin to auto
示例：
mr-3 对应 margin-right: 3 3为不定值，随屏幕大小变化。
py-2 对应 padding-top:2padding-bottom:2
......
d-inline-block 将块级元素转换为行内块级元素
见官网： 栅栏布局
效果如下：
offset-*
d-flex
justify-content-*
作用于div子元素。
效果依次为：
align-items-*
同样作用于div子元素。
效果依次为：
flex-fill
作用于当前元素，效果是充满父元素。
flex-grow-*
将当前元素尽可能地增长，效果如下：
flex-shrink-*
将当前元素有必要地缩短，效果如下：
利用外边距可以实现：
ml-auto 表示 margin-left:auto ，效果使得当前元素水平居右。
mx-auto 表示左右外边距都为 auto ，效果是水平居中。
align-*
作用于当前元素 ，效果如下：
效果如下：
text-wrap
字体会自动换行，适用于 规定宽度 的div中的字体。
不包裹字体则是 text-nowarp 。
text-truncate
适用于块级元素中的字体。
text-*
效果如下：
list-unstyled 列表无黑点
list-inline行内列表
list-inline-item 行内列表中的一项
使用如下：
见官网 表格
blockquote 设置为块引用
blockquote-footer 块引用的引脚
效果如下：
百度菜鸟驿站学习bootstrap的框架，然后根据以前编写的html，css主页完成修改。以下为学习bootstrap的经验总结：
bootstrap框架
1.以栅栏式布局，分12列，16列，24列和32列，常用12列。
2.整个页面必须在container容器内部
3.移动端以
来使视图一比一缩放。（响应式布局）
4.载入bootstrap时需要经过七个步骤，才能支持CSS，js，IE，IE8以下等
a.引入bootstrap框架 <link rel="stylesheet" href="../bootstrap.min.css">
b.引入JQuery框架。引入在body结束标签之前。
c.引入JS文件，在JQuery框架之后引入。
d.引入移动端适应<meta name="viewport" content="width=device-width,initial-scale=1.0">。
e.将html标签添加<html lang="zh-cn">
f.若支持IE得在meta标签，得添加
g。若要支持IE8之前，需添加responds。js文件
然后根据所学完成个人主页的bootstrap框架。
1.前往中文官方网站：http://v3.bootcss.com/2.点击 bs3 的文档页面:
3.全局CSS样式：
4.栅栏系统：
很简单的描述，看看就OK了。
