河南中医药大学：《Web交互开发》实验指导_11.实验十一：Bootstrap[JH-2018版]

《Web交互开发》实验教学指导/实验十一: Bootstrap 《Web交互开发》实验教学指导 实验十一: Bootstrap 、实验目的(5分) 1、掌握 Bootstrap环境的搭建方法 2、掌握 Bootstrap组件的使用方法 3、掌握 Bootstrap插件的使用方法; 4、掌握 Bootstrap其它功能。 二、实验环境(5分) 1、 Windows xp/ Windows7操作系统的计算机; 2、局域网网络环境,并且使用固定IP地址。 三、实验要求(5分) 1、完成登陆页面的编写 2、完成文本编辑器的编写 四、实验原理(5分) 1、 Bootstrap环境搭建 2、 Bootstrap组件的使用 3、 Bootstrap插件的使用 五、实验步骤(40分) 1、登录界面 (1)使用 Bootstrap框架实现登陆界面,并能够自适应页面大小,如图111所示 用户登录 Enter name Password 用户登录 Enter name Password 提交 图11用户登录 本讲共计2页当前第1页

《Web 交互开发》实验教学指导 / 实验十一 ：Bootstrap 本讲共计 2 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验十一：Bootstrap 一、实验目的（5 分） 1、掌握 Bootstrap 环境的搭建方法； 2、掌握 Bootstrap 组件的使用方法； 3、掌握 Bootstrap 插件的使用方法； 4、掌握 Bootstrap 其它功能。 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、完成登陆页面的编写； 2、完成文本编辑器的编写； 四、实验原理（5 分） 1、Bootstrap 环境搭建； 2、Bootstrap 组件的使用； 3、Bootstrap 插件的使用。 五、实验步骤（40 分） 1、登录界面 （1）使用 Bootstrap 框架实现登陆界面，并能够自适应页面大小，如图 11-1 所示。 图 11-1 用户登录

《Web交互开发》实验教学指导/实验十一: Bootstrap (2)请完成以下任务: 任务一:实现上述登陆界面。(20分) 要求 请将上述任务的操作方法,填写到实验报告册中。 2、网页文本编辑器的搭建 (1)使用 summernote实现网页文本编辑器,如图11-2 图11-2文本编辑器 (2)请完成下面的任务 任务一:文本编辑器的编写。(20分) 要求: 请将上述任务的操作方法,填写到实验报告册中。 六、自主实验步骤(20分) 1、使用 Bootstrap搭建个人首页 (1)完成下述任务。 任务一:完成个人首页的搭建 要求 请将完成上述任务的步骤,填写到实验报告册中。 七、思考及问答(20分) l、 Bootstrap环境搭建步骤?(5分) 2、列举至少三种其它的Web前端开发框架?(5分) 3、什么是 Bootstrap?(5分) 4、 Bootstrap的优点有哪些?(5分) 本讲共计2页当前第2页

《Web 交互开发》实验教学指导 / 实验十一 ：Bootstrap 本讲共计 2 页 | 当前第 2 页 （2）请完成以下任务： 任务一：实现上述登陆界面。（20 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、网页文本编辑器的搭建 （1）使用 summernote 实现网页文本编辑器，如图 11-2。 （2）请完成下面的任务： 任务一：文本编辑器的编写。（20 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 六、自主实验步骤（20 分） 1、使用 Bootstrap 搭建个人首页。 （1）完成下述任务。 任务一：完成个人首页的搭建 要求： 请将完成上述任务的步骤，填写到实验报告册中。 七、思考及问答（20 分） 1、Bootstrap 环境搭建步骤？（5 分） 2、列举至少三种其它的 Web 前端开发框架？（5 分） 3、什么是 Bootstrap？（5 分） 4、Bootstrap 的优点有哪些？（5 分） 图 11-2 文本编辑器