HTML5+CSS3网页设计与制作课件：配置Bootstrap开发环境

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清单页面后续开发做准备。任务目标

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

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

配置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文件压缩包之后，将其解压缩后查看bootstrap文件夹，即可看到以下目录结构如右图所示：知识与技能准备2、Bootstrap文件上面展示的就是Bootstrap用于生产环境的基本文件结构，预编译文件可以直接使用到任何web项目中。生产环境的Bootstrap提供了：编译好的CSS和JS(bootstrap.*)文件；经过压缩的CSS和JS(bootstrap.min.*)文件；CSS源码映射表(bootstrap.*.map)，可以在某些浏览器的开发工具中使用；含了来自Glyphicons的图标字体。2.2Bootstrap源码和Sass项目Bootstrap源码包括Less、JavaScript和字体文件的源码，并且带有文档。使用时需要Less编译器和并做一些设置工作。Sass项目是Bootstrap从Less到Sass的源码移植项目，用于快速地在Rails、Compass或只针对Sass的项目中引入。上述内容超出了本项目的内容范围，故在此不做详细叙述。（1）分析要下载Bootstrap文档，最可靠的莫过于在GitHub上下载。可以在

（可下载任意版本）或者

（提供了直观的web文档）。考虑到语言的关系，也可以在非官方授权的Bootstrap中文网（

）下载。（2）参考步骤如下：打开Bootstrap中文网（网址

，也可直接进入Bootstrap3中文文档(v3)，网址

），单击“Bootstrap3中文文档(v3.3.7)”（注：版本会持续更新）按钮，进入Bootstrap3中文文档(v3.3.7)页面，单击“下载Bootstrap”按钮，跳转到下载页面（如图2-1-1）。课堂练习2-1-1下载用于生产环境的Bootstrap单击“用于生产环境的Bootstrap”下方的“下载Bootstrap”按钮，在弹出的打开对话框中（如图2-1-2），选择“保存文件”，并通过“浏览”按钮选择保存路径，单击“确定”按钮，完成Bootstrap文件的下载。将下载的“bootstrap-3.3.7-dist.zip”文件解压，在解压的“dist”文件夹下有css、js、fonts文件夹，在文件夹中即可看到上文提到的目录结构中的文件。课堂练习2-1-1下载用于生产环境的Bootstrap图2-1-1Bootstrap下载页面图2-1-2打开文件对话框知识与技能准备3、Bootstrap模板Bootstrap模板是指使用Bootstrap框架的通用页面，其有基础的html代码，并在此基础上关联好了Bootstrap的CSS、JavaScript文件。任务实施本次的任务主要是完成开发工作环境的部署，由于项目1中已经学习了开发环境的开发工具部署，所以这里就只考虑怎样部署Bootstrap了。1、下载Bootstrap文件在课堂练习2-1-1中你已经下载好了，这里就不在叙述。2、创建首页，并引用Bootstrap文件（1）在你的盘符（如D盘）新建文件夹，命名为“web_bootstrap”，将下载并解压好的“dist”文件夹下的3个文件夹（包括css、fonts、js中的所有文件）复制到此。（2）用VisualStudioCode软件打开上面创建的文件夹，并在文件夹根目录新建一个网页，命名为“index.html”。（3）在页面中输入如下代码，完成一个基本的HTML5页的编写。（4）在页