一、基础知识
1、是基于HTML、css和JavaScript的，使得web开发更加快捷
2、框架：一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式、组件和插件，要按照所规定的某种规范进行开发
3、优点：
①标准化的html+css编码规范
②提供了一套简洁、直观、强悍的组件
③有直接的生态圈，不断更新迭代
④直接复制粘贴，让开发更简单
4、下载
网址：https://v3.bootcss.com 点击bootstrap3中文文档 点击下载即可
二、使用步骤
1、创建文件夹结构，再将下载好的bootstrap文件引入
2、创建html骨架结构
需添加的内容：
①要求当前网页使用IE浏览器最高版本发内核来渲染
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
②解决ie9以下浏览器对html5新增标签的不识别，并导致css不起作用的问题
<script src=”//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js”></script>
③解决ie9以下浏览器对css3 Media Query的不识别
<script src=”//cdn.bootcss.com/respond.js/1.4.2/respond.min.js”></script>
3、引入相关样式文件
将bootstrap中的需要用到的css文件引入到html中
4、书写内容
①bootstrap是通过类来控制样式，可以通过给类名就可以使用相同样式
如：<button type=”button” class=”btn btn-success”>（成功）Success</button>这是一个按钮的代码
<div class=”btn btn-success”>登录</div>给了相同类名以后同样能使用样式
②想要在这个基础上增加我们自己想要的效果，就在类名后面增加我们自己的类名即可(注意权重问题)
如：修改这个样式<div class=”btn btn-success”>登录</div>
只需在后面加类名即可-<div class=”btn btn-success login”>登录</div>
然后修改 .login { }
三、布局容器
bootstrap需要为页面内容和栅格系统包裹一个 .containe 容器，因为Bootstrap预先定义好了这个类，所以必须是这个名称叫container 它提供了两个作此用处的类
1、container类 （就不需要媒体查询了）
响应式布局的容器，固定宽度
超小屏幕（手机，小于768px）：设置宽度为100%
小屏设备（平板，大于等于768px）：设置宽度为750px
中等屏幕（桌面显示器，大于等于992px）：设置宽度为970px
宽屏设备（大桌面显示器，大于等于1200px）：设置宽度为1170px
2、container-fluid 类
流式布局容器 百分百宽度
占据全部视口（viewport ）的容器
适合单独做移动端开发
四、栅格系统（grid systems）
1、基础知识
①将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局
②Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，统一划分为（最多）12列
③Bootstrap已经包含normalize.css（css初始化）所以就不必再引入normalize.css
2、栅格系统选项参数
①通过一系列的行（row）和列的组合来创建页面布局
②行（row）必须放到container布局容器里
③要实现列的平均划分 需要给列添加类前缀
xs-extra small：超小 sm-small：小 md-medium：中等 lg-large：大
col-xs：超小 col-sm：小 col-md：中等 col-lg：大
④前缀名加元素所占份数组成一个类名
如： <div class=”container”>
<div class=”row”>
<div class=”col-lg-3″>1</div>
<div class=”col-lg-3″>2</div>
<div class=”col-lg-3″>3</div>
<div class=”col-lg-3″>4</div>
</div>
</div>共有4列，每一列占3份，刚好12份
⑤以上面例题为基础，如果：
列（column）等于12，则刚好占满整个 container 的宽度
列（column）小于12，则占不满整个 container 的宽度，会有空白
列（column）大于12，多余的”列“所在的元素将被作为一个整体另起一行排列
⑥每一列有默认15px的padding
⑦可以同时为一列指定多个设备的类名，以便划分不同份数
如：class=”col-md-4 col-sm-6“
3、列嵌套
①列嵌套最好加一个行 row 这样可以取消父元素的padding值（不然第一个内嵌元素前面会有留白） 而且高度自动和父级一样高
②嵌套元素类名命名和父级一样
4、列偏移
格式：.col-md-offset-份数
5、列排序
①简单理解：一列有左右两个盒子，将其交换位置（份数就相当于距离）
将左盒子推过去，将右盒子拉过来，实现位置的交换
②.col-md-push-份数 push 推
.col-md-pull-份数 pull 拉
6、响应式工具（在bootstrap网站中都能查到）
.hiden-xs 在超小屏下隐藏
.hidden-sm 在小屏下隐藏
.hidden-md 在中屏下隐藏
.hidden-lg 在大屏下隐藏
同理 visibile显示
五、小技巧
1、在布局是常遇到两个元素之间需要间隔，但必须占满12份时，我们可以利用padding值挤压内部元素，制造间隔
2、多浏览、使用该网站的元素样式，手熟以后可以更加方便快捷的开发