项目十二 杜甫作品问卷

【项目目标】

• 理解网格系统的原理。
• 理解媒体查询的工作原理。

【項目内容】

• 使用网格系统进行响应式网页设计。
• 运用媒体查询对不同类型的设备应用不同的样式。

【项目步骤】

Bootstrap 框架资源既可以直接从 CDN 服务商服务器中引入，也可以加入本地素材文件夹中给出的资源文件。如果有疑问，建议优先查阅 Bootstrap 框架的官方文档。本项目采用第二种方式：使用本地文件

css/bootstrap.min.css.

本项目中定义的CSS 样式保存在 css/search.css 中，全局样式表是 css/main.css 文件，素材文件

Dufu-Questionnaire.html 中已经引入这两个 CSS 文件。

页面在逻辑宽度大于 992px （Large, Extra large）时的样式，如项目图12-1所示。该项目在逻辑宽度小于992px （Extra Small, Small, Medium）时的部分样式，如项目图12-2所示

              项目图12-1  宽度大于992px                                         项目图12-2  宽度小于992px

1.引入资源

首先，打开文件Dufu-Questionnaire.html，注意网页结构的完整。

（1）定义视口（viewport），在head标签内添加viewport的设置代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

（2）引入Bootstrap框架资源
①引入Bootstrap的样式资源，在shead>标签内添加：

<link rel="stylesheet"href="css/bootstrap.min.css">

②引入Bootstrap的脚本资源以及其他组件，在</body>之前添加：

<script src="js/jquery.slim.min.js"></script>
<script sre="js/bootstrap.bundle.min.js"></script>

2.构建网页

（1）导航栏部分 本项目中的导航栏会根据浏览器逻辑宽度向用户呈现不同的效果。在浏览器逻辑宽度大于等于992px 时，页面会将整个导航栏菜单列表显示出来；在宽度小于992px时，页面会将导航栏菜单列表折叠隐藏起来，只显示出菜单图标。效果如项目图13-3a、13-3b所示。

项目图12-3a导航栏展开效果

项目图12-3b导航栏折叠效果

导航栏会在后面的章节给出详细介绍，此处只做应用，参考代码如下：
 

<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<div class="container">
    <a class="navbar-brand" href="#"&g