HTML5+CSS3网页设计与制作课件：使用Bootstrap开源框架快速搭建响应式网页.pptx

HTML5+CSS3网页设计与制作

使用Bootstrap开源框架快速搭建响应式网页

本项目通过使用Bootstrap开源框架完成D清单网页的宣传单页的制作来学习Bootstrap前端开源框架。Bootstrap一种可以高效完成页面制作的前端开源工具，虽然它会在一定程度上限制网页设计的实现，但其移动优先的响应式设计框架可以大幅提高制作效率，为设计者节省大量的时间。项目目标

项目情境与项目1一致，唯一的区别是要求你在当天就要完成并上线。由于时间紧迫，公司明确可以使用Bootstrap等免费的前端开源框架辅助开发。D清单页面效果图可查看项目1的项目情境。项目情境

网页制作的一般流程如下：项目开发的基本流程都是一致的。在本次项目中，你唯一不同的是使用了Bootstrap框架作为网页开发的技术，以达到快速开发的目的。与前面的开发不一样的是，HTML标签（网页内容）和CSS样式设置是同步进行的。其实在实际的开发中，两种开发流程互有优劣，你可以选择你需要的方式进行。为避免知识的重复讲解，分析需求和选用并配置开发环境在本项目中默认你已经完成了。我们将直接从学习并使用Bootstrap开始，逐步完成D清单网页的制作！项目分析项目发布需求分析规划设计实施测试交付

根据“移动优先”原则，我们需要制定项目完成的计划：项目分析时间段1时间段2时间段3时间段4时间段5分析规划实施阶段1移动端内容制作阶段2移动端格式制作阶段3响应式制作测试与交付D清单前端开发甘特图时间进度任务

能够在学习Bootstrap帮助文档的基础上，下载Bootstrap文件并配置Bootstrap开发环境能够编写基本的Bootstrap模板页面，为D清单页面后续开发做准备。任务目标任务1配置Bootstrap开发环境

本次任务要求通过学习Bootstrap的文档和模板知识，下载并配置用于生产环境的Bootstrap，并编写Bootstrap模板，为后续的开发做准备。任务描述图2-1Bootstrap开发环境配置后的模板代码和测试页面任务1配置Bootstrap开发环境

任务要求下载并配置好用于生产环境的Bootstrap文件，编写Bootstrap模板并进行测试，需要：学习Bootstrap的由来和作用；学习Bootstrap的文档结构和模板知识；下载Bootstrap文档；编写模板页面，同时使用该页面测试配置效果。任务分析任务1配置Bootstrap开发环境

知识与技能准备Bootstrap是由Twitter工程师推出的前端开发框架，是一款强大的开源前端开发工具包，具有强大的自定义功能，Bootstrap一经推出大受欢迎，国内也有不少网站开始使用Bootstrap开发。Bootstrap全部托管于Github（一个代码托管平台和开发者社区，开发者可以在Github上创建自己的开源项目并与其他开发者协作编码。创业公司可以用它来托管软件项目。开源项目可以免费托管，私有项目需付费），用户可以直接访问Github项目。Bootstrap在Github托管地地址：。

知识与技能准备1、认识BootstrapBootstrap是为所有开发者、所有应用场景而设计的。Bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。Bootstrap包括如下特点：1.1预处理脚本虽然可以直接使用Bootstrap提供的CSS样式表，但是Bootstrap的源码是基于最流行的CSS预处理脚本Less（Less是一门预处理语言，支持变量、mixin、函数等额外功能，本书不涉及此知识）和Sass开发的。你可以采用预编译的CSS文件快速开发，也可以从源码定制自己需要的样式。1.2一个框架、多种设备通过Bootstrap已经写好的CSS媒体查询（MediaQuery）样式，所有的网站和应用都能在Bootstrap的帮助下通过同一份代码快速、有效适配手机、平板、PC设备。1.3特性齐全Bootstrap提供了全面、美观的文档。你能找到关于HTML元素、HTML和CSS组件、jQuery插件方面的所有详细英文文档（网址）。由于语言的关系，可以查阅Bootstrap中文网（非官网）的V3版本帮助文档（）来详细了解，我们在后继的学习中会基于这个版本来开展。

知识与技能准备2、Bootstrap文件Bootstrap提供以下几种方式帮助我们快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。2.1用于生产环境的Bootstrap用于生产环境的Bootstrap是编译好并压缩后的CSS、JavaScript和字体文件，不包含文档和源码文件。下载Bootstrap文件压缩包之后，将其解