簡介 (Introduction)

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

六角學院 六角學院

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

立即上課去

快速開始

想要快速地將 Bootstrap 添加到你的專案中!使用 MaxCDN 公司的免費提供的 Bootstrap CDN。如需用套件管理工具或需要下載原始檔可 前往下載頁面

CSS

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

我們的許多組件需要使用 JavaScript 才能運行。具體來說,他們需要 jQueryPopper.js 和我們自己的 JavaScript 插件。 就在 </body> 結尾標籤前,在頁面末尾放置以下 <script> 以啟用它們。首先是 jQuery,然後是 Popper.js,最後是我們的 JavaScript 插件。

我們使用 jQuery’s slim build,也同時支持完整版本。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

好奇哪些組件明確要求 jQuery、Bootstrap JS 和 Popper.js? 點擊下面的顯示組件鏈接。如果您不確定一般頁面結構,請繼續閱讀範例頁面。

Show components requiring JavaScript
  • Alerts for dismissing
  • Buttons for toggling states and checkbox/radio functionality
  • Carousel for all slide behaviors, controls, and indicators
  • Collapse for toggling visibility of content
  • Dropdowns for displaying and positioning (also requires Popper.js)
  • Modals for displaying, positioning, and scroll behavior
  • Navbar for extending our Collapse plugin to implement responsive behavior
  • Tooltips and popovers for displaying and positioning (also requires Popper.js)
  • Scrollspy for scroll behavior and navigation updates

初學者範本

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

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" 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, shrink-to-fit=no">

您可在 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-4).
  • 透過 npm 或類似的交付機制發佈時,開發者應當在修改或添加 Bootstrap 功能的包上使用關鍵字 bootstrap 以便更容易發現。

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