Bootstrap 4 - 环境设置

Bootstrap 4 是 Bootstrap 的最新版本。 在本节中，将展示如何下载和设置 Bootstrap 4。

在网站中使用 Bootstrap 4 有两种方法

1. 可以使用的第一种方法是通过从 CDN（代表 内容分发网络）插入 Bootstrap 4 来开始使用它。
2. 第二种方法是从 getbootstrap.com 下载它。

使用 CDN

可以通过从 CDN（内容分发网络的缩写）插入 Bootstrap 4 来在网站中使用它。

可以使用下面给出的代码来编译项目中 CSS 和 JS 的 Bootstrap CDN。

在此过程中，还要插入 jQuery 和 Popper.js 的 CDN 版本，它们用于使用不同的 JavaScript 组件，例如模态框、工具提示、弹出框等等。 如果使用的是 JavaScript 的编译版本，则需要在最小化的 Bootstrap JavaScript 之前添加它们。

有些组件广泛地需要 jQuery。 以下是一些这些组件 -

1. 用于使用可关闭的警报
2. 用于借助按钮和复选框或单选按钮切换状态，并使用折叠来切换内容
3. 用于轮播滑块、控件和指示器
4. 用于下拉菜单（Popper.js 可用于完美定位）
5. 用于打开和关闭模态框
6. 用于折叠导航栏
7. 用于工具提示和弹出框（Popper.js 可用于完美定位）
8. 用于使用各种其他组件

下载 Bootstrap 4

可以从下面给出的链接下载 Bootstrap 4：https://bootstrap.ac.cn/docs/4.0/getting-started/download/。

打开链接后，将打开一个窗口

在此窗口中，有两个给定的选项，一个是下载即可使用的 Bootstrap v4.0.0 编译代码，另一个是下载源文件，该源文件通过下载 Bootstrap 4 的源 Sass、JavaScript 和文档文件，并使用个人自己的资产管道来编译 Bootstrap。

下载 - 通过选择此选项，用户可以下载 Bootstrap 的 CSS 和 JavaScript 的预编译和缩小版本。 不包括文档或原始源代码文件。 但是，这不包括文档、源文件或任何其他可选的 JavaScript 依赖项，例如 jQuery 和 Popper.js。

下载源代码 - 通过选择此选项，一个人可以获得最新的 Bootstrap SCSS、JavaScript 源代码和文档文件。 此外，此选项还需要一些额外的工具，例如

1. 支持 Sass 编译器（如 Libsass 或 Ruby Sass）用于在网站中编译 CSS。
2. 用于 CSS 供应商前缀的 Autoprefixer。

预编译的 Bootstrap 4

下载编译后的 Bootstrap 4 版本后，解压缩 ZIP 文件，您将看到以下文件/目录结构 -

有编译后的 CSS 和 JS (bootstrap.*)，以及编译和缩小后的 CSS 和 JS (bootstrap.min.*)。

Bootstrap 4 源代码

Bootstrap 源代码下载包括预编译的 CSS、JavaScript 和字体资源，以及源 Less、JavaScript 和文档。 更具体地说，它包括以下内容等等 -

1. js/ 和 scss/ 下的文件是负责 Bootstrap、CSS 和 JavaScript 的源代码。
2. dist/ 文件夹包含上面给出的预编译下载部分中列出的所有内容。
3. docs/examples/ 仅包含 Bootstrap 文档和 Bootstrap 用法的示例的源代码。
4. 上面给出的源代码中的 less/ 基本上负责 Bootstrap 4 中图标字体的源代码。
5. 除此之外，其他包含的文件还为其他重要组件提供支持，例如包、有关许可证的信息以及与开发相关的任何内容。

借助 Bootstrap 4 创建第一个网页

可以使用下面给出的示例来创建一个非常简单且易于理解的 Bootstrap 4 网页 -

示例

编译此代码后，将显示以下输出

输出