HTML5+CSS3 Web前端设计基础教程 第3版 课件 第9、10章 多设备响应式页面的实现、使用Bootstrap框架创建页面

第9章本章将围绕响应式页面的设计理念，向读者介绍此类页面布局的实现过程。多设备响应式页面的实现9.1响应式页面开发9.1.1了解“响应式Web设计”1．基本理念响应式Web设计（ResponsiveWebdesign）的理念是：“页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸和屏幕定向等）进行相应的响应和调整”。（1）响应式布局的优点面对不同分辨率设备灵活性强；

能够快捷解决多设备显示适应性问题。（2）响应式布局的缺点需要对应多种设备编写CSS代码，效率低下；代码累赘，加载时间加长；即便是使用了响应式布局也不能兼容所有设备，受多方面因素影响而达不到最佳效果；在多种设备下看到的页面效果会有不同，一定程度上改变了网站原有的布局结构，有可能会出现访问者对网站的辨识度不高的情况。2．优缺点9.1响应式页面开发9.1.2viewport网页可视区域1．什么是viewport2．viewport的语法width：用于控制viewport的大小，可以指定的一个具体的值（如600），也可以为特殊的值（如device-width，即设备的宽度）。height：和width相对应，指定高度。initial-scale：初始缩放比例。maximum-scale：允许用户缩放到的最大比例。minimum-scale：允许用户缩放到的最小比例。user-scalable：用户是否可以手动缩放。<metaname="viewport"content="width=device-width,initial-scale=1.0">9.1响应式页面开发3．viewport的效果图9-3手机端放大效果（没有使用viewport）图9-4手机端效果（使用viewport）9.1响应式页面开发9.1.3媒体查询（MediaQueries）详解1．mediaquery的语法这里设备名称指的是CSS中的设备类型，常见的有以下内容：all：用于所有设备类型；screen：用于计算机显示器；projection：用于投影显示，如幻灯片演示；handheld：用于小型或手持设备；print：用于打印预览模式；braille：用于触觉反馈设备。@media设备名称only（选取条件）not（选取条件）and（选取条件），设备二{sRules}9.1响应式页面开发图9-6“mediaquery”案例初次预览效果9.1响应式页面开发2．如何使用mediaquery（1）在<link>中使用@media（2）在样式表中嵌入@media9.1响应式页面开发图9-7窗口小于700像素时的预览效果9.2.1页面分析1．划分分辨率临界点2．确定基本页面9.2“响应式”页面的设计与实现图9-8屏幕宽度在768像素至1024像素时预览效果

9.2“响应式”页面的设计与实现图9-9布局示意图（平板电脑横屏）9.2“响应式”页面的设计与实现图9-10屏幕宽度在大于1024像素时预览效果

9.2“响应式”页面的设计与实现

图9-11布局示意图（PC端）9.2“响应式”页面的设计与实现图9-12屏幕宽度小于或等于414像素时预览效果

图9-13布局示意图（智能手机）9.2.2详细实施过程1．准备工作2．基本页中左侧导航的制作3．基本页中右侧内容的制作9.2“响应式”页面的设计与实现图9-16预览效果（2）9.2“响应式”页面的设计与实现4．使用@mediaquery编写显示宽度大于1024像素时的CSS规则5．使用@mediaquery编写显示宽度小于768像素大于414像素时的CSS规则6．使用@mediaquery编写显示宽度小于等于414像素时的CSS规则9.2“响应式”页面的设计与实现1．Bootstrap框架2．GumbyFrameWork框架3．UIkit框架4．AmazeUI框架5．zui框架9.3“响应式”框架介绍谢谢观看！第10章本章向读者介绍目前非常受欢迎的前端框架Bootstrap。通过Bootstrap框架的学习，用户能够方便快速地搭建视觉效果良好的页面。使用Bootstrap框架创建页面10.1Bootstrap框架10.1.1Bootstrap的环境配置1．下载Bootstrap访问Bootstrap中文网，在其网站的下载页面，按照需要下载不同使用场景的代码，这里下载预编译的Bootstrap。图10-1Bootstrap框架文件目录结构2．使用Bootstrap创建第一个网页图10-2使用Bootstrap创建第一个网页预览效果10.1Bootstrap框架10.1.2Bootstrap栅格系统1．栅格系统概述Bootstrap框架中的栅格系统是通过一系列的行（row）与列（column）的组合来创建页面布局。此栅格系统向用户提供了一套响应式、移动设备优先的页面布局方式，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。10.1Bootstrap框架10.1.2Bootstrap栅格系统2．使用栅格系统快速实现适应手机、平板和PC端的页面布局10.1Bootstrap框架图10-4超小屏幕（手机）端预览效果图10-5小屏幕（平板）端预览效果10.1.2Bootstrap栅格系统2．使用栅格系统快速实现适应手机、平板和PC端的页面布局10.1Bootstrap框架图10-6中等屏幕（桌面显示器）端预览效果10.1.3Bootstrap表格10.1Bootstrap框架图10-7Bootstrap表格预览效果10.1.4Bootstrap表单在Bootstrap框架中，提供了三种类型的表单布局，即垂直表单（默认）、内联表单和水平表单，其中垂直表单布局是最常见的布局形式。此外，在创建表单过程中Bootstrap支持最常见的表单控件有input、textarea、checkbox、radio和select。10.1Bootstrap框架图10-9内联表单预览效果10.1.5Bootstrap图片在Bootstrap框架中，提供了三种可对图片进行变形的类规则，可以让图片呈现不同的形状。10.1Bootstrap框架图10-10Bootstrap图片预览效果10.1.6Bootstrap导航栏

Bootstrap框架为用户提供了一种基本的导航栏功能，而其中用于导航的元素都是基于nav类进行扩展的。在Bootstrap导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。10.1Bootstrap框架图10-13Bootstrap