head：
<link rel="stylesheet" href="bootstrap.min.css" />
引入bootstrap.min.css文件
<meta name="viewport" content="width=device-width,initial-scale=1" />
content="width=device-width：设为页面自适应
initial-scale=1：缩放比例：当前不缩放
例1：
body：
写头部（navbar-fixed-top）底部（navbar-fixed-bottom）导航栏
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"><div class="container"><!-- logo --><div class="navbar-header"><a href="#" class="navbar-brand">Projectname</a></div><!-- 导航栏 --><div id="navabar" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul></div></div></nav>
页面效果：
例2：
<div class="container"><h1>ilove学习</h1><h2>ilove学习</h2><h3>ilove学习</h3></div>
页面效果：
副标题：
Bootstrap把全局字体设为14px，行高：1.248（直接赋值body）
p标签：设置了等高10px的底部外边距
p的：
标记（换背景）
字体对齐格式
改变大小写
缩略语：
地址：
无样式列表：
栅栏：
共12行：
如果多一个就会是：
这种格式
觉得不好看，设置个格式
用3和1对比：
加上：
结果：
如果将页面改为手机使用：
会发现缩到很小的时候md-1格局变了，但xs-3格局还是这样。
将上面的部分md改为xs时，会呈现出这样的页面。
内容自适应：
偏移：
4个：
1个：
嵌套：
排序：
可以说用栅栏来分区是很方便的了。
