响应式布局（bootstrap框架）
前言
响应式开发原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
响应式布局容器：响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。（布局容器的宽度是固定的）
原理：就是在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式布局。
bootstrap框架
1、快速开发工具
bootstrap前端开发框架：bootstrap来自Twitter(推特)，是目前最受欢迎的前端框架。bootstrap是基于html、css、javascript的，它简洁灵活。使得web开发更加快速
中文网址：http://bootstrapt.css&&.com/
框架：顾名思义就是一套架构，它有一套比较完整的网页功能来解决方案，而且控制权再框架本身，有预制样式，组件，插件。使用者需要按照框架所规定的某种规范进行开发。
优点
标准化的HTML和css编码规范
提供了一套简洁、直观的组件，样式，插件等
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率
2、基本使用
去官网下载相关文件（js,css，font),在页面中引入相关的文件
因为bootstrap框架是基于Jquery开发的，所以引入bootstrap.js之前，先引入jquery.js
3、布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。我们提供了两个作此用处的类。
注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。适用于单独制作移动端开发。
4、bootstrap栅格系统
栅格系统：栅格系统是通过一系列的行（row）与列（column）的组合来创建页面的布局，设置的内容就可以放在这些创建好的布局中
实现原理：通过定义容器的大小，平分为12份。调整内外边距。结合媒体查询
使用步骤
一行数据（row）必须包含在 .container或.container-fluid中，以便为其赋予合适的对齐方式和内边距
使用行在水平方向创建一组列
具体内容放在列内，列可以作为行的直接子元素内置的一大堆样式，可以使用col-xs-4（占4列宽度）的样式来快速创建栅格
通过设置padding从而创建列之间的间隙，让后面第一列和最后一列设置负值margin来抵消掉 padding的影响
栅格系统中指定1到12的值来表示其跨越的范围
（1）列组合
列组合就是通过更改数字来合并列，类似表格里的colspan（列合并）。不过使用起来非常简单。
<div class="container">//第一行<div class="row"><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div></div>//第二行<div class="row"><div class="col-md-3">colmd-3</div><div class="col-md-3">colmd-3</div><div class="col-md-3">colmd-3</div><div class="col-md-3">colmd-3</div></div>//第三行<div class="row"><div class="col-md-8">colmd-8</div><div class="col-md-4">colmd-4</div></div>//第四行<div class="row"><div class="col-md-6">colmd-6</div><div class="col-md-6">colmd-6</div></div></div>
（2）列偏移
有时候并不想让两个相邻的列挨在一起，这时候可利用栅格系统的列偏移（offset）功能实现，而不必再定义margin值。对于中等屏幕，使用.col-md-offset-*形式的样式就可以将列偏移到右侧比如：.col-md-offset-2，的意思是将元素向右移动2个列的宽度
<div class="container">//第一行<div class="row"><div class="col-md-4">col-md4</div>//第二列，偏移4个<div class="col-md-4 col-md-offset-4">col-md-4</div></div>//第二行<div class="row"><div class="col-md-4">col-md4</div><div class="col-md-4 col-md-offset-2">col-md-4</div></div></div>
（3） 列嵌套
列嵌套：删格系统内置的栅格系统内容将再次嵌套。简单理解就是对一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列的.col-sm-2等等元素存到以及有了的-col-sm-7里
列嵌套最好加一个行（row)这样可以取消父元素的padding值，而且高度和父级一样高
<div class="container"><div class="row"><div class="col-md-8"><div class="row"><div class="col-md-7"></div><div class="col-md-5"></div></div></div><div class="col-md-4"></div></div></div>
（4）列排序
列排序就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统里，可以通过.col-mdpush-和.col-md-pull-来实现这一目的
push:推动/pull:拉
<div class="container">//第一行<div class="row"><div class="col-md-3">col-md3</div><div class="col-md-9">col-md9</div></div>//第二行<div class="row"><div class="col-md-3 col-mdpush-9">col-md-3</div><div class="col-md-9 col-mdpull-3">col-md-9</div></div></div>
默认情况下，col-md-9在左边，col-md-3在右边。如果要互换位置，需要将col-md-9列向右移动3个列的距离，也就是推3个列的offset，样式用col-md-push-3；而col-md-3则需要向左移动，也就是拉9个offset，样式用col-md-pull-9
注意：bootstrap4.0以上版本你已经废弃以上办法，改为order-（权重），默认值是0
5、响应式布局
<div class="container"><div class="row"><div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"> </div><div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div><div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div><div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div><div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div><div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div></div></div>
为了加快移动设备友好的开发，利用媒体查询功能，并使用这些工具类可以针对不同的移动设备展示或隐藏页面内容
.hidden-xs: 超小屏幕隐藏
.hidden-sm：小屏幕隐藏
.hidden-md：中等屏幕隐藏
.hidden-lg：大屏幕隐藏
样式、组件、插件
都是通过类名来引用
小图标的注意事项
图标类不能和其他组件直接联合使用
不能在同一个元素上与其他类同存在
创建一个嵌套的span元素，并将图标应用到这个 span上
只对内容为空的元素起作用
对引入的图标位置有规定
图标字体全部位于../fonts/目录内，相对于预编译版CSS文件的应该是同级目录
js插件的引入方式
在前面章节曾介绍过，在HTML中引入bootstrap.js文件或bootstrap.min.js文件即可使用Bootstrap的JavaScript插件。Bootstrap提供了12种JavaScript插件，引入bootstrap.js文件就意味着这12种插件都引入到页面中了，随便哪个都可以使用。还有一种引入方式，就是单个引入JavaScript插件。在官网下载Bootstrap的时候如果选择源码下载，里面会有一个js文件夹，里面有单个的JavaScript插件文件，针对实际情况可以用到哪个引入哪个。
