- 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备
-
设备划分 尺寸区间 超小屏幕（手机） < 768px 小屏设备（平板） >= 768px ~ < 992px 中等屏幕（桌面显示器） >= 992px ~ < 1200px 宽屏设备（大桌面显示器） >= 1200px
- 响应式需要一个父级作为布局容器，配合子级元素来实现变化效果
- 原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化
- 响应式尺寸划分
- 超小屏幕：设置宽度为100%
- 小屏幕：设置宽度为750px
- 中等屏幕：设置宽度为970px
- 大屏幕：设置宽度为1170px
@media screen and (max-width: 767px) { .container { width: 100% } } @media screen and (min-width: 768px) {} @media screen and (min-width: 992px) {} @media screen and (min-width: 1200px) {}
- 框架：一套架构，有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发
- 创建文件夹结构
- 创建html骨架结构
- 引入相关样式文件
- 书写内容
- 直接拿bootstrap预先定义好的样式（类名）来使用
- 修改bootstrap原先的样式，注意权重问题
- bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好了这个类，叫.container
- 它提供了两个作此用处的类
- container类
- 响应式布局的容器 固定宽度
- 大屏（>=1200px） 宽度定为1170px
- 中屏（>=992px） 宽度定为970px
- 小屏（>=768px） 宽度定为750px
- 超小屏（100%）
- container-fluid类
- 流式布局容器 百分百宽度
- 占据全部视口（viewport）的容器
- 适合于单独做移动端开发
- container类
- 栅格系统的简介
- 栅格系统（grid systems）是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局
- bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列
- bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container划分为12等份
- 栅格系统的使用
- 栅格选项参数
- 栅格系统用于通过一系列行（row）与列（column）的组合来创建页面布局，内容就可以放入这些创建好的布局中
-
  超小屏（手机）<768px 小屏（平板）>=768px 中屏（桌面显示器）>=992px 大屏（大桌面显示器）>=1200px .container最大宽度 自动（100%） 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 列数 12 - 行（row）必须放到container布局容器里面
- 我们实现列的平均分配，需要给列添加类前缀
- 列（column）大于12，多余的“列”所在的元素将被作为一个整体另起一行排列
- 每一列默认有左右15px的padding
- 可以同时为一列指定多个设备的类名，以便划分不同份数，例如class="col-md-4 col-sm-6"
- 栅格选项参数