跳至主要內容
新功能！ Bootstrap 永久支援 Bootstrap

使用 Bootstrap 建置快速回應式網站

強大、可擴充且功能豐富的前端工具組。使用 Sass 建置和自訂，利用預建的格線系統和元件，並使用強大的 JavaScript 外掛程式讓專案栩栩如生。 

npm i bootstrap@5.3.3
閱讀文件

目前為 v5.3.3 · 下載 · 所有版本

隨意開始使用

使用 CDN、透過套件管理員安裝或下載原始程式碼，立即開始使用 Bootstrap 建置。

閱讀安裝文件

透過套件管理員安裝

透過 npm、RubyGems、Composer 或 Meteor 安裝 Bootstrap 的原始 Sass 和 JavaScript 檔案。套件管理的安裝不包含文件或我們的完整建置指令碼。您也可以 使用範例儲存庫中的任何範例 來快速啟動 Bootstrap 專案。 

npm install bootstrap@5.3.3
gem install bootstrap -v 5.3.3

閱讀我們的安裝文件以取得更多資訊和額外的套件管理員。

透過 CDN 包含

當您只需要包含 Bootstrap 編譯的 CSS 或 JS 時，您可以使用 jsDelivr。透過我們簡單的 快速開始，或 瀏覽範例，在實際操作中查看，以啟動您的下一個專案。您也可以選擇包含 Popper 和我們的 JS 分開。 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

閱讀我們的入門指南

透過我們的官方指南，開始在新的專案中包含 Bootstrap 的原始檔案。

Webpack Parcel Vite

使用 Sass 自訂所有內容

Bootstrap 利用 Sass 提供模組化且可自訂的架構。僅匯入您需要的元件，啟用全域選項，例如漸層和陰影，並使用我們的變數、對應、函式和混合撰寫您自己的 CSS。

進一步了解自訂

包含所有 Bootstrap 的 Sass

匯入一個樣式表，就能使用我們 CSS 的所有功能。

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

進一步了解我們的 全域 Sass 選項。

包含您需要的內容

自訂 Bootstrap 最簡單的方法—僅包含您需要的 CSS。

// Functions first
@import "../node_modules/bootstrap/scss/functions";

// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";

深入了解 使用 Sass 搭配 Bootstrap。

使用 CSS 變數即時建置和擴充

Bootstrap 5 隨著每個版本演進，更善用 CSS 變數，以設定全域佈景主題樣式、個別元件，甚至實用工具。我們在 :root 層級提供數十個變數，用於設定顏色、字型樣式等，可供任何地方使用。在元件和實用工具中，CSS 變數的範圍限於相關類別，且可輕易修改。

深入了解 CSS 變數

使用 CSS 變數

使用我們的任何 全域 :root 變數 來撰寫新的樣式。CSS 變數使用 var(--bs-variableName) 語法，且子元素可以繼承。

.component {
  color: var(--bs-gray-800);
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
  border-radius: .25rem;
}

.component-header {
  color: var(--bs-purple);
}

透過 CSS 變數自訂

覆寫全域、元件或實用工具類別變數，以自訂 Bootstrap，讓它符合您的喜好。無需重新宣告每個規則，只要一個新的變數值即可。

body {
  --bs-body-font-family: var(--bs-font-monospace);
  --bs-body-line-height: 1.4;
  --bs-body-bg: var(--bs-gray-100);
}

.table {
  --bs-table-color: var(--bs-gray-600);
  --bs-table-bg: var(--bs-gray-100);
  --bs-table-border-color: transparent;
}

元件，請見識實用工具 API

在 Bootstrap 5 中新增，我們的實用工具現在由我們的 實用工具 API 產生。我們將它建置為一個功能豐富的 Sass 地圖，可以快速且輕鬆地自訂。新增、移除或修改任何實用工具類別從未如此簡單。讓實用工具具備回應性、新增偽類別變體，並為它們自訂名稱。

快速自訂元件

將我們包含的任何實用工具類別套用至我們的元件，以自訂它們的外觀，例如以下的導覽列範例。有數百個類別可用—從 定位 和 調整大小 到 顏色 和 效果。將它們與 CSS 變數覆寫混用，以獲得更佳的控制。

<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
  <li class="nav-item" role="presentation">
    <button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
  </li>
</ul>

探索自訂元件

建立並延伸工具程式

使用 Bootstrap 的工具程式 API 來修改任何包含的工具程式，或為任何專案建立自訂工具程式。先匯入 Bootstrap，然後使用 Sass 地圖函式來修改、新增或移除工具程式。

@import "bootstrap/scss/bootstrap";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

探索工具程式 API

強大的 JavaScript 外掛程式，無需 jQuery

新增可切換的隱藏元素、對話框和離畫布選單、提示框和工具提示，以及更多功能，而且無需 jQuery。Bootstrap 的 JavaScript 以 HTML 為主，表示大部分外掛程式都透過 HTML 中的 data 屬性來新增。需要更多控制權嗎？以程式化方式包含個別外掛程式。

深入了解 Bootstrap JavaScript

資料屬性 API

當你可以撰寫 HTML 時，為何還要撰寫更多 JavaScript？Bootstrap 的幾乎所有 JavaScript 外掛程式都具備一流的資料 API，讓你只要新增 data 屬性就能使用 JavaScript。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Dropdown item</button></li>
    <li><button class="dropdown-item" type="button">Dropdown item</button></li>
    <li><button class="dropdown-item" type="button">Dropdown item</button></li>
  </ul>
</div>

深入了解 我們的 JavaScript 作為模組 和 使用程式化 API。

全面的外掛程式組

Bootstrap 具備十幾種外掛程式，你可以將它們新增到任何專案中。一次全部新增，或只選擇需要的部分。

快訊

顯示和隱藏快訊訊息給你的使用者。

按鈕

以程式化方式控制按鈕的活動狀態。

輪播

在任何頁面上新增幻燈片，包括支援淡入淡出。

摺疊

展開和摺疊內容區域，或建立手風琴。

下拉式選單

建立連結、動作、表單等選單。

對話框

在專案中新增靈活且具回應性的對話框。

離畫布

在任何頁面上建立並切換隱藏側邊欄。

提示框

建立自訂疊加層。建構於 Popper 之上。

捲動偵測

根據頁面捲動自動更新活動導覽連結。

標籤

允許 Bootstrap 導覽元件切換內容。

Toast

向訪客顯示和隱藏通知。

工具提示

使用自訂工具提示取代瀏覽器工具提示。建立在 Popper 上。

使用 Bootstrap 圖示進行個人化

Bootstrap 圖示 是一個開放原始碼 SVG 圖示庫，擁有超過 1,800 個字形，且每個版本都會新增更多字形。它們被設計為可以在任何專案中使用，無論您是否使用 Bootstrap 本身。將它們用作 SVG 或圖示字型，這兩個選項都讓您透過 CSS 進行向量縮放和輕鬆自訂。

取得 Bootstrap 圖示

Bootstrap Icons

使用官方 Bootstrap 主題打造屬於您的主題

透過 官方 Bootstrap 主題市集 中的高級主題將 Bootstrap 提升到另一個層級。主題建立在 Bootstrap 上作為它們自己的延伸架構，包含豐富的新元件和外掛程式、文件和強大的建置工具。

瀏覽 Bootstrap 主題

Bootstrap Themes