Bootstrap - 环境设置

设置和开始使用 Bootstrap 非常容易。本章将介绍如何下载和安装 Bootstrap 5.3。我们还将讨论 Bootstrap 文件结构，并通过示例演示其用法。

Bootstrap 5.3 中的环境设置有两种方法。

编译CSS和JS
源文件

以下部分将讨论这两个步骤。

编译CSS和JS

您可以在此处下载 Bootstrap v5.3.0 的现成可用编译代码

下载完成后，解压压缩文件夹，我们可以看到以下文件夹结构：

  bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-grid.rtl.css
│   ├── bootstrap-grid.rtl.css.map
│   ├── bootstrap-grid.rtl.min.css
│   ├── bootstrap-grid.rtl.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap-reboot.rtl.css
│   ├── bootstrap-reboot.rtl.css.map
│   ├── bootstrap-reboot.rtl.min.css
│   ├── bootstrap-reboot.rtl.min.css.map
│   ├── bootstrap-utilities.css
│   ├── bootstrap-utilities.css.map
│   ├── bootstrap-utilities.min.css
│   ├── bootstrap-utilities.min.css.map
│   ├── bootstrap-utilities.rtl.css
│   ├── bootstrap-utilities.rtl.css.map
│   ├── bootstrap-utilities.rtl.min.css
│   ├── bootstrap-utilities.rtl.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap.rtl.css
│   ├── bootstrap.rtl.css.map
│   ├── bootstrap.rtl.min.css
│   └── bootstrap.rtl.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

该压缩文件夹包含：

编译和缩小的 CSS 包：编译和缩小的 CSS 包（查看CSS 文件的比较）
Compiled and minified JavaScript plugins:已缩小并编译的 JavaScript 插件（查看JS 文件比较）

不包括文档、源代码和任何额外的 JavaScript 依赖项（例如 Popper）。

源文件

您可以点击官方网站上的下载链接来下载 Bootstrap 源文件，也可以使用 GitHub链接开始下载。下载后您将获得 Bootstrap v5.3.0。

下载 Sass、JavaScript 和文档文件，以使用您的资产管道自定义 Bootstrap。此选项需要额外的工具。

要将 Sass 源文件转换为 CSS 文件，请使用Saas 编译器。
用于 CSS 供应商前缀的Autoprefixer

通过 jsDelivr 的 CDN

CDN（内容交付网络）是 Bootstrap 提供的免费内容交付平台。可以使用 CSS 和 JS 的预定义文件，而无需使用 Bootstrap CDN 将它们安装到本地系统中。您可以通过复制链接并将其添加到您的项目来使用可用的 Bootstrap 代码。

使用 CDN 的唯一条件是本地系统具有互联网连接。开发人员可以通过复制以下链接通过 jsDelivr 访问 Bootstrap CDN 的完整 CSS：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

建议在JS之前添加Popper，最好通过CDN：

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>

包管理器

我们还可以使用 Package Manager 将 Bootstrap 安装到本地系统中。让我们看看安装 Bootstrap 的命令。

包管理器	描述	安装命令
新项目管理	使用 npm 包在 Node.js 支持的应用程序中安装 Bootstrap ：	$ npm 安装 bootstrap@5.3.0
纱	使用yarn包在Node.js驱动的应用程序中安装Bootstrap ：	$ 纱线添加 bootstrap@5.3.0
Ruby	通过将以下行添加到Gemfile中，使用 Bundler（推荐）和RubyGems在 Ruby 应用程序中安装 Bootstrap ：	gem 'bootstrap', '~> 5.3.0' 或 $ gem install bootstrap -v 5.3.0
作曲家	您还可以使用Composer 安装和管理 Bootstrap 的 Sass 和 JavaScript：	$ 作曲家需要 twbs/bootstrap:5.3.0
努格特	如果您使用 .NET Framework 进行开发，还可以使用NuGet安装和管理 Bootstrap 的 CSS或Sass和 JavaScript 。	步骤1： PM>安装包bootstrap 步骤2： PM>安装包bootstrap.sass

HTML模板

使用 Bootstrap 5.3 的基本 HTML 模板如下所示 -

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    <h1>Welcome to Tutorialspoint!</h1>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

在这里您可以看到popper.min.js、bootstrap.bundle.min.js和bootstrap.min.css文件，这些文件用于将普通的 HTM 文件制作为 Bootstrapped 模板。

在所有后续章节中，我们都使用了https://www.lipsum.com/网站上的虚拟文本。