1.使用前的了解
Bootstrap是由美国著名互联网公司Twitter开发一款简洁、直观、强悍的前端框架。
Bootstrap最大特色:让web开发、网站开发变得快速简单——适合响应式布局和移动端网站——使网站开发变得简单。
Bootstrap内部预定义好很多的class和js，用的时候只需要设置相应的class和js即可，适配性能好，可以在不同尺寸的终端设备上良好响应显示——在响应实现上Bootstrap核心精髓是他的栅格系统。
Bootstrap的浏览器兼容性，根据兼容状况和国内情况主要是在考虑IE浏览器兼容性
4.X版本 ——对于IE浏览器，是ie10以上，针对更高端用户，所以考虑客户情况，如果是国企、银行之类，WIN系统相对老旧的，不建议用该版本。
3.X版本 兼容性更宽泛良好——IE浏览器向下兼容到IE8。
2.Bootstrap使用准备——如何使用Bootstrap
Bootstrap是一个框架-首先需要引入。
引入方式分为两种：下载到本地和CDN引入两种。
01-下载到本地，然后引入。
01-a 3.3.7
分为 Bootstrap Source code 和 Sass 版本
常规使用下载 ——Bootstrap文档压缩包
——包含css文件夹 js文件夹 fonts文件夹
css文件夹内特别说下:
**.css原生未压缩的css文件
.map文件~map文件是方便对于压缩文件的调整，定位文件的行。
.min.css 压缩的css文件
theme.css 主题色系文件 意义不大
01-b 4.X版本
分为 Compiled CSS and JS 和 Source files
常规使用Compiled CSS and JS——压缩包内部
分：CSS file 和 JS file 相对3.x无字体文件夹
CSS file内文件
（ 布局 Layout 内容Content 组件Cpmponents 工具 Unilities）
bootstrap.css 布局 内容 组件 工具 全包含
bootstrap.min.css
bootstrap-grid.css 布局-只包-含栅格系统 无布局css 无内容 无组件 工具-的弹性盒模型
bootstrap-grid.min.css
bootstrap-reboots.css 无布局 内容-只有样式重置 无组件 无工具
bootstrap-reboots.min.css
JS files
（Popper 弹出层 jQuery js框架——下载的文件中不包含，需要引入）
bootstrap.bundle.js
bootstrap.bundle.min.js
bootstrap.js
bootstrap.js.min.js
02-CDN引入 - 建议使用
CDN-是内容分发网络，将内容缓存到多地，用户使用时候去调取离自己最近的服务器下载——主要目的在于提升速度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 针对移动端进行适口的属性，让页面尺寸等于客户设备屏幕尺寸~简单说是移动端适配 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 引入css文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- crossorigin发送跨域请求，integrity属性是哈希值-加密的~作用在于安全性——防止CDN篡改文件内容 -两个放一起~~引入进来后，发送请求，带上哈希值，用哈希值匹配，服务器匹配是否正确，否的话不能用。 --> </head> <body> <!-- 引入jQery文件，注意顺序后这个最先~因为两个依赖此文件 --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <!-- bootstrap.min.js中不包含Poper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- 所以这里要引入popper.min.js文件 --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> </body> </html>
发布评论