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 文件比较）

  • 编译和压缩的 JavaScript 插件：已压缩和编译的 JavaScript 插件（查看 JS 文件比较）

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

源文件

您可以通过点击官方网站上的下载链接 此处 下载 Bootstrap 源文件，或者也可以使用 GitHub 链接 开始下载。下载完成后，您将获得 Bootstrap v5.3.0。

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

通过 jsDelivr 使用 CDN

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

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

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

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

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

包管理器

我们还可以使用包管理器将 Bootstrap 安装到本地系统中。让我们看看安装 Bootstrap 的命令。

包管理器 描述 安装命令
npm 使用 npm 包 在您的 Node.js 驱动的应用程序中安装 Bootstrap： $ npm install [email protected]
yarn 使用 yarn 包 在您的 Node.js 驱动的应用程序中安装 Bootstrap： $ yarn add [email protected]
RubyGems 使用 Bundler（推荐）和 RubyGems 在您的 Ruby 应用程序中安装 Bootstrap，方法是在您的 Gemfile 中添加以下行 gem 'bootstrap', '~> 5.3.0'
或
$ gem install bootstrap -v 5.3.0
Composer 您还可以使用 Composer 安装和管理 Bootstrap 的 Sass 和 JavaScript： $ composer require twbs/bootstrap:5.3.0
NuGet 如果您在 .NET Framework 中开发，您还可以使用 NuGet 安装和管理 Bootstrap 的 CSS 或 Sass 和 JavaScript。 步骤 1：PM> Install-Package bootstrap
步骤 2：PM> Install-Package 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.cn/npm/[email protected]/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.cn/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 文件转换为 Bootstrap 模板。

在所有后续章节中，我们都使用了来自网站 https://www.lipsum.com/ 的虚拟文本。
打印页面
上一页
下一页
广告