项目4任务1ppt课件.pptx

《项目4任务1ppt课件.pptx》由会员分享，可在线阅读，更多相关《项目4任务1ppt课件.pptx（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、项目4任务1项目4 使用Bootstrap开源框架快速搭建响应式网页任务4.1 配置Bootstrap开发环境HTML5+CSS3网页布局学校名称：任课老师：联系电话：目录CONTENTS01项目简介02学习目标03任务描述04知识学习与课堂练习05任务实施06任务回顾07任务拓展01 项目还是以“制作一个网页广告单页”工作项目作为承载，要求利用Bootstrap开源框架来完成项目，从而完成Bootstrap开源框架的学习。 如果你熟悉Bootstrap，那么，在8小时内完成你的任务，是可行的！虽然这会限制你的一部分设计实现。 假设一开始你的项目主管希望担任前端工程师的你使用Bootstrap

2、开源框架技术来完成本次项目的前端工作，你将不会因为产品变更而有项目3的麻烦，因为Bootstrap就是移动优先的响应式设计框架。 本项目的编写以版本为例进行，其不支持IE8以下浏览器，即在IE7及以下版本的浏览器中显示会有偏差。项目简介01 网页制作的一般流程如下： 项目开发的基本流程都是一致的。 在本次项目中，你唯一不同的是使用了Bootstrap作为网页开发的技术，以达到快速开发的目的。项目分析分析需求选用并配置开发环境网页开发网页测试发布01 1、能够配置Bootstrap开发环境，编写Bootstrap模板页面； 2、能够根据页面结构，合理使用Bootstrap删格系统进行页面布局；

3、3、能够根据页面内容，合理利用Bootstrap全局样式和组件进行页面制作； 4、能够根据页面交互情况，合理选择Bootstrap的JavaScript插件为页面添加交互。能力目标02 1、能够在学习Bootstrap帮助文档的基础上，下载Bootstrap文件并配置Bootstrap开发环境 2、能够编写基本的Bootstrap模板页面，为实际开发做准备03 本次任务要求通过了解Bootstrap，学习Bootstrap的文档和模板知识，下载并配置用于生产环境的Bootstrap，并编写Bootstrap模板，为后续的开发做准备。学习 1、了解Bootstrap的由来和作用； 2、学习Boo

4、tstrap的文档结构和模板知识。完成 1、下载并配置好用于生产环境的Bootstrap文件； 2、编写Bootstrap模板并进行测试。04知识学习与课堂练习 Bootstrap是为所有开发者、所有应用场景而设计的。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。 Bootstrap包括如下特点： 1.1预处理脚本 1.2一个框架、多种设备 1.3特性齐全1、认识Bootstrap04知识学习与课堂练习 Bootstrap提供以下几种方式帮助我们快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。 2.1用于生产环境的 B

5、ootstrap 2.2Bootstrap源码和Sass项目2、Bootstrap文件04知识学习与课堂练习 （1）分析 要下载Bootstrap文档，最可靠的莫过于在GitHub上下载。可以在https:/ 考虑到语言的关系，也可以在非官方授权的Bootstrap中文网（）下载。 （2）参考步骤 见课本课堂练习4.1-1 下载用于生产环境的 Bootstrap05任务实施 本次的任务主要是完成开发工作环境的部署，由于项目1中已经学习了开发环境的开发工具部署，所以这里就只考虑怎样部署Bootstrap了。 1、下载Bootstrap文件 2、创建首页，并引用Bootstrap文件 操作步骤见课本06任务回顾学习 1、了解Bootstrap的由来和作用； 2、学习Bootstrap的文档结构和模板知识。完成 1、下载并配置好用于生产环境的Bootstrap文件； 2、编写Bootstrap模板并进行测试。07任务拓展 1、Bootstrap与Less 2、Sass感谢聆听！THANK YOU!HTML5+CSS3网页布局学校名称：指导老师：联系电话：