初识 Bootstrap（前端开发框架）
- 参考
- Bootstrap
- 特点
- 获取
- 目录结构
- jQuery 与 Popper
- 准备工作
- 包含 jQuery 与 Popper
- meta
- box-sizing
- 基本模板
- 无注释版本
- 注释版本
参考
| 项目 | 描述 |
|---|---|
| Bootstrap 官方教程 | https://getbootstrap.net/docs/getting-started/introduction/ |
| 百度百科 | https://baike.baidu.com/ |
| 搜索引擎 | Bing |
| 哔哩哔哩 | Bootstrap4从入门到实战 |
Bootstrap
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作，基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
特点
- Bootstrap 集成了各种前端组件库，用于创建图像、下拉菜单以及导航等内容。
- Bootstrap 可以用于构建响应式前端布局，移动设备优先的 WEB 项目的开发中。
- Bootstrap 提供了许多实用性的 jquery 插件，这些插件能使开发者快速开发 Web 中各种常见的特效。你可以逐个包含这些插件，也可以直接将这些插件全部包含。
- 开发人员可以通过定制 Bootstrap 中的组件、LESS 变量以及 jQuery 插件来得到一套自定义的 Bootstrap 。
获取
- 官网
其中：
源码包包含了编译版中的所有文件并在此基础上有所扩充，这里我将下载 Bootstrap 的编译版本。
- npm
npm install bootstrap
在 Bootstrap 官方下载页 中还存在其他获取方式，欢迎前往。
目录结构
获取到编译版本后的文件将其解压缩后得到的目录结构为（不同版本的 Bootstrap 文件的目录结构可能略有不同）：
bootstrap-4.4.1-dist├── css│ ├── bootstrap.css│ ├── bootstrap.css.map│ ├── bootstrap-grid.css│ ├── bootstrap-grid.css.map│ ├── bootstrap-grid.min.css│ ├── bootstrap-grid.min.css.map│ ├── bootstrap.min.css│ ├── bootstrap.min.css.map│ ├── bootstrap-reboot.css│ ├── bootstrap-reboot.css.map│ ├── bootstrap-reboot.min.css│ └── bootstrap-reboot.min.css.map└── js├── bootstrap.bundle.js├── bootstrap.bundle.js.map├── bootstrap.bundle.min.js├── bootstrap.bundle.min.js.map├── bootstrap.js├── bootstrap.js.map├── bootstrap.min.js└── bootstrap.min.js.map
jQuery 与 Popper
在使用 Bootstrap 时，你需要包含 jQuery 及 Popper （ Popper 用于支持工具提示 tooltip 和弹出框 popover 功能，如果你用不到这些功能，可以不选择导入 Popper） 的 JavaScript 文件。在导入时需要按照如下顺序进行导入：
jQuery > Popper > Bootstrap
当然，你可以选择使用含有 bundle 字段的 Bootstrap 的 JavaScript 文件并包含 jQuery 的 JavaScript 文件。Bootstrap 中的部分版本存在含有 bundle 字段的 Bootstrap 的 JavaScript 文件，这类文件中包含了 Popper 的 JavaScript 文件。
| JS File | Popper | jQuery |
|---|---|---|
| bootstrap.bundle.js | 包含 | 不包含 |
| bootstrap.bundle.min.js | 包含 | 不包含 |
| bootstrap.js | 不包含 | 不包含 |
| bootstrap.min.js | 不包含 | 不包含 |
准备工作
如果你需要在你的 WEB 项目中使用 Bootstrap，你需要进行如下的准备工作。
包含 jQuery 与 Popper
首先你需要获取 jQuery 及 Popper 文件，并将其包含于项目文件中，具体的包含规则已在本文前面讲述。
meta
Bootstrap 是移动优先开发的一种策略，它首先为移动设备优化代码，然后根据需要使用 CSS 媒体查询扩展组件。为了确保适当的渲染和触摸缩放所有设备，添加响应的 viewport meta 标签到您的 <head> 标签中。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
其中：
| 项目 | 描述 |
|---|---|
| viewport | viewport 指视口，视口是浏览器中用来显示网页的那部分区域。 |
| width | width 表示视口的宽度；width=device-width 用于将页面宽度设置为设备屏幕的宽度。 |
| initial-scale | initial-scale 指初始缩放比例；initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。 |
| shrink-to-fit | 该属性暂不了解其功能，如果有朋友清楚，还请不吝赐教。 |
box-sizing
为了让 CSS 中的尺寸设置更加直观，我们将全局的 box-sizing 从 content-box 调整为 border-box。这样可以确保 padding 的设置不会影响计算元素的最终宽度，但是会导致某些第三方软件（例如 Google Maps 和 Google Custom Search Engine）出现兼容性问题。
在为数不多的情况（遇到兼容性问题时）下，你需要专门覆盖这一些设置，可以使用如下示例代码：
.selector-for-some-widget {box-sizing: content-box;
}
利用上述代码片段，嵌套的元素（包括通过 ::before 和 ::after 生成的内容）都将继承 .selector-for-some-widget 所指定的 box-sizing 值。
基本模板
无注释版本
在准备后，得到的 HTML 文件应与如下内容类似：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"><title>Document</title><link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
</head>
<body><script src="../../lib/jquery-3.6.3.js"></script><script src="../../lib/popper-2.11.6.js"></script><script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script></body>
</html>
注释版本
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 移动适配优先 --><meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"><title>初识 Bootstrap</title><!-- 请将 bootstrap.css 文件在其他 CSS 文件导入前进行导入 --><link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
</head>
<body><!-- 先导入 jQuery，再导入 Popper，最后导入 Bootstrap --><script src="../../lib/jquery-3.6.3.js"></script><script src="../../lib/popper-2.11.6.js"></script><script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script></body>
</html>
