ajax实用技术教学课件作者程继洪肖川李海斌编著第3章页面布局和响应式设计3.2-3.3.pptxVIP

3.2 响应式布局 随着计算机硬件技术的不断发展，各种计算设备层出不穷。小到智能手机，中到平板电脑，再到便携式笔记本台式机，其显示设备可谓是千差万别，给Web界面设计带来了不小的困难。 于是就提出了RWD响应式Web设计（Responsive Web Design），它可以根据显示设备的大小自动调整网页的显示，自动适应各种不同的设备。 响应式布局可以使用浮动自己制作，需要将网页中的逻辑区块的大小设置成符合最小设备的大小，在视口（显示设计的显示区域）较大时，则这些小的逻辑区块将水平排列。 最好的方法就是使用Bootstrap响应式CSS框架。 Bootstrap是一个简洁、直观、强悍的前端开发框架，一种框架适应各种设备，让web开发更迅速、简单。 下面我们就简单介绍一下Bootstrap的用法。 3.2.1 加入Bootstrap支持 首先，要使用Bootstrap必须先引入三个meta属性，而且这三个meta属性必须出现在head标记的最前面，即这三个meta之前不能再有任何内容。HTML代码如下： meta charset=utf-8 meta http-equiv=X-UA-Compatible content=IE=edge meta name=viewport content=width=device-width, initial-scale=1 其中第一个charset属性大家已经很熟悉了，它指定网页使用的编码方式，也可以这么认为，Bootstrap使用的网页编码方式是utf-8。 Utf-8编码是通用的字符集，可以兼容世界上任何一种语言。 X-UA-Compatible是文档兼容模式的定义，Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响[12]。 viewport用于指定用户是否可以缩放Web页面，如果可以，那么最大和最小缩放比例是什么，还可以表示文档针对移动设备进行了优化[13]。 Viewport包含如下属性[14]： ◆width——设置layout viewport 的宽度，为一个正整数，或字符串width-device。 ◆initial-scale——设置页面的初始缩放值，为一个数字，可以带小数。 ◆minimum-scale——允许用户的最小缩放值，为一个数字，可以带小数。 ◆maximum-scale——允许用户的最大缩放值，为一个数字，可以带小数。 ◆height——设置layout viewport 的高度，这个属性对我们并不重要，很少使用。 ◆user-scalable——是否允许用户进行缩放，值为no或yes, no 代表不允许，yes代表允许。 其次，要引入bootstrap.min.css，它定义了Bootstrap中各控件元素的样式。HTML代码如下： link href=../css/bootstrap.min.css rel=stylesheet 这里需要注意是bootstrap.min.css文件的路径要书写正确，否则无法应用Bootstrap定义的样式。 第三，要引入jquery.min.js和bootstrap.min.js。Bootstrap需要jquery的支持。jQuery是一款优秀的JavaScript（Ajax）框架，在实际应用中用的特别多。这两个js文件（即JavaScript源文件）包含了Bootstrap中动态的内容。HTML代码如下： script src=/jquery/1.12.4/jquery.min.js/script script src=../js/bootstrap.min.js/script 此外，为了兼容IE9以下版本的浏览器，需要引入html5shiv.min.js和respond.min.js，主要用于IE9以下版本的浏览器支持HTML5元素和媒体查找。 HTML代码如下： !--[if lt IE 9] script src=/html5shiv/3.7.3/html5shiv.min.js/script script src=/respond.js/1.4.2/respond.min.js/script ![endif]-- 完整的代码如清单3-2所示。这个模板来自Bootstrap中文网[15]，我们可以使用这个模板来构造自己的网页。 加入了Bootstrap的支持我们就可以使用它来制作自己的网页了。 下面我们使用Bootstrap制作一个图3-1所示的导航菜单，可以看到使用Bootstrap比前面3.1节的制作过程简单的是太多了。而且我们还制作了一个下拉式二级菜单。 3.2.2 Bootstrap制作导