1 引入
如果想要用到BootStrap提供的js插件，那么还需要引入jQuery框架，因为BootStrap提供的js插件是依赖于jQuery的
<link type="text/css" rel="stylesheet" href="../css/bootstrap.css">
<script type="text/javascript" src="../bootstrap.js"></script>
<script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
2 容器
- 固定宽度：.container
- 流式布局：.container-fluid
3 响应式布局
- 超小屏幕：小于 768px
- 小屏幕：大于等于 768px
- 中等屏幕：大于等于 992px
- 大屏幕：大于等于 1200px
4 栅格系统
1、概念
将父级可用宽度(content)均分为12等份
2、列比
- 超小屏幕：.col-xs-*
- 小屏幕：.col-sm-*
- 中等屏幕：.col-md-*
- 大屏幕：.col-lg-*
v-hint：只设置小屏列比会影响大屏列比；只设置大屏列比小屏时会撑满屏幕
3、行
<div class="row"></div>
...
<div class="row"></div>
4、列偏移
- 超小屏幕：.col-xs-offset-*
- 小屏幕：.col-sm-offset-*
- 中等屏幕：.col-md-offset-*
- 大屏幕：.col-lg-offset-*
5 常用组件
字体图标
优点：
size小
放大不失真
可以随字体颜色变化而变化
1. Bootstrap自带的
<span class='glyphicon glyphicon-heart'></span>
2. font Awesome
<i class="fa fa-heart"></i>
http://www.fontawesome.com.cn/
下拉菜单
按钮组
输入框俎
导航
分页
标签和徽章
页头
缩率图
进度条
补充：滚动的进度条
var $d1 = $("#d1");
var width = 0;
var theID = setInterval(setValue, 200);
function setValue() {
if (width === 100) {
clearInterval(theID);
} else {
width++;
$d1.css("width", width+"%").text(width+"%");
}
}
6. Bootstrap常用组件
7. Bootstrap常用插件
1. 模态框
2. 轮播图
8. 其他插件
1. SweetAlert for bootstrap
https://lipis.github.io/bootstrap-sweetalert/