第8章 综合项目-黑马财富.pptx

第8章 综合项目—黑马财富 长沙民政职业技术学院 学习目标 请简述Bootstrap包中提供了哪些内容。   请简述Bootstrap 栅格系统的工作原理。 提问 Bootstrap包中提供的内容包括基本结构、CSS、布局组件、JavaScript插件等，具体如下： 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。 CSS：Bootstrap 自带全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的栅格系统。 布局组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。 JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。可以直接包含所有的插件，也可以逐个包含这些插件。 定制：开发人员可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到一套自定义的版本。 Bootstrap 栅格系统的工作原理如下所示： “行”必须包含在布局容器.container类或.container-fluid类中，以便为其赋予合适的排列（aligment）和内补（padding）。 通过“行（row）”在水平方向创建一组“列（column）”，并且，只有“列（column）”可以作为“行（row）”的直接子元素。 行使用的样式“.row”，列使用样式“col-*-*”，我们的内容应当放置于“列（column）”内，列大于12时，将另起一行排列。 Bootstrap 栅格系统为不同屏幕宽度定义了不同的类。 作业点评 项目简介 知识点概述 本项目名称为“黑马财富”，是一个跨平台响应式的投资理财网站首页，首先为读者介绍项目的基本功能、页面结构和项目的目录结构。 项目功能展示 本项目支持PC端及移动端屏幕的自适应，这里移动端主要以iPad和iPhone6 Plus的页面效果为主，网页在PC端的页面效果上半部分如图所示。 项目简介 用鼠标向下滑动页面可以看到网页下半部分，如图所示 项目功能展示 项目简介 项目简介 项目功能展示 使用Chrome的开发者工具，测试该页面在iPad上的页面效果如图所示。 项目简介 项目功能展示 在iPad的页面中，按下鼠标，模拟手指向上滑动屏幕，通过这种方式，可以查看页面下半部分的效果，如图所示。 完成视口的配置。 项目简介 项目功能展示 一个项目或是产品从开始到上线都要遵循开发流程，才能够按部就班的完成。通常情况下，一个项目或产品的开发流程具体如下所示： 产品创意 结合公司发展方向及战略目标，提出产品创意。简而言之，我们要做一个什么产品，为什么要做这个产品。 产品原型 产品原型的设计包括功能、页面、最重要的是用户体验。该工作通常由产品经理完成。 项目开发流程 项目简介 美工设计 美工根据产品经理提供的原型图实现符合原型与审美的 psd 图。 前端实现 前端工程师拿到美工设计好的 psd 图，负责具体的 html、css 静态页面的实现，实现JavaScript动态特效、动态数据的绑定和交互。 后端实现 实现数据处理、业务逻辑代码。 测试、试运行、上线 项目开发流程 项目简介 项目简介 项目目录和文件结构 （1）itheima：itheima作为顶级目录名称，也是项目的名称，在该目录下有四个目录分别为css、fonts、images和js，以及该项目的站的入口index.html文件。 （2）css: css文件目录，在该目录下有一个文件index.css，index.css用于添加自定义的样式代码。 （3）fonts:字体文件目录，用于存放项目的引用的字体文件。 （4）images: 图片文件目录，用于存放项目的引用的图片文件。 （5）js:javaScript文件目录，该目录下有三个文件分别为index.js、index.json和swipe.js，三个文件的说明如下所示。 index.js:用于添加处理轮播图等在不同设备上展示效果相关的JavaScript代码。 index.json:用于存放动态轮播图需要应用的JSON字符串。 swipe.js:用于处理触摸屏滑动操作的JavaScript代码。 项目简介 项目目录和文件结构 （6）lib:第三方框架目录，用于存放引用第三方API的内容，包括bootstrap、html5shiv、jquery、respond和underscore。 （7）bootstrap:该目录下是引用的响应式开发框架Bootstrap API。 （8）html5shiv:该目录下包含文件html5shiv.min.js，通常在某个浏览器不支持HTML5标签时使用。 （