跳到主要內容
Check
v5.2 中的新功能 CSS 變量、響應式畫布、新實用程序等等！ 引導程序

使用 Bootstrap 構建快速響應的網站

功能強大、可擴展且功能豐富的前端工具包。使用 Sass 構建和自定義，利用預構建的網格系統和組件，並使用強大的 JavaScript 插件使項目栩栩如生。

npm i [email protected]
閱讀文檔

當前v5.2.1 · 下載 · v4.6.x 文檔 · 所有版本

以您想要的任何方式開始

直接使用 Bootstrap 進行構建——使用 CDN，通過包管理器安裝它，或者下載源代碼。

閱讀安裝文檔

通過包管理器安裝

通過 npm、RubyGems、Composer 或 Meteor 安裝 Bootstrap 的源 Sass 和 JavaScript 文件。包管理安裝不包括文檔或我們的完整構建腳本。您還可以使用我們的 npm 模板 repo通過 npm 快速生成 Bootstrap 項目。

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

閱讀我們的安裝文檔以獲取更多信息和其他包管理器。

通過 CDN 包含

當只需要包含 Bootstrap 編譯好的 CSS 或 JS 時，可以使用jsDelivr。通過我們的簡單快速入門查看它的實際效果，或瀏覽示例以快速啟動您的下一個項目。您也可以選擇分別包含 Popper 和我們的JS。

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

閱讀我們的入門指南

借助我們的官方指南，快速將 Bootstrap 的源文件包含在新項目中。

網頁包 包裹 維特

使用 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/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";

了解有關將 Bootstrap 與 Sass 一起使用的更多信息。

使用 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;
}

組件，滿足 Utility API

Bootstrap 5 中的新功能，我們的實用程序現在由我們的Utility API生成。我們將其構建為功能豐富的 Sass 地圖，可以快速輕鬆地自定義。添加、刪除或修改任何實用程序類從未如此簡單。使實用程序響應，添加偽類變體，並給他們自定義名稱。

了解有關實用程序的更多信息 探索定制組件

快速定制組件
// Create and extend utilities with the Utility API

@import "bootstrap/scss/bootstrap";

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

無需 jQuery 的強大 JavaScript 插件

輕鬆添加可切換的隱藏元素、模式和 offcanvas 菜單、彈出框和工具提示等等——所有這些都無需 jQuery。Bootstrap 中的 JavaScript 是 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><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
  </ul>
</div>

了解更多關於我們作為模塊的 JavaScript和使用編程 API 的信息。

全面的插件集

Bootstrap 具有十幾個插件，您可以將它們放入任何項目中。一次將它們全部放入，或者只選擇您需要的那些。

警報

向您的用戶顯示和隱藏警報消息。

按鈕

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

旋轉木馬

將幻燈片添加到任何頁面，包括對淡入淡出的支持。

坍塌

展開和折疊內容區域，或創建手風琴。

落下

創建鏈接、操作、表單等菜單。

模態

為您的項目添加靈活且響應迅速的對話框。

畫布外

構建隱藏的側邊欄並將其切換到任何頁面。

彈出框

創建自定義疊加層。建立在波普爾之上。

捲軸間諜

根據頁面滾動自動更新活動導航鏈接。

標籤

允許 Bootstrap 導航組件切換內容。

吐司

向訪問者顯示和隱藏通知。

工具提示

用自定義工具提示替換瀏覽器工具提示。建立在波普爾之上。

使用引導圖標對其進行個性化

Bootstrap Icons是一個開源 SVG 圖標庫，包含超過 1,500 個字形，每個版本都會添加更多字形。它們被設計用於任何項目，無論您是否使用 Bootstrap 本身。將它們用作 SVG 或圖標字體——這兩個選項都為您提供矢量縮放和通過 CSS 輕鬆自定義。

獲取引導圖標

引導圖標

使用官方 Bootstrap 主題讓它成為你的

使用來自官方 Bootstrap 主題市場的高級主題將 Bootstrap 提升到一個新的水平。主題作為它們自己的擴展框架構建在 Bootstrap 之上，包含豐富的新組件和插件、文檔和強大的構建工具。

瀏覽引導主題

引導主題