跳至主要內容
取得 Bootstrap 3 與 4 的安全性更新 Bootstrap

使用 Bootstrap 建立快速、響應式網站

功能強大、可擴展且功能豐富的前端工具組。使用 Sass 建構和客製化，運用預先建立的格線系統和元件，並透過強大的 JavaScript 外掛讓專案更加生動。 

npm i [email protected]
閱讀文件

目前版本 v5.3.8 · 下載 · 所有版本

以您喜歡的方式開始

立即開始使用 Bootstrap 建構專案——使用 CDN、透過套件管理器安裝，或下載原始碼。

閱讀安裝文件

透過套件管理器安裝

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

npm install [email protected]
gem install bootstrap -v 5.3.8

閱讀我們的安裝文件以獲取更多資訊和其他套件管理器。

透過 CDN 引入

當您只需要引入 Bootstrap 編譯後的 CSS 或 JS 時，可以使用 jsDelivr。透過我們簡單的快速開始查看實際效果，或瀏覽範例來快速啟動您的下一個專案。您也可以選擇分別引入 Popper 和我們的 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>

閱讀我們的入門指南

透過我們的官方指南，快速在新專案中引入 Bootstrap 原始檔案。

Webpack Parcel Vite

使用 Sass 客製化一切

Bootstrap 使用 Sass 實現模組化和可客製化的架構。只匯入您需要的元件，啟用漸層和陰影等全域選項，並使用我們的變數、映射、函式和 mixins 撰寫您自己的 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 變數的作用範圍限於相關的 class，可以輕鬆修改。

了解更多 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 map，可以快速輕鬆地客製化。新增、移除或修改任何通用類別從未如此簡單。讓通用類別具備響應式、加入偽類變體，並賦予它們自訂名稱。

快速客製化元件

將我們內建的任何通用類別套用到元件上以客製化其外觀，如下方的導覽範例。有數百個 class 可用——從定位和尺寸到顏色和效果。將它們與 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 map 函式來修改、新增或移除通用類別。 

@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 資訊

Data 屬性 API

既然可以用 HTML，何必多寫 JavaScript？幾乎所有 Bootstrap 的 JavaScript 外掛都具備一流的 data 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 具備十幾個可直接放入任何專案的外掛。一次全部引入，或只選擇您需要的。

Alert

向使用者顯示和隱藏警告訊息。

Button

以程式化方式控制按鈕的啟用狀態。

Carousel

在任何頁面加入幻燈片，包括淡入淡出效果支援。

Collapse

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

Dropdown

建立連結、操作、表單等的選單。

Modal

為您的專案加入彈性且響應式的對話框。

Offcanvas

在任何頁面建立和切換隱藏的側邊欄。

Popover

建立自訂覆蓋層。基於 Popper 建構。

Scrollspy

根據頁面捲動自動更新啟用的導覽連結。

Tab

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

Toast

向訪客顯示和隱藏通知。

Tooltip

以自訂工具提示框取代瀏覽器預設的提示框。基於 Popper 建構。

使用 Bootstrap Icons 個人化

Bootstrap Icons 是一個開源 SVG 圖示庫，擁有超過 1,800 個圖示，每次發布都會新增更多。它們設計用於任何專案，無論您是否使用 Bootstrap 本身。將它們作為 SVG 或圖示字型使用——兩種選項都能提供向量縮放和透過 CSS 輕鬆客製化。

取得 Bootstrap Icons

Bootstrap Icons