2.4-移动端布局Bootstrap响应式

1. 响应式开发

1.1 响应式开发原理

就是通过媒体查询针对不同的宽度的设备进行布局和样式的设置，从而适配不同的设备

设备划分	尺寸区间
超小屏幕（手机）	< 768px
小屏设备（平板）	>= 768px ~ < 992px
中等屏幕（桌面显示器）	>= 992px ~ <1200px
宽屏设备（大桌面显示器）	>= 1200px

1.2 响应式布局容器

响应式需要一个父级作为布局容器，根据布局容器的宽度来修改页面的样式和布局

平时我们的响应式尺寸划分

• 超小屏幕（<768px）：设置宽度为100%
• 小屏幕（>=768px）：设置宽度为750px
• 中等屏幕（>=992px）：设置宽度为970px
• 大屏幕（>=1200px）：设置宽度为1170px

2. Bootstrap前端开发框架

2.1 Bootstrap 简介

Bootstrap来自Twitter，是目前最受欢迎的前端框架，Bootstrap是基于HTML、CSS和JS的

它简洁灵活，使得Web开发更加快捷。

• 官网：http://getbootstrap.com
• 推荐：http://bootstrap.css88.com （这里文档写的比较全）

2.1.1 优点

• 标准化的html+css编码规范
• 提供了一套简洁、直观、强悍的组件
• 有自己的生态圈，不断的更新迭代
• 让开发更简单，提高了开发效率

2.2 Bootstrap使用

1. 创建文件夹结构
2. 创建html骨架结构
3. 引入相关样式文件
4. 书写内容

2.2.1 创建文件夹结构

• css
• js
• fonts

2.2.2 创建html骨架

<!-- 要求当前网页使用IE浏览器最高版本的内核渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 视口的设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lt IE 9]>
	解决IE9以下浏览器对html5新增标签的不识别，并导致CSS不可用的问题
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	解决IE9以下浏览器对于css3 media query的不识别
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

2.2.4 书写内容

• 直接用Bootstrap预设定好的样式
• 修改Bootstrap原有的样式，注意权重问题
• 学好Bootstrap的关键在于知道它定义了怎样的样式，以及这些样式会带来怎样的效果

2.3 布局容器

Bootstrap需要为页面和栅格系统包裹一个.container容器，bs预先设定好了这个类，叫做.container

它提供了两个作此作用的类

2.3.1 container类

• 响应式布局的容器，固定宽度
• 超小屏幕（<768px）：设置宽度为100%
• 小屏幕（>=768px）：设置宽度为750px
• 中等屏幕（>=992px）：设置宽度为970px
• 大屏幕（