View on GitHub

簡介 (Introduction)

Bootstrap 是世界上最受歡迎的框架，用於建立響應式、行動優先的網站。透過 jsDelivr 和範本初學頁面開始吧。

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

立即上課去

On this page

快速開始

想要快速地將 Bootstrap 添加到你的專案中嗎? 快使用免費開源的 jsDelivr CDN。需要使用套件管理工具或是下載原始檔嗎? 前往下載頁面。

CSS

將樣式表 <link> 複製-貼上到 <head> 中其他所有的樣式表之前，以便載入 Bootstrap 的 CSS。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

JS

我們的許多元件都需使用 JavaScript 才可以運行。具體來說，它們需要我們自己的 JavaScript 插件和 Popper。將以下 <script> 之一放在頁面末尾， </body> 結尾標籤之前以啟用它們。

Bundle

使用我們兩個 bundle 中的其中一個來嵌入所有的 Bootstrap JavaScript 插件。bootstrap.bundle.js 和 bootstrap.bundle.min.js 都包含了 Popper 以使用我們的工具提示 (Tooltips) 和彈出提示框 (Popovers)。請參閱內容以獲得更多關於 Bootstrap 包含內容的資訊。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

分離 (Separate)

如果決定使用分離的腳本作為解決方案，則需要先放入 Popper (如果你使用工具提示或是彈出提示框)，然後再放入我們的 JavaScript 插件。

<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>

模組 (Modules)

如果你使用 <script type="module">，請參閱使用 Bootstrap 作為模組的部分。

元件 (Components)

是否好奇有哪些元件明確的需要使用我們的 JavaScript 和 Popper? 點選下方與顯示元件相關的連結。如果你還不確定總體網頁的架構，請繼續閱讀示例頁面的模板。

顯示需要 Javascript 的元件

可以關閉的警告
用於切換狀態和 checkbox / radio 功能的按鈕 (Buttons)
用於所有頁面滑動行為、控制以及指示器的幻燈片 (Carousel)
用於切換內容可見性的折疊選單 (Collapse)
用於顯示與定位的下拉選單 (Dropdown) (同時需要 Popper)
用於顯示、定位與滑動行為的互動視窗 (Modals)
用於拓展折疊選單 (Collapse) 插件以實現響應行為的導覽列 (Navbar)
用於顯示、定位和滾動行為的畫布 (Offcanvas)
用於顯示與關閉的吐司 (Toasts)
用於顯示與定位的工具提示 (Tooltips) 和彈跳視窗 (popovers) (同時需要 Popper)
用於滾定行為以及導覽更新的滑動監控 (Scrollspy)

初學者範本

務必用最新的設計和開發標準設定你的網頁。這意味著使用一個 HTML 5 的文本類型，並加入一個 viewport 標籤以正常運行響應式網頁。整合在一起後，你的頁面應該是如下這個樣子：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <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>
    -->
  </body>
</html>

接下來，訪問 Layout 文件或我們的官方範例開始將網站的內容和元件進行佈置。

重要的整體樣式

你在使用 Bootstrap 時需要知道整體樣式和設置，這些樣式和設置幾乎全部以跨瀏覽器格式的 標準化 為目標。讓我們瞭解這些樣式和設置。

HTML5 文件類型

Bootstrap 要求使用 HTML5 文件類型。沒有這個文件類型，你會看見一些奇怪的不完整格式。但加入這個文件類型應當不會導致任何錯誤。

<!doctype html>
<html lang="en">
  ...
</html>

響應式中繼標籤

Bootstrap 的開發以 行動優先 為策略，按照這個策略，我們優先為行動裝置優化程式碼，然後使用 CSS media queries 在必要時放大元件。為了確保全部裝置上有正確渲染和和觸控縮放，將響應式中繼標籤記 添加到你的 <head> 中。

<meta name="viewport" content="width=device-width, initial-scale=1">

您可在 starter template 中查看一個實際應用的範例。

Box-sizing

為了在 CSS 中能夠更加直接的調整尺寸，我們將整體的 box-sizing 數值從 content-box 切換為 border-box。這就確保了 padding 不會影響元素最終的計算寬度，但這可能導致在 Google 地圖和 Google 自訂搜尋引擎等某些第三方元件出現問題。

在極少的情形中，你需要使用類似於如下的設置：

.selector-for-some-widget {
  box-sizing: content-box;
}

透過以上程式碼片段，巢狀元素（包括 ::before 和 ::after）生成的內容都將繼承 .selector-for-some-widget 的指定 box-sizing。

在 CSS Tricks 瞭解有關盒模型及尺寸。

重置

為了改善跨流覽器的渲染，我們使用了重製以修正跨瀏覽器和裝置之間的不一致性，同時對通用的 HTML 元素達到一致性的效果。

社群

通過如下有幫助的資源，瞭解 Bootstrap 開發的最新進展並接觸社群。

閱讀並訂閱官方 Bootstrap Blog.
加入官方 Slack room.
在 IRC #bootstrap 頻道 irc.libera.chat 伺服器上，與 Bootstrap 愛好者一起聊天。
在 Stack Overflow 尋求幫助 (標註 bootstrap-5).
透過 npm 或類似的交付機制發佈時，開發者應當在修改或添加 Bootstrap 功能的包上使用關鍵字 bootstrap 以便更容易發現。

你也可以 follow @getbootstrap on Twitter 瞭解最新的小道消息和超酷的音樂視頻。