Source

介紹

開始使用 Bootstrap,它是世界上最流行的構建響應式、移動優先網站的框架,帶有 jsDelivr 和模板起始頁。

快速開始

想要快速將 Bootstrap 添加到您的項目中?使用 jsDelivr,由 jsDelivr 的人們免費提供。使用包管理器還是需要下載源文件?前往下載頁面。

CSS

將樣式表複製粘貼<link><head>所有其他樣式表之前,以加載我們的 CSS。

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

JS

我們的許多組件都需要使用 JavaScript 才能運行。具體來說,它們需要jQueryPopper.js和我們自己的 JavaScript 插件。將以下<script>s 放在頁面末尾附近,就在結束</body>標記之前,以啟用它們。jQuery 必須先出現,然後是 Popper.js,然後是我們的 JavaScript 插件。

我們使用jQuery 的 slim build,但也支持完整版。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

好奇哪些組件明確需要 jQuery、我們的 JS 和 Popper.js?單擊下面的顯示組件鏈接。如果您對一般頁面結構完全不確定,請繼續閱讀示例頁面模板。

我們的bootstrap.bundle.jsbootstrap.bundle.min.js包括Popper,但不包括jQuery。有關 Bootstrap 中包含的內容的更多信息,請參閱我們的內容部分。

顯示需要 JavaScript 的組件
  • 解僱提醒
  • 用於切換狀態和復選框/收音機功能的按鈕
  • 所有幻燈片行為、控件和指示器的輪播
  • 折疊以切換內容的可見性
  • 用於顯示和定位的下拉菜單(也需要Popper.js
  • 用於顯示、定位和滾動行為的模式
  • 用於擴展我們的 Collapse 插件以實現響應行為的導航欄
  • 用於顯示和定位的工具提示和彈出框(也需要Popper.js
  • 用於滾動行為和導航更新的 Scrollspy

入門模板

請務必使用最新的設計和開發標准設置您的頁面。這意味著使用 HTML5 文檔類型並包含一個視口元標記以實現正確的響應行為。將它們放在一起,您的頁面應如下所示:

<!doctype html>
<html lang="en">
  <head>
    <!-- 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://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

這就是整體頁面要求所需的全部內容。訪問佈局文檔我們的官方示例,開始佈局您網站的內容和組件。

重要的全局變量

Bootstrap 採用了一些重要的全局樣式和設置,您在使用它時需要注意它們,所有這些幾乎都專門用於跨瀏覽器樣式的規範化。讓我們潛入水中。

HTML5 文檔類型

Bootstrap 需要使用 HTML5 文檔類型。沒有它,您會看到一些時髦的不完整樣式,但包括它不應該引起任何嚴重的問題。

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

響應式元標記

Bootstrap 是移動優先開發的,這是一種策略,我們首先優化移動設備的代碼,然後根據需要使用 CSS 媒體查詢擴展組件。為確保所有設備的正確渲染和触摸縮放,請將響應式視口元標記添加到您的<head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

您可以在starter 模板中看到一個這樣的例子。

盒子尺寸

為了在 CSS 中更直接地調整大小,我們將全局box-sizing值從切換content-boxborder-box. 這確保padding不會影響元素的最終計算寬度,但可能會導致某些第三方軟件出現問題,例如穀歌地圖和谷歌自定義搜索引擎。

在極少數情況下您需要覆蓋它,請使用以下內容:

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

使用上面的代碼片段,嵌套元素——包括通過::beforeand生成的內容::after——都將繼承box-sizing為 that指定的內容.selector-for-some-widget

在 CSS Tricks了解更多關於盒子模型和大小的信息。

重啟

為了改進跨瀏覽器呈現,我們使用Reboot來糾正跨瀏覽器和設備的不一致,同時對常見的 HTML 元素提供稍微更自以為是的重置。

社區

隨時了解 Bootstrap 的最新發展,並通過這些有用的資源與社區聯繫。

  • 在 Twitter 上關注@getbootstrap
  • 閱讀並訂閱官方 Bootstrap 博客
  • 與 IRC 中的 Bootstrapper 同事聊天。在irc.freenode.net服務器上,在##bootstrap頻道中。
  • 可以在 Stack Overflow 上找到實現幫助(標記為bootstrap-4)。
  • 當通過npm或類似的交付機制bootstrap分發時,開發人員應在修改或添加到 Bootstrap 功能的包上使用關鍵字,以獲得最大的可發現性。

您還可以在 Twitter 上關注 @getbootstrap 以獲取最新的八卦和精彩的音樂視頻。