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。此選項需要額外的工具。

要將 Sass 原始檔轉換為 CSS 檔案，請使用 Saas 編譯器。
Autoprefixer 用於 CSS 供應商字首

透過 jsDelivr 使用 CDN

CDN（內容分發網路）是 Bootstrap 提供的免費內容分發平臺。可以使用預定義的 CSS 和 JS 檔案，而無需使用 Bootstrap CDN 將其安裝到本地系統中。您可以透過複製連結並將其新增到您的專案中來使用可用的 Bootstrap 程式碼。

使用 CDN 的唯一條件是在本地系統中具有網路連線。開發人員可以透過複製以下連結訪問 Bootstrap CDN 透過 jsDelivr 提供的完整 CSS：。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

建議在 JS 之前新增 Popper，最好透過 CDN 新增

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

包管理器

我們還可以使用包管理器將 Bootstrap 安裝到本地系統中。讓我們看看安裝 Bootstrap 的命令。

包管理器	描述	安裝命令
npm	使用 npm 包在您的 Node.js 驅動的應用程式中安裝 Bootstrap：	$ npm install bootstrap@5.3.0
yarn	使用 yarn 包在您的 Node.js 驅動的應用程式中安裝 Bootstrap：	$ yarn add bootstrap@5.3.0
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/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" 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" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
  </body>
</html>

在這裡，您可以看到包含的 popper.min.js、bootstrap.bundle.min.js 和 bootstrap.min.css 檔案，它們將一個普通的 HTM 檔案轉換為 Bootstrap 模板。

在所有後續章節中，我們都使用了來自網站 https://www.lipsum.com/ 的虛擬文字。

列印頁面