课程实验大纲-WEB前端框架.docx

WEB前端框架实验大纲一、实验教学的目的和要求本课程立足于培养学生的动手实践能力，让学生了解Bootstrap结构、栅格系统原 理与Bootstrap实现原理与规律等；能够熟练使用HTML结合CSS实现网页布局，对 Bootstrap中的对象、表格、表单、事件机制进行交互设计；重点掌握Bootstrap的栅 格系统思想和插件的应用。二、实验项目名称和学时分配三、单项实验的内容和要求（包括实验分组人数要求）序号实验项目名称学时数必/选开01Bootstrap开发环境的搭建2必开02Bootstrap的文件结构并创建第一个程序2必开03Bootstrap栅格系统的格式及应用2必开04Bootstrap栅格系统布局2必开05Bootstrap栅格系统设计及布局偏移2必开06熟练使用表格、表单、按钮、图片类2必开07熟练使用按钮组、输入框组、缩略图、警告框、 进度条、媒体2必开08熟练使用模态框、下拉菜单、标签页、工具提示 等组件2必开实验一 Bootstrap开发环境的搭建 一 Bootstrap下载与安装。- - Bootstrap开发环境的搭建。 分组：一人一组实验二Bootstrap的文件结构并创建第一个程序一掌握且能够区分Bootstrap的文件结构。一一 掌握 bootstrap, js 与 bootstrap. min. js 区另限-编写第一个Bootstrap第一个环境。分组：一人一组实验三Bootstrap栅格系统的格式及应用- -掌握Bootstrap栅格系统样式名称与规则。- 练习图片的响应式。分组：一人一组实验四Bootstrap栅格系统布局- -掌握Bootstrap栅格系统设计与布局。- 练习3种经典布局模式分组：一人一组实验五Bootstrap栅格系统设计及布局偏移根据栅格系统实现布局偏移。- 根据布局实现图片与文字布局匹配。分组：一人一组实验六熟练使用表格、表单、按钮、图片类- -表格的各种样式。表单的组合使用。- 实现按钮组导航。分组：一人一组实验七 熟练使用按钮组、输入框组、缩略图、警告框、进度条、媒体编写输入框组登陆界面。- 布局使用缩略图实现。- 警告框、进度条、媒体的实现。分组：一人一组实验八熟练使用模态框、下拉菜单、标签页、工具提示等组件- 模态框弹出插入和修改表单。- 鼠标滑过实现提示。- 表头右侧实现标签页。分组：一人一组四、使用教材及参考书执笔：审定：（系或教研室主任签字）日期：