响应式的概念和语法
一 响应式基本介绍
响应式最初提出时追求的就是希望用户通过一个域名访问到的页面在所有的终端设备上都有一个很好的展示。( 并不是指所有设备展示一样 )
目前市面上主流的做法是在大屏的PC设备上实现响应式页面，但是在移动设备上会有专门的 APP 应用
二 如何实现响应式
1 早期通过 JS 不停的来判断当前设备的宽度( 默认情况下和浏览器等宽 )在宽度发生改变的时候根据设计稿来重新定义页面元素的样式
2 现在有了C3之后，它里面提供了一个 @media 属性 通过这个属性可以直接监测设备宽度。
三 C3媒体查询语句
开启媒询的关键字：@media ，利用它可以配合一些媒询的条件、关键字来组合对当前设备进行筛选。
媒询条件
01 max-width: 当宽度小于等于某个值时执行它里面的CSS
02 min-width: 当宽度大于等于某个值时执行它里面的CSS
03 orientation: landScape横屏时执行它里面的CSS
03 orientation: portrait竖屏时执行它里面的CSS
@media ( 条件 ){
// 条件成立时运行的CSS
}
例 @media ( min-width:600px ){
div{background:red;
}
}
此写法的CSS同样遵循后写的会覆盖先写的。
媒询关键字
01 and : 用来连接设备类型与条件的组合，可以同时使用多个 and ，并且它左右二边的空格是不能省略的。
02 all : @meida 后面不仅可以查询条件还可以查询设备类型,一般用 all 代表所有设备类型 【 screen print …. 】
03 not: 在设备类型集合中排除某种设备
04 only: 只选中某一种设备类型。
@media all and (min-width:800px) and (max-width:1000px){
// …….
}
四 媒询样式引入
页面如果是响应式的那么就需要书写多套 CSS 规则，然后通过 link 标签中的 media 属性来决定这些套 CSS 什么时候起作用
<link href=”**.css” stylesheet=”text/css” media=”all and (max-width:800px) “/>
五 Bootstrap 基本介绍
Bootstrap是由twitter 公司推出的一款快速实现前端响应式页面的框架，在这个框架里面定义了相应的 HTML CSS JS 规则，开发项目的时候只需要引入相应的文件，然后套用默认的HTML结构配合框架提供的类名就可以快速的得到响应式页面。
六 Bootstrap响应式实现
Bootstrap的设计者同样是利用 @media 属性来不停的监测当前设备的尺寸，然后去确定某一种尺寸下应当具有的版心，他根据市面主流的设备类型定义了四尺寸区间：
大于1200px【大屏桌面设备】 ：1170px
大于992px 【一般桌面设备】 : 970px
大于768px 【平板 pad】 :750px
小于768 【手持设备】 ：auto
然后当某种版心确定下来之后就可以根据此版设计来重新定义它里面元素的样式。这个时候设计者利用删格化的思想给每一个版心都平分为12列。在布局的时候我们可以不去定义具体的宽度数值 可以只写一个 相应列数，与四个版心对应的分别有 四套类前缀，变化的只有中间用来代码设备的字母
col-?-数值：?–> lg md sm xs
七 Bootstrap中常用的类名
01 container: 定宽居中的容器类( 版心 )
02 container-fluid: 通栏的百分百显示的容器类
03 row : 相当于 tr 一般直接出现在容器类后级子元素上
04 col-lg-2: 以此为例表示某个元素在超大屏设备下占据 2格( md sm xs )
05 col-push-1: 表示将元素向右移1列（md sm xs）
06 col-pull-1: 表示将元素向左移1列（md sm xs）
07 page-header: 定义模块标题样式
08 pull-left || pull-right: 分别表示向左向右浮动
09 bg-primary | info | success | danger | warning 分别表不同颜色的背景，当前风格同样适用于 btn- 前缀
10 btn-lg: 用来定义当前按钮的大小
11 visibility-lg|md|sm|xs: 分别表示只在某一种设备类型下显示
-
idden-…….同时，只是表示隐藏
Bootstrap中常用的导航条类名
01 navbar : 实现通栏结构
02 navbar-inverse: 定义了深色的导航背景.
03navbar-fixed-top: 将导航固定定位在顶部
04 navbar-brand: 用来存放logo文件或图片的容器
05 navbar-nav: 给它下面的ul li a 里的文字定义了适合在导航中显示的样式
06 navbar-btn: 给按钮定义了适合在导航中显示的样式
07 navbar-header: 将最终显示的内容存放在此容器中
08 navbar-toggle: 缩小到最后的时候可以点击的容器
09 icon-bar : 一条白色的线
10 collapse||navbar-collapse: 需要折叠显示的内容存放容器，默认隐藏，通过 navbar-collapse 让显示。
11 data-toggle=”collapse” ：bootstrap中常见的一个自定义属性表示开启某种功能。
-
ata-target=”选择器”：指定点击发生时折叠显示哪个模块
八 轮播图
01 carousel : 轮播图的容器类，在它里面存放左右按钮 图片列表 下方圆点
02 carousel-inner: 存放图片列表的容器，它的下面定义多个 div 每个 div 设置类名 item ，每一个 item 就表示一张图片。默认都是隐藏的，需要设置 active 让当前图片显示
03 carousel-indicators: 存入下方圆点的容器类，里面放置多个 li ，添加active 让当前图片对应的 li 高亮显示
04 data-ride: 类似于 data-toggle 表示开启某个功能
05 data-interval: 设置时间单位是毫秒 表示每张之间的相隔的时间
06 slide: 默认图片是 none 和 block 之间切换，设置 slide 之后可以滑动显示
07 data-slide-to: 设置编号表示点击按钮时跳转到对应编号的图片
