typora-root-url: images

02_使用最新的框架Bootstrap

 

2.1 下载Bootstrap

Bootstrap官网： https://getbootstrap.com/

（1）下载编译版Bootstrap（Compiled CSS and JS）推荐

（2）下载源码版Bootstrap（Source files）

2-4

 

2.2 认识 Bootstrap 结构

2.2.1 编译版 Bootstrap文件结构

2-6

注意：所有的JavaScript插件都依赖jQuery库，因此必须在bootstrap.*.js之前引入，在package.json文件中可查看bootstrap支持的jQuery的版本

2.2.2 源码版 Bootstrap文件结构

2-4

 

2-4

 

2.3 安装 Bootstrap

2.3.1 本地安装

移动设备优先，bootstrap首先为移动设备优化代码，然后用CSS媒体查询来扩展组件。为了确保所有设备的渲染和触摸效果，必肱在网页的< head>区添加响应式的视图标签，代码如下：

第1步：安装bootstrap的样式文件

在< head>标签中，使用< link>标签调用CSS样式，这是常见的一种调用方法。另外还需要包含一个viewport的meta标记来进行适当的响应行为的设置。

注意：调用必须遵从先后顺序，自定义的样式用来覆盖bootstrap中的一些默认设置，便于开发者定制本地样式，所以必须在bootstrap.css文件后面引用。

第2步：安装bootstrap.js文件

方法很简单，按照与CSS样式相似的引入方式，把jquery.js和bootstrap.js引入到页面代码中即可。

例如，弹窗插件、工具提示插件、下拉菜单插件等；bootstrap.js是bootstrap的jQuery插件的源文件。

JavaScript脚本文件建议置于文档尾部，即放置在< /body>标签前面。

2.3.2 在线安装(CDN)

Bootstrap官网为Bootstrap构建了CDN加速服务，访问速度快、加速效果明显。可在文档中直接引用。

代码如下：

2.4 案例实训1——设计网页按钮

2-7

 

 

2.5 案例实训2——设计网页轮播组件

轮播是页面中使用频率比较高的组件之一，要使用Bootstrap设计基本组件，需要满足两个条件。

2-8

2019V

2-8

2020V