bootstrap的媒体查询
1.max-width 最大宽度，当有多个媒体查询书写时，顺序从大到小
2.mix-width 最小宽度，当有多个媒体查询书写时，顺序从小到大
媒体查询完整写法：
@media 关键词 媒体类型 and (媒体特性) { css代码 }
关键词：
and 连接另外一个条件 ：
（min-width:768px）and (max-width:991px)
only 仅这一个条件满足时
ont 非，取反
媒体类型：是用来区分设备类型的，例如打印机，手机电脑等等
screen 带屏幕的设备
print 打印预览模式
speech 屏幕阅读模式
all 默认值，包含上面三种模式
媒体特性：用来描述媒体类型的具体特性 例如宽度，分辨率，横屏或者竖屏
视口的宽高：width / height
视口的最大与最小宽高：max-width / height min-width / height
image.png
横竖屏：orientation，取值:portrait竖屏 landscape横屏
外链式引入：
<link rel = "stylesheel" media= "逻辑符 媒体类型 and (媒体类型)" href="./css/.css"> //当满足条件时，执行这个csc样式表
image.png
Bootstrap栅格系统 (响应式布局)
1.栅格系统是将整个页面的宽度分成12等份(这是bootstrap 3的默认值)
栅格系统的封装原理：
1.媒体查询视口宽度
2.规定容器的宽度(百分比)
3.元素浮动，主要是因为浮动可以自动换行，flex则不行
超小屏: <768px .col-xs-* 版心100% (*表示在12等份中所需占的份数)
小屏: >=768px .col-sm-* 版心750px
中屏: >=992px .col-md-* 版心970px
大屏: >=992px .col-lg-* 版心1170px
image.png
2.bootstrap提供附带属性类名
container：
是bootstrap提供的版心的类名 自带宽度居中 还有一个15px的只有内边距
container-fluid：
是bootstrap提供的通栏的类名
row：
是bootstrap提供给版心或者通栏使用的，目的就是为了清除设置好的内边距
padding-left / padding-right:15px
3.bootstrap使用方法
下载bootstrap至项目根目录
link引入bootstrap样式表
动态效果需要引入jquery.js bootstrap.js 先引入jq再引入bootstrap.js
复制结构到自己项目中并修改内容
