项目二十一 Web开发之响应式布局
项目要求
项目展示
响应式导航如图21.1所示，用Bootstrap3.0制作的网页PC端、PAD端、移动端分别如图21.2、21.3、21.4所示。
图21.1 响应式导航
图21.2 Bootstrap3.0制作的网页PC端
图21.3 Bootstrap3.0制作的网页PAD端
图21.4 Bootstrap3.0制作的网页移动端
教学内容
1. 响应式Web设计
响应式Web设计适合于多种屏幕尺寸大小，页面会随着屏幕大小的改变适时调整布局。案例如图21.5、21.6所示。
图21.5 科创页面的手机端和平板端
图21.6 科创页面的计算机端
2. 响应式开发原理
使用媒体查询 @ media针对不同宽度的设备进行布局和样式设置，从而适配不同设备的目的。设备划分为：① 小于768 px为手机；② 768 px - 992 px为平板；③ 992 px - 1200 px 为计算机端中等屏幕；④ 1200px以上为计算机端大屏幕。
3. 用媒体查询实现结构变化案例
（1）超小屏幕下屏幕小于768px，宽度为100%。
（2）小屏幕下屏幕大于等于768px，宽度为750px。
响应式开发原理
（3）中等屏幕下屏幕大于等于992px，宽度为950px。
（4）大屏幕下屏幕大于等于1200px，宽度为1170px。
4. Bootstrap响应式框架
框架：就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制的样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
（1）Bootstrap简介。
Bootstrap 来自Twitter（推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JavaScript的，其简洁灵活，使得Web开发更加快捷。
[中文网]（http://www.bootcss.com/）
[官网]（http://getbootstrap.com/）
（2）Bootstrap优点。
① 提供了一套简洁、直观、强悍的组件。
②标准化的html+css编码规范。
③有自己的生态圈，不断地更新迭代。
④让开发更简单，提高了开发效率。
（3）Bootstrap常用版本介绍。
3.*.*版本：目前使用最多、稳定，但是放弃了IE6-IE7。对IE8支持，但界面效果不好，偏向用于开发响应式布局、移动设备优先的Web项目。
4.*.*版本：源码采用Sass编写，选用弹性盒模型，新增网格层适配移动端，引入ES6新特性。
（4）Bootstrap框架的引入。
bootstrap引入1
bootstrap引入2
第一步：创建基本文件夹bootstrap，用来放bootstrap资源，如图21.7所示。
第二步：下载bootstrap文件放入项目。
第三步：将基本模板复制在html里，如图21.8所示。
第四步：引入资源文件。
图21.7 第一步创建基本文件夹
图21.8 Bootstrap响应式框架html 骨架结构
（5）Bootstrap布局容器。
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个.container 或者.container-fluid 容器，如图21.9所示。
图21.9 布局容器.container（上）.container-fluid（下）
（6）Bootstrap 栅格系统。
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统（又叫作网格布局），用于通过一系列的行（row）与列（column）的组合来创建页面布局，将内容放入这些创建好的布局中即可。
按照不同屏幕划分为1～12等份。
行（row）可以去除父容器作用15px的边距。
xs-extra small：超小；
sm-small：小；
md-medium：中等；
lg-large：大；
列（column）大于12，多余的“列（column）”所在的标签将被作为一个整体另起一行排列，每一列默认有左右15像素的padding，可以同时为一列指定多个设备的类名，以便划分不同份数。
例如，class="col-md-4 col-sm-6"
栅格系统就是默认将父元素分成12等分。如果想设置子元素的宽度，可根据占据的份数来决定子元素的宽度。例如：子元素占据3等份，那么就相当于设置子元素width：25%，子元素占据4等份，那么就相当于设置子元素width：33.333%。
栅格系统是分为行和列，要先写行，创建一div添加类名为row即可，下面以div为列，可以通过类名设置每列的宽度。
栅格系统
如：col-xs-栅格的数量（设置超小屏幕的宽度）。
col-sm-栅格的数量（设置小屏幕的宽度）。
col-md-栅格的数量（设置中等屏幕的宽度）。
col-lg-栅格的数量（设置大屏幕的宽度）。
如果列的栅格数量加一起没有超过12，则可能出现空白并在一行显示，如果列的栅格数量加一起超过12，则在开始超过12的那个换行显示。
如：〈div class="container"〉
列的类名可以写多个，就是可以同时设置col-xs-、col-sm-、col-md-、col-lg-这样在不同屏幕下就会有不同的结构样式。
如：〈div class="container"〉
（7）栅格系统的列嵌套。
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。
可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。
如：〈div class="col-sm-4"〉
列嵌套
效果如图21.10所示。
图21.10 列嵌套
（8）列偏移-offset-。
使用.col-md-offset-类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距（margin）。
列偏移
效果如图21.11所示。
图21.11 列偏移
（9）列排序。
通过使用.col-md-push-*和.col-md-pull-*类就可以很容易改变列（column）的顺序。
列排序
效果如图21.12所示。
（10）响应式工具的显示与隐藏。
显示和隐藏
为了加快对移动设备友好页面的开发工作，利用媒体查询功能，并使用这些工具类可以方便地针对不同设备展示或隐藏页面内容，如图21.13所示。
图21.12 列排序前（上）和排序后（下）
图21.13 响应式工具的显示和隐藏
项目训练