Bootstrap 简明教程

Bootstrap - Environment Setup

在 Bootstrap 中进行设置并开始使用非常容易。本章节将解释如何下载和设置 Bootstrap 5.3。我们还将讨论 Bootstrap 文件结构，并通过一个示例展示其用法。

在 Bootstrap 5.3 中有两种方法来完成环境设置。

Compiled CSS and JS
Source Files

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

Compiled CSS and JS

您可以下载已编译好的、可以使用的 Bootstrap v5.3.0 代码 here

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

  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

此压缩文件夹包含：

Compiled and minified CSS bundles: 已编译和已缩小的 CSS 组合（查看 comparison of CSS files ）
Compiled and minified JavaScript plugins: 已缩小和已编译的 JavaScript 插件（查看 JS files comparison ）

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

Source files

您可以通过点击官方网站 here 上的下载链接下载 Bootstrap 源文件，或者还可使用 GitHub link 开始下载。下载后，您将得到 Bootstrap v5.3.0。

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

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

CDN via jsDelivr

CDN（内容分发网络）是 Bootstrap 提供的一个免费内容分发平台。通过使用 Bootstrap CDN，可以在本地系统中不安装的情况下使用 CSS 和 JS 的预定义文件。您可以通过复制链接并将其添加到您的项目来使用可用的 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 之前（最好通过 CDN）添加 Popper：

<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 managers

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

Package Manager

Description

Commands to install

npm

使用 npm package: 将 Bootstrap 安装到您的 Node.js 支持的应用程序中

$ npm install bootstrap@5.3.0

yarn

使用 yarn package: 将 Bootstrap 安装到您的 Node.js 支持的应用程序中

$ yarn add bootstrap@5.3.0

RubyGems

在你的 Ruby 应用中使用 Bundler （推荐）和 RubyGems 安装 Bootstrap，在你的 Gemfile 中添加以下行：

gem 'bootstrap', '~> 5.3.0’OR$ 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。

Step1: PM> Install-Package bootstrap*步骤 2:* PM> Install-Package bootstrap.sass

HTML Template

一个使用 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 文件，用于将普通的 HTML 文件变成 Bootstrap 模板。