《HTML教程》-3.2-3.3教学材料

响应式布局可以使用浮动自己制作，需要将网页中的逻辑区块的大小设置成符合最小设备的大小，在视口（显示设计的显示区域）较大时，则这些小的逻辑区块将水平排列。最好的方法就是使用Bootstrap响应式CSS框架。Bootstrap是一个简洁、直观、强悍的前端开发框架，一种框架适应各种设备，让web开发更迅速、简单。下面我们就简单介绍一下Bootstrap的用法。3.2.1加入Bootstrap支持首先，要使用Bootstrap必须先引入三个meta属性，而且这三个meta属性必须出现在head标记的最前面，即这三个meta之前不能再有任何内容。HTML代码如下：<metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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——设置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.css"rel="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"></script><scriptsrc="../js/bootstrap.min.js"></script>此外，为了兼容IE9以下版本的浏览器，需要引入html5shiv.min.js和respond.min.js，主要用于IE9以下版本的浏览器支持HTML5元素和媒体查找。HTML代码如下：<!--[ifltIE9]><scriptsrc="/html5shiv/3.7.3/html5shiv.min.js"></script><scriptsrc="/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制作导航菜单十分容易，所有的页面元素都提供了模板，只要按照它的模板，填充自己的内容就可以了。Bootstrap的导航条必须是一个nav元素，或者，如果是div元素的话，则必须指定role=”navigation”属性。我们使用nav元素制作导航菜单。代码如下：<nav> <ulclass="navnav-pills"><lirole="presentation"class="active"><ahref="#">首页</a></li><lirole="presentation"><ahref="#">自学考试</a></li> <lirole="presentation"><ahref="#">英语四六级</a></li> <lirole="presentation"><ahref="#">普通话报名</a></li> <lirole="presentation"><ahref="#">专业四八级</a></li> </ul></nav>这里只是制作了前面的导航链接，而没有制作“系统管理”的下拉式菜单，由于它的制作相对复杂，稍后再详细讨论。只需要把这些代码加入到到清单3-2所示的模板页中，即可以得到如图3-2所示的导航菜单了！是不是超级简单？只不过中<ul>中添加了class=”navnav-pills”属性，在<li>中添加了role=”presentation”和class=”active”属性而已，其他的与清单3-1所示的导航条是一模一样的。我们所做的只不过是添加Bootstrap指定的一些属性而已。剩下的只需要准备自己的内容而已！太伟大了。下面简要介绍一下用到的几个属性：◆class="navnav-pills"——说明我们要制作胶囊式导航菜单。◆role="presentation"——说明li元素所起的作用，用于Bootstrapjs操作某些元素。◆class="active"——指明哪个元素处于活跃状态。好了，只用了几个属性就把导航制作好了。是不是倍感轻松？下面我们制作下拉式菜单。因为“系统管理”又细分为若干个功能，所以只能以二级菜单进行显示。制作二级菜单也很容易，但用到的Bootstrap属性相对多一些。制作下拉菜单的HTML代码如下：<lirole="presentation"class="dropdown"> <aclass="dropdown-toggle"data-toggle="dropdown"href="#"role="button"aria-haspopup="true"aria-expanded="false">

系统管理<spanclass="caret"></span> </a> <ulclass="dropdown-menu"> <lirole="presentation"><ahref="#">学院管理</a></li> <lirole="presentation"><ahref="#">系部管理</a></li><lirole="presentation"><ahref="#">专业管理</a></li> <lirole="presentation"><ahref="#">班级管理</a></li> <lirole="separator"class="divider"></li> <lirole="presentation"><ahref="#">信息导出</a></li> <lirole="presentation"><ahref="#">信息清理</a></li> </ul></li>这里用到的属性比较简单，从属性值就可以看出它们的意义，下面简单描述如下：◆class="dropdown"——表示制作下拉式菜单。◆class="dropdown-toggle"——菜单单击时在拉开和隐藏两状态间切换。◆data-toggle="dropdown"——这是一个JS属性，表示引用js给外层添加一个open类。◆role="button"——表示这里的<a>的角色显示为按钮。◆aria-haspopup="true"——aria表示无障碍网页属性（即给残疾人“看”的网页），这个属性表示是否有弹出效果。◆aria-expanded="false"——表示<a>元素是不能展开的。◆<spanclass="caret"></span>——就是后面的下拉箭头。◆class="dropdown-menu"——指明<ul>是一个下拉式菜单。只需要了解这几个属性就可以制作这么“复杂”的下拉菜单了。其实，Bootstrap的主题——颜色、样式、排序方式等——是可改变的，这就需要深入学习Bootstrap了，大家可以参考文献[16]，如果英语看不懂的话，可以参考Boot