下載（Download）

下載 Bootstrap 以取得編譯後的 CSS 和 JavaScript、原始碼，或透過您喜愛的套件管理器（如 npm、RubyGems 等）引入。

本頁內容

編譯後的 CSS 和 JS（Compiled CSS and JS）

下載可直接使用的 Bootstrap v5.3.8 編譯程式碼，輕鬆加入您的專案，包含：

編譯並壓縮的 CSS 套件（請參閱 CSS 檔案比較）
編譯並壓縮的 JavaScript 外掛（請參閱 JS 檔案比較）

這不包含文件、原始檔案，或任何可選的 JavaScript 相依套件（如 Popper）。

下載

原始檔案（Source files）

透過下載我們的原始 Sass、JavaScript 和文件檔案，使用您自己的資源管道來編譯 Bootstrap。此選項需要一些額外的工具：

Sass 編譯器用於將 Sass 原始檔案編譯成 CSS 檔案
Autoprefixer 用於 CSS 瀏覽器前綴

如果您需要我們完整的建置工具，它們是用於開發 Bootstrap 及其文件的，但可能不適合您自己的用途。

下載原始碼

範例（Examples）

如果您想下載並檢視我們的範例，可以取得已建置好的範例：

下載範例

透過 jsDelivr CDN（CDN via jsDelivr）

跳過下載，使用 jsDelivr 將 Bootstrap 編譯後的 CSS 和 JS 的快取版本傳送到您的專案。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

如果您使用我們編譯的 JavaScript 並希望單獨引入 Popper，請透過 CDN 在我們的 JS 之前加入 Popper。

<script src="https://cdn.jsdelivr.net/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/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>

替代 CDN（Alternative CDNs）

我們推薦 jsDelivr，我們自己的文件也使用它。然而，在某些情況下——例如在某些特定國家或環境中——您可能需要使用其他 CDN 提供商，如 cdnjs 或 unpkg。

您會在這些 CDN 提供商上找到相同的檔案，但 URL 不同。使用 cdnjs，您可以使用這個 Bootstrap 套件直接連結，複製並貼上任何 Bootstrap 版本中每個發布檔案的現成 HTML 片段。

如果給定檔案的 SRI 雜湊值不同，您不應該使用該 CDN 的檔案，因為這表示該檔案已被他人修改。

請注意，您應該比較相同長度的雜湊值，例如 sha384 與 sha384 比較，否則它們預期會不同。因此，您可以使用線上工具如 SRI Hash Generator 來確保給定檔案的雜湊值相同。或者，假設您已安裝 OpenSSL，您可以從命令列達成相同目的，例如：

openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A

套件管理器（Package managers）

使用一些最流行的套件管理器，將 Bootstrap 的原始檔案引入幾乎任何專案。無論使用哪種套件管理器，Bootstrap 都需要 Sass 編譯器和 Autoprefixer，以符合我們官方編譯版本的設定。

npm

使用 npm 套件在您的 Node.js 應用程式中安裝 Bootstrap：

npm install [email protected]

const bootstrap = require('bootstrap') 或 import bootstrap from 'bootstrap' 將會把所有 Bootstrap 的外掛載入到 bootstrap 物件上。 bootstrap 模組本身匯出我們所有的外掛。您可以透過載入套件頂層目錄下的 /js/dist/*.js 檔案來手動單獨載入 Bootstrap 的外掛。

Bootstrap 的 package.json 在以下鍵值下包含一些額外的中繼資料：

sass - Bootstrap 主要 Sass 原始檔案的路徑
style - Bootstrap 使用預設設定（無自訂）編譯的未壓縮 CSS 路徑

透過 npm 使用我們的入門專案開始使用 Bootstrap！ 前往 Sass & JS 範例範本儲存庫，了解如何在您自己的 npm 專案中建置和自訂 Bootstrap。包含 Sass 編譯器、Autoprefixer、Stylelint、PurgeCSS 和 Bootstrap Icons。

yarn

使用 yarn 套件在您的 Node.js 應用程式中安裝 Bootstrap：

yarn add [email protected]

Yarn 2+（又稱 Yarn Berry）預設不支援 node_modules 目錄：使用我們的 Sass & JS 範例需要一些調整：

yarn config set nodeLinker node-modules # 使用 node_modules 連結器
touch yarn.lock # 建立一個空的 yarn.lock 檔案
yarn install # 安裝相依套件
yarn start # 啟動專案

Bun

使用 Bun CLI 在您的 Bun 或 Node.js 應用程式中安裝 Bootstrap：

bun add [email protected]

RubyGems

在您的 Ruby 應用程式中使用 Bundler（推薦）和 RubyGems 安裝 Bootstrap，將以下行加入您的 Gemfile：

gem 'bootstrap', '~> 5.3.8'

或者，如果您不使用 Bundler，可以執行以下命令安裝 gem：

gem install bootstrap -v 5.3.8

查看 gem 的 README 以獲得更多詳細資訊。

Composer

您也可以使用 Composer 安裝和管理 Bootstrap 的 Sass 和 JavaScript：

composer require twbs/bootstrap:5.3.8

NuGet

如果您使用 .NET Framework 開發，也可以使用 NuGet 安裝和管理 Bootstrap 的 CSS 或 Sass 和 JavaScript。較新的專案應該使用 libman 或其他方法，因為 NuGet 是為編譯程式碼設計的，而非前端資源。

Install-Package bootstrap

Install-Package bootstrap.sass

IntelliSense 擴充功能（IntelliSense extension）

安裝社群維護的 IntelliSense 擴充功能，為 Visual Studio Code 取得 Bootstrap 類別的 IntelliSense 自動完成功能。

在 VS Code Marketplace 中檢視