Skip to main content Skip to docs navigation
View on GitHub

下載 (Download)

下載 Boostrap 以獲得編譯好的 CSS 和 JavaScript、原始程式碼或將其加入到您喜好的 npm、RubyGems 軟體套件管理系統中。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去
On this page

編譯好的 CSS 和 JS

下載編譯完成可立即運用的 Bootstrap v5.1.1 加入到你的專案，這些包含了：

這些不包含文件、原始檔案、或任何選用的 JavaScript 相依套件 (如 Popper.js)

下載

原始檔案

透過下載我們的 Sass、JavaScript 原始碼及文檔文件，使用自訂的方式編譯 Bootstrap，這些需要一些額外的工具：

如果您需要 編譯工具，那麼它們被用於開發 Bootstrap 及文檔， 但可能不適合您自己的目的。

下載原始碼

範例

如果您想要下載並查看我們的 範例, 則可以獲取已經構建好的範例：

下載範例

jsDelivr CDN

跳過下載並使用 jsDelivr 將 Boostrap 的 CSS 和 JS 加到你的專案中。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" 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-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>

套件管理工具

用受歡迎的套件管理工具將 Bootstrap 的 原始檔 拉入幾乎任何專案中。不論用的套件管理工具為何，Bootstrap 將 需要一個 Sass 編譯器 和 Autoprefixer 以便獲得與我們的官方編譯版本一致的設置。

npm

用 npm 將 Bootstrap 安裝到基於 Node.js 的應用程式中

npm install bootstrap

const bootstrap = require('bootstrap') 或是 import bootstrap from 'bootstrap' 會將全部的 Bootstrap 插件載入到 bootstrap 物件。bootstrap 模組本身會匯出所有我們的插件。你可以透過頂層目錄下的 /js/dist/*.js 檔案，手動將 Boostrap 插件獨立載入。

Bootstrap 中的 package.json 包含了如下追加的中繼資料：

  • sass - 前往 Bootstrap Sass 原始檔案的路徑。
  • style - 前往使用預設設置預先編譯的 Bootstrap 未壓縮 CSS 的路徑。 (無自定義)
使用 npm 快速入門開始使用 Bootstap！ 前往 twbs/bootstrap-npm-starter 樣板儲存庫了解你如何在自己的 npm 專案中建構與自訂 Bootstrap。 裡面包含了 Sass 編譯器、Autoprefixer、Stylelint、PurgeCSS 和 Bootstrap 圖示。

yarn

用 yarn package 將 Bootstrap 安裝到基於 Node.js 的應用程式中：

yarn add bootstrap

RubyGems

通過向你的 Gemfile 增加如下的命令列，使用 Bundler （推薦）和 RubyGems 將 Bootstrap 安裝到你的 Ruby 應用程式中：

gem 'bootstrap', '~> 5.1.1'

另外，若您沒有使用 Bundler，你可以通過如下的命令：

gem install bootstrap -v 5.1.1

參見 gem 的 README 以瞭解進一步的細節。

Composer

你還可以使用 Composer 安裝和管理 Bootstrap 的 Sass 和 JavaScript:

composer require twbs/bootstrap:5.1.1

NuGet

若你在 .NET 中進行開發，你還可以使用 NuGet 安裝和管理 Bootstrap 的 CSS 或 Sass 和 JavaScript：

Install-Package bootstrap

Install-Package bootstrap.sass