《HTML教程》_3.2-3.3教学材料.pptxVIP

响应式布局可以使用浮动自己制作，需要将网页中的逻辑区块的大小设置成符合最小设备的大小，在视口（显示设计的显示区域）较大时，则这些小的逻辑区块将水平排列。最好的方法就是使用Bootstrap响应式CSS框架。

Bootstrap是一个简洁、直观、强悍的前端开发框架，一种框架适应各种设备，让web开发更迅速、简单。下面我们就简单介绍一下Bootstrap的用法。

3.2.1加入Bootstrap支持首先，要使用Bootstrap必须先引入三个meta属性，而且这三个meta属性必须出现在head标记的最前面，即这三个meta之前不能再有任何内容。HTML代码如下：metacharset=utf-8metahttp-equiv=X-UA-Compatiblecontent=IE=edge

metaname=viewportcontent=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——设置layoutviewport的宽度，为一个正整数，或字符串width-device。◆initial-scale——设置页面的初始缩放值，为一个数字，可以带小数。◆minimum-scale——允许用户的最小缩放值，为一个数字，可以带小数。

◆maximum-scale——允许用户的最大缩放值，为一个数字，可以带小数。◆height——设置layoutviewport的高度，这个属性对我们并不重要，很少使用。◆user-scalable——是否允许用户进行缩放，值为no或yes,no代表不允许，yes代表允许。

其次，要引入bootstrap.min.css，它定义了Bootstrap中各控件元素的样式。HTML代码如下：linkhref=../css/bootstrap.min.cssrel=stylesheet这里需要注意是bootstrap.min.css文件的路径要书写正确，否则无法应用Bootstrap定义的样式。

第三，要引入jquery.min.js和bootstrap.min.js。Bootstrap需要jquery的支持。jQuery是一款优秀的JavaScript（Ajax）框架，在实际应用中用的特别多。这两个js文件（即JavaScript源文件）包含了Bootstrap中动态的内容。HTML代码如下：

scriptsrc=/jquery/1.12.4/jquery.min.js/scriptscriptsrc=../js/bootstrap.min.js/script此外，为了兼容IE9以下版本的浏览器，需要引入html5shiv.min.js和respond.min.js，主要用于IE9以下版本的浏览器支持HTML5元素和媒体查找。

HTML代码如下：!--[ifltIE9]scriptsrc=/html5shiv/3.7.3/html5shiv.min.js/scriptscriptsrc=/respond.js/1.4.2/respond.min.js/script![endif]--

完整的代码如清单3-2所示。这个模板来自Bootstrap中文网[15]，我们可以使用这个模板来构造自己的网页。

加入了Bootstrap的支持我们就可以使用它来制作自己的网页了。下面我们使用Bootstrap制作一个图3-1所示的导航菜单，可以看到使用Bootstrap比前面3.1节的制作过程简单的是太多了。而且我们还制作了一个下拉式二级菜单。

3.2.2Bootstrap制作导航菜单

如果使用Bootstrap制作导航菜单，那就容易多了。我们没有必要像3.1节那样编写这么多CSS代码，也没有必要考虑导航链接和Tab页之间的关系，只需要把要显示的内容按照Bootstrap的要求编写即可。我们仍然制作图3-1所示的导航菜单，效果如图3-2所示，风格与图3-1不同。

图3-2Bootstrap制作的导航菜单Bootstrap制作导航菜单十分容易，所有的页面元素