bootstrap

1.响应式开发
- 原理：通过媒体查询对不同宽度的设备进行布局和样式的设置
超小屏幕（手机）：<768px 设置宽度为100%
小屏设备 （平板）>=768px~<992px 设置宽度为750px
中等屏幕（桌面显示器） >=992px~<1200px 设置宽度为970px
宽屏设备（大桌面显示器） >=1200px 设置宽度为1170px

• 响应式布局容器
  做一个父级作为布局容器，来配合子集元素实现变化效果
  通过媒体查询改变布局容器的大小，在改变里边的子元素的排列方式和大小，从而实现在不同屏幕下，不同的页面布局和样式变化
  
  响应式布局导航-用媒体查询

bootstrap的使用

• 创建文件夹结构

• 创建html骨架结构

• 引入相关样式文件-bootstrap的css（css的bootstrap的文档）

• 书写内容
  布局容器
  .container

• container类
  大屏（>=1200px）宽度固定为1170px
  中屏 (>=992px) 宽度固定为970px
  小屏 (>=768px) 宽度固定为750px
  超小屏 (100%)

• container-fluid类
  流式布局容器百分百宽度
  占据全部视口（viewport）的容器
  适合于单独做移动端开发
  bootstrap栅格系统
  将页面布局划分成若干等宽的列，最多分为12列

• 栅格选项参数
  超小屏幕（手机）：<768px container最大宽度为100% 类前缀 .col-xs-
  小屏设备 （平板）>=768px~<992px container最大宽度为750px 类前缀 .col-sm-
  中等屏幕（桌面显示器） >=992px~<1200px container最大宽度为970px 类前缀 。col-md-
  宽屏设备（大桌面显示器） >=1200px container最大宽度为1170px 类前缀 .col-lg-
  
  如果孩子的总份数小于12份，则会占不满container的宽度，会有空白
  如果孩子的总份数等于12份，则会占满整个container的宽度
  如果孩子的总份数大于12份，则会多余的那一列另起一行表示
  每一列默认有15px的padding

• 列嵌套
  在父元素里面在写子元素 每个父元素都看成十二等分

• 列偏移
  偏移的份数就是12-两个盒子的份数 向右偏移
  col-md-offset-

• 列排序
  col-ma-push- 左侧
  col-md-pull- 右侧