《Bootstrap响应式应用技术》课程教学大纲

《Bootstrap响应式应用技术》教学大纲

一、课程目的

本课程侧重于介绍Bootstrap框架的基础知识及开发技能。随着Web开发技术的发展，以及用户对应用体验的要求日益提高，致使开发一个web应用时，不仅仅考虑其功能是否足够完备，更重要的是考虑如何才能提高用户体验。这是理性的回归，同时也是Web开发的必然趋势，而Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。因此，Bootstrap也成为了Web开发学习之路上所必需掌握的技能。

二、课程性质和任务

本课程通过企业项目开发流程为情景，学习并掌握Bootstrap开发的基础知识和基本开发技能。学生在学习本课程后具有一定的专业能力，可激发学生对后续专业课程的学习兴趣。课程结构上遵循企业开发“流程化”、项目“兴趣化”、教学“项目实战化”、模式“前瞻化”、教材“权威化”、授课“案例化”等国内领先的IT工程师培养模式，并且结合科学的考核评价模式。通过全方位课程设计、全真的工作环境、探索研究工学结合的培养模式，提高学生职业技能，最终实现岗位无缝对接。

三、教学要求

本课程的框架结构，经过与企业专家系统的讨论分析，按实际需要及由简入繁的原则，最终确定了学习培养标准。最终达到掌握Bootstrap框架的目标，故应特别注重应用能力的培养。具体要求如下：

●能够熟练使用CSS3结合HTML5实现网页布局；

●熟练使用jQuery实现交互式操作；

●熟练使用Bootstrap CSS基于页面的相关设置；

●熟练使用Bootstrap CSS响应式辅助；

●熟悉使用Bootstrap常用字体图标的运用；

●熟练使用Bootstrap布局组件运用；

●熟练使用Bootstrap布局组件分页及徽章的合理运用；

●熟练使用Bootstrap布局组件进度条及面板运用；

●熟练使用Bootstrap插件的相关运用；

●熟练使用Bootstrap滚动监听；

熟练使用Bootstrap轮播和附加导航。

四、教学内容和课时安排

本课程共56学时，3.5学分，具体教学内容和课时安排如下：

第一章 Bootstrap简介和环境安装…………………………………………………(2学时)

教学内容：

1、Bootstrap简介和环境安装；

2、Bootstrap HTML & CSS编码规范。

教学要求：

1、了解Bootstrap和安装环境；

2、了解Bootstrap HTML & CSS编码规范。

第二章 Bootstrap CSS概述………………………………………………………(4学时)

教学内容：

1、怎么设置移动设备优先；

2、设置响应式图像；

3、全局显示、排版和链接；

4、容器（Container）；

5、Bootstrap 浏览器/设备支持。

教学要求：

1、理解设置移动设备优先、全局显示、排版和链接、容器（Container）；

第三章 Bootstrap网格系统、排版和代码………………………………………………(4学时) 教学内容：

1、Bootstrap定义网格系统；

2、Bootstrap排版方式；

3、Bootstrap代码运用。

教学要求：

1、掌握Bootstrap定义网格系统；

2、掌握Bootstrap定义排版方式；

3、掌握Bootstrap定义代码运用。

第四章 Bootstrap表格、表单、按钮和图片………………………………………(4学时)

教学内容：

1、Bootstrap美化处理表格；

2、Bootstrap表单运用；

3、Bootstrap按钮效果设置；

4、Bootstrap图片效果相关设置。

教学要求：

1、掌握美化处理表格、表单运用；

2、掌握按钮效果设置、图片效果相关设置。

第五章 Bootstrap辅助类和响应式辅助…………………………………………………(4学时) 教学内容：

1、Bootstrap文本相关辅助；

2、Bootstrap背景相关辅助；

3、Bootstrap其他常用相关辅助；

4、Bootstrap响应式辅助。

教学要求：

1、掌握文本辅助、背景辅助、其他常用辅助、响应式辅助；

第六章 Bootstrap字体图标、下拉菜单、按钮组、按钮下拉菜单和输入框组……(4学时) 教学内容：

1、Bootstrap字体图标的定义；

2、Bootstrap下拉菜单的定义；

3、Bootstrap按钮各种组合方式；

4、Bootstrap按钮下拉菜单定义；

5、Bootstrap输入框各种组合定义。

教学要求：

1、掌握字体图标、下拉菜单、按钮组、按钮下拉菜单和输入框组；

第七章 Bootstrap导航元素、导航栏、面包屑导航和分页………………………(4学时)

教学内容：

1、Bootstrap导航元素定义；

2、Bootstrap导航栏的运用；

3、Bootstrap面包屑导航的定义；

4、Bootstrap元素分页处理。

教学要求：

1、掌握导航元素、导航栏、面包屑导航、分页；

第八章 Bootstrap标签、徽章、超大屏幕、页面标题和缩略图……………… (4学时) 教学内容：

1、Bootstrap标签的定义；

2、Bootstrap徽章的定义；

3、Bootstrap超大屏幕的定义；

4、Bootstrap页面标题的使用；

5、Bootstrap缩略图的定义。

教学要求：

1、掌握标签、徽章、超大屏幕、页面标题、缩略图；

第九章 Bootstrap警告、进度条和多媒体对象………………………………… (4学时) 教学内容：

1、Bootstrap警告样式运用；

2、Bootstrap进度条的定义；

3、Bootstrap多媒体对象组件定义。

教学要求：

1、掌握警告、进度条、多媒体对象；

第十章 Bootstrap列表组和面板……………………………………………………(4学时) 教学内容：

1、Bootstrap列表组的定义；

2、Bootstrap面板的定义。

教学要求：

1、掌握列表组、面板。