2026年春国开电大网页设计实训9 响应式网页设计

实训9  响应式网页设计

1. 实训目的

本实训的目的是让学生学会借助第三方的前端框架Bootstrap，优化页面的设计及实现一些高级功能。需要掌握Bootstrap环境安装、基本元素的使用，了解高级插件的使用，从而实现响应式网页的设计。

2. 实训内容

本实训的主要内容包括以下几个方面：

登录页面的设计：使用Bootstrap框架的按钮、标签及文本框设计一个登录界面。

页面的跳转：可以通过登录界面，填写用户名、密码点击登录按钮，可通过超链接等方式跳转到另一个界面。

个人介绍页的设计：通过使用Bootstrap框架中的基本元素、导航栏及轮播等设计一个尽可能多的使用框架中技术的个人介绍页的界面。

3. 实训要求

要求学生掌握Bootstrap框架和VSCode的结合，即在VSCode工具中引入Bootstrap框架，并熟练使用框架的基本元素及一些基本插件，了解高级插件的使用。最后通过使用此框架设计一个带有登录界面的个人介绍的前端网站。

4. 实训条件

（1）实验设备：计算机一台。

（2）工具：Visual Studio Code。

（3）其他：笔，实训报告纸。

5. 实训步骤

(1) 设计一个登录页面

使用Bootstrap中的label、input、超链接及button等标签，设计一个可以跳转的登录界面。

(2) 设计个人介绍页

此页面的设计主要涉及导航栏（可以设计多个模块），使用轮播插件可以展示自己的照片等。尽可能多的使用Bootstrap框架中的功能，学生可以自由发挥，设计出富有个性的个人介绍页。