View on GitHub

簡介 (Introduction)

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

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-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

JS

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

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-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

分離 (Separate)

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-lpyLfhYuitXl2zRZ5Bn2fqnhNAKOAaM/0Kr9laMspuaMiZfGmfwRNFh8HlMy49eQ" crossorigin="anonymous"></script>

模組 (Modules)

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

元件 (Components)

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

顯示需要 Javascript 的元件

可以關閉的警告
用於切換狀態和 checkbox/radio 功能的按鈕 (Buttons)
用於所有頁面滑動行為、控制以及指示器的幻燈片 (Carousel)
用於切換內容可見性的折疊選單 (Collapse)
用於顯示與定位的下拉選單 (Dropdown) (同時需要 Popper)
用於顯示、定位與滑動行為的互動視窗 (Modals)
用於拓展折疊選單 (Collapse) 插件以實現響應行為的導覽列 (Navbar)
用於顯示與關閉的吐司 (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-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" 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-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-lpyLfhYuitXl2zRZ5Bn2fqnhNAKOAaM/0Kr9laMspuaMiZfGmfwRNFh8HlMy49eQ" 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 開發的最新進展並接觸社群。

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

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