HTML5+CSS3+JavaScript+Bootstrap网站开发实用技术（第3版）课件 第7章 Bootstrap概述.pptx

第7章Bootstrap概述认识Bootstrap1Bootstrap框架结构2应用案例3小结4

7.1认识Bootstrap7.1.1Bootstrap框架介绍基于HTML、CSS、JavaScript等技术内置了大量的页面样式、可重用的组件、JS插件可以快速构建网站原型，甚至是构建企业级的网站支持响应式的布局设计

7.1认识Bootstrap7.1.2Bootstrap框架的内容全局CSS样式：基本的HTML元素均可以通过设置样式类来得到增强效果，还包括用于布局的栅格系统。组件：包含图像、下拉菜单、导航、警告框、弹出框等多个可重用的组件。JS插件：包含模态框、下拉菜单、标签页、轮播等插件。用户可以直接引用全部插件，也可以逐个引用插件。定制：用户可以定制Bootstrap的组件、LESS变量、jQuery插件来得到用户自定义版本。

7.1认识Bootstrap7.1.3Bootstrap特点响应式布局提供全面的组件和插件支持LESS动态样式使用简单高度可定制性

7.1认识Bootstrap7.1.4Bootstrap版本Bootstrap1、Bootstrap2、Bootstrap3、Bootstrap4等版本。Bootstrap3.3.7是目前广泛使用的版本，移动设备优先、增强的栅格系统、扁平化设计的极简风格等。使用的框架是Bootstrap3.3.7。Bootstrap4是Bootstrap的最新版本

7.2Bootstrap框架结构7.2.1Bootstrap框架的下载Bootstrap软件包类型。DownloadBootstrap从该链接下载的内容是Bootstap编译版的文件。Downloadsource从该链接下载的是Bootstap框架的源码DownloadSass从该链接下载的是Sass源码预编译包。

7.2Bootstrap框架结构7.2.2Bootstrap框架的结构css和js文件夹中是编译好的CSS和JS(bootstrap.*)文件经过压缩的CSS和JS(bootstrap.min.*)文件fonts文件夹包含了来自Glyphicons的图标字体文件

7.2Bootstrap框架结构7.2.3WebStorm开发环境WebStorm被称为“Web前端开发神器”“最强大的HTML5编辑器”WebStorm开发Web应用第一步是创建项目，默认的项目类型是“空项目”，也可以根据需求选择创建的项目类型；第二步是创建文件，选择创建HTML文件、CSS文件或JavaScript文件等。

7.2Bootstrap框架结构7.2.4在项目中引入Bootstrap框架使用script标记引入JavaScript文件使用＜link＞标记引入CSS文件Bootstrap的JS效果都是基于jQuery的，如果要使用Bootstrap的JS动态效果的话，需要先引入jQuery

7.3应用案例7.3.1在页面中使用组件路径导航组件（Breadcrumbs）的使用

7.3应用案例7.3.2基于Bootstrap文档示例创建的网页应用了CSS全局样式和组件来创建网页。其中，导航条（Navbar）元素的示例应用于导航部分巨幕（Jumbotron）元素应用于内容部分图片（Images）元素的应用栅格系统（GridSystem）的应用

7.3应用案例

小结Bootstrap是一个流行的、用于快速开发Web应用程序的前端框架Bootstrap3.3.7是目前广泛使用的版本，本书使用的框架是Bootstrap3.3.7使用WebStorm开发基于Bootstrap的中文网的文档和示例来搭建一个Web应用

作业1.简答题（1）下载Bootstrap框架时，编译版的文件和源码文件在使用时有什么不同？（2）示例7-1和示例7-2在引用Bootstrap框架的代码上，有所不同，主要区别在于下面代码，为什么在示例7-2中未引用下面的代码？scriptsrc=../jQuery3/jQuery-3.1.1.min.js/scriptscriptsrc=../js/bootstrap.min.js/script（3）查阅文档，比较Bootstrap3和Bootstrap4的区别。