.. . .. . .
BootStrap缩略图 BootStrap警告 BootStrap进度条 BootStrap多媒体对象 BootStrap列表组 BootStrap面板 BootStrap wells 3 BootStrap插件篇
3.1 BootStrap插件概览 3.2 BootStrap过渡效果 3.3 BootStrap模态框 3.4 BootStrap下拉菜单 3.5 BootStrap滚动监听 3.6 BootStrap标签页 3.7 BootStrap提示工具 3.8 BootStrap弹出框 3.9 BootStrap警告框 3.10 BootStrap按钮 3.11 BootStrap折叠 3.12 BootStrap轮播 3.13 BootStrap附加导航 BootStrap 其他篇
S. . . . . ..
.. . .. . .
BootStrap UI编辑器 BootStrap v2教程 BootStrap HTML 编码规 BootStrap CSS 编码规 BootStrap 可视化布局 Less 教程
（二）活动安排：
1、基于工作过程的课程开发理念，先进行综合职业行动领域和情境分析，然后深入企业调研和行业专业研讨，最终分解和确定学习任务。 2、根据情景任务，开发相应的课程教案，组织课程资源。 3、推行一体化教学模式，强化教与学的及时互动，进行动态的教学评价和反馈机制。
4、建立课后网络教学和学习平台，强化课后训练和扩充学习资源，提供课后教学支持。
5、组织专题技术讲座和讨论，加强对新技术的掌握。
6、加强校企联动，鼓励走入企业参加生产实训，使学生加深对BootStrap开发技能在实际工作应用的认识和掌握。
8、完善项目化教材编写，组织教师参加高层次技术培训和企业工程实践。
9、组织参加各层次的网页布局兴趣活动和比赛。 （三）知识要点： 1、BootStrap概述 2、BootStrap基本结构 3、BootStrap CSS
S. . . . . ..
.. . .. . .
4、BootStrap 布局组件 5、BootStrap插件 6、BootStrap UI编辑器 7、BootStrap v2教程 8、BootStrap HTML 编码规 9、BootStrap CSS 编码规 10、BootStrap 可视化布局 11、Less 教程 （四）技能要点：
1、具备熟练使用与操作Dreamweaver软件环境的能力； 2、具备基础JavaScript语言基础；
3、具备使用Dreamweaver准确进行编程运行以及解决运行测试能力；
4、具备熟练的编程操作能力和输出调试能力； 6、具备中级制排版和配色的技能水平。 四、实施建议 （一）教学建议
1、课程项目结构与学时分配
为使学生掌握利用Dreamweaver软件熟练进行网页编程能力所需的知识与技能，本课程以网页编程和输出为贯穿项目，并由基础网页编程3个子项目来组织教学，将职业行动领域的工作过程融合在项目训练中。本课程项目结构与学时分配见表1。
表1
Bootstrap开发技术课程项目（学习情境）容与学时分配表
S. . . . . ..
.. . .. . .
项目编号 子项目名称 子项目容 支撑知识 学时 1 Bootstrap网格系统 1、 Bootstrap包含了一1、 网格行为 个响应式的、移动设2、 最大容器宽度 备优先的、不固定的3、 Class前缀 网格系统，可以随着4、 列# 设备和视口大小的5、 最大列宽 增加而适当的增加到最多12列 2、媒体查询：用来创建 Bootstrap 网格系统中的关键的分界点，根据不同的视口大小显示不同的容 1、联子标题 2、强调 3、缩写 4、地址 5、引用 6、列表 1、
我是标题3 h3. 我是副标3 h3
2、 3、 4、 12 2 Bootstrap排版 13 3 定位页眉和页脚 1、 放置页眉和页脚的1、inline - 默认。页方式有三种 眉和页脚与页面容2、 使用data-position 位于行。 属性来定位页眉和fixed - 页面和页脚页脚 会留在页面顶部和底部。 fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部 1、jQuery Mobile导航1、 导航栏由一组栏 水平排列的构2、jQuery Mobile列表 成，通常位于页眉或页脚部。 2、 3、默认地，导航栏中的会自动转换为按钮（无需 13 4 JavaScript 插件 18 S. . . . . .... . .. . .
data-role=\）。 4、请使用 data-role=\属性来定义导航栏：
2、课程教学实施
建议本课程重视学生在校学习与实际工作的一致性，采取任务驱动、项目导向的教学模式，每个具体学习情境设计见表2-1、2-2、2-3详表。
表2-1
BootStrap开发技术学习情境表一 学习情境（项目）：创建一个web项目 学时 12 能力目标：通过理论和实践相结合的教学方式，使学员熟练掌握BootStrap。 项目目标 知识目标： 1、添加导航栏完全采用Bootstrap提供的样式 2、添加容 项目任务 任务一：在web目录下创建css目录，在css目录下创建boostrap目录，将压缩版的css文件bootstrap.min.css 复制到此目录下。 任务二：在index.jsp中引入样式，在head中添加下面代码。 任务三：添加导航栏完全采用Bootstrap提供的样式。 任务四：在nav标签同级下面添加显示容的div。 任务五：导航栏将容遮挡住了，需通过css样式进行控制。 1、引入了预编译版的 CSS 和 JavaScript 文件，创建一个Web项目。 学生知识 与能力准备 1、 BootStrap发展背景材料 1、 Bootstrap简介 2、 Bootstrap安装手册和说明 教学材料准备 3、 Bootstrap命令快捷键表 4、 Bootstrap特效基础案例5-10个 5、 相关教学教案 6、 考核容和评价标准 步骤 教学活动过程 主要知识点 教学方法建议 学时 S. . . . . ..
《BootStrap开发技术》课程标准 - 图文
