Bootstrap 简明教程

Bootstrap - Environment Setup

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

It is very easy to setup and start using Bootstrap. This chapter will explain how to download and setup Bootstrap 5.3. We will also discuss the Bootstrap file structure, and demonstrate its usage with an example.

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

There are two ways to do the environment Setup in Bootstrap 5.3.

Compiled CSS and JS
Source Files

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

Following sections will discuss about these two steps.

Compiled CSS and JS

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

You can download ready to use compiled code of Bootstrap v5.3.0 here

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

Once downloaded, unzip the compressed folder and we see the following folder structure:

  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

此压缩文件夹包含：

This compressed folder contains:

Compiled and minified CSS bundles: Bundles of compiled and minified CSS (view a comparison of CSS files)
Compiled and minified JavaScript plugins: JavaScript plugins that have been minified and compiled (view a JS files comparison)

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

Documentation, source code, and any extra JavaScript dependencies like Popper are not included.

Source files

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

You can download Bootstrap source files by clicking on the download link on official site here, or you can also use the GitHub link to start downloading . You will get the Bootstrap v5.3.0 after this download.

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

Download Sass, JavaScript, and documentation files to customize Bootstrap using your asset pipeline. Extra tools are needed for this option.

For converting Sass source files into CSS files, use the Saas compiler.
Autoprefixer for CSS vendor prefixing

CDN via jsDelivr

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

CDN (Content Delivery Network) is a free content delivery platform offered by Bootstrap. Predefined files of CSS and JS can be used without installing them in your local system using the Bootstrap CDN. You can use available Bootstrap codes by copying the link and adding them to your project.

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

The only condition to use the CDN is to have internet connectivity in your local system. Developers can access the complete CSS for Bootstrap CDN via jsDelivr by copying the below link:.

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

It is advised to add Popper before JS, preferably via 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 managers

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

We can also install Bootstrap into the local system using Package Manager. Let’s see the commands to install Bootstrap.

Package Manager

Description

Commands to install

npm

Install Bootstrap in your Node.js powered apps with the npm package:

$ npm install bootstrap@5.3.0

yarn

Install Bootstrap in your Node.js powered apps with the yarn package:

$ yarn add bootstrap@5.3.0

RubyGems

Install Bootstrap in your Ruby apps using Bundler (recommended) and RubyGems by adding the following line to your Gemfile:

gem 'bootstrap', '~> 5.3.0' OR $ gem install bootstrap -v 5.3.0

Composer

You can also install and manage Bootstrap’s Sass and JavaScript using Composer:

$ composer require twbs/bootstrap:5.3.0

NuGet

If you develop in .NET Framework, you can also install and manage Bootstrap’s CSS or Sass and JavaScript using NuGet.

Step1: PM> Install-Package bootstrap*Step2:* PM> Install-Package bootstrap.sass

HTML Template

一个使用 Bootstrap 5.3 的基本 HTML 模板类似于此 −

A basic HTML template using Bootstrap 5.3 would look like this −

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

You can edit and try running this code using *Edit & Run *option.

<!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 模板。

Here you can see the popper.min.js, bootstrap.bundle.min.js and bootstrap.min.css files that are included to make a normal HTM file to the Bootstrapped Template.