概覽 · BootStrap4

# 介紹開始使用 Bootstrap 吧！ Bootstrap 是一套流行的前端框架，它幫助你輕松構建對移動設備很友好的響應式網站。 ***** # 開始希望快速添加 Bootstrap 到你的項目？使用 BootstrapCDN ，由 StackPath 的人免費提供。使用包管理器還是需要下載源文件？點擊左邊導航的“下載”來獲取所需信息 ***** # CSS 復制下面這行代碼到 <head> 標簽，以加載 Bootstrap 的樣式表。 ``` <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> ``` ***** # JS 基本上，大多數組件需要依賴Javascript來實現功能。 Bootstrap 需要 [jQuery](https://jquery.com/), [Popper.js](https://popper.js.org/), 以及 Bootstrap 自帶的JS來實現功能。請將以下代碼添加到 </body> 標簽之前。在這里，我們使用 [jQuery 的精簡版本（slim build）](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/)，不過完整版本的Jquery也是可以用的。 ``` <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> ``` 好奇哪些組件明確需要jQuery，Bootstrap 自帶的JS以及Popper.js？單擊下面的展示組件的依賴細節。如果你對一般頁面結構一直不確定，請繼續閱讀示例頁面模板。你可以在源代碼文件夾中找到bootstrap.bundle.js 和 bootstrap.bundle.min.js ，這兩個文件已經包含了 [Popper](https://popper.js.org/), 但是不包含 [jQuery](https://jquery.com/)。要了解更多信息？請點擊左側的“內容”。 * 關閉提示界面的按鈕 * 實現按鈕的切換狀態功能，以及復選框和單選框的某些動態功能 * 所有幻燈片行為，控件和指示器的輪播 * 折疊以切換內容的可見性 * 用于下拉菜單的顯示和定位 (此處用到[Popper.js](https://popper.js.org/)) * 用于模態（Modal）的顯示，定位和滾動行為 * 在導航條中實現折疊功能以及響應式設計 * 用于氣泡提醒（Tooltips）功能的顯示和定位 (此處用到 [Popper.js](https://popper.js.org/)) * 滾動條的監控和更新功能 ***** # 一個簡單的 Bootstrap 模板確保你的頁面遵循了最新的設計和開發標準。這意味著使用HTML5 doctype 并包含 viewport 以獲得正確的響應行為。把它們放在一起，你的頁面應該是這樣的: ``` <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1>   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html> ``` 這就是整體頁面要求所需的全部內容。訪問頂部導航的“布局”或我們的“模板”，開始布置你網站的內容和組件。 ***** # 重要的全局設定 Bootstrap 使用了一些重要的全局樣式和設置，使用它們時需要注意，所有這些樣式和設置幾乎都有專門針對跨瀏覽器樣式的*規范*。讓我們深入了解吧。 ***** # HTML5 doctype Bootstrap 需要使用 HTML5 doctype。沒有它，你會看到奇怪的效果，這可不是預期中的表現。 ``` <!doctype html> <html lang="en"> ... </html> ``` ***** # 響應式 meta 標簽 Bootstrap 是基于移動設備優先的原則設計的，因此，我們需要針對移動設備做一些處理，使用 Bootstrap 的媒體查詢擴展組件就可以做到這些事情。為確保所有設備的正確渲染和觸摸縮放, 請添加 viewport meta 標簽到 <head> 里面。 ``` <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> ``` 這段代碼包含在上面提到的一個模板簡單的 Bootstrap 模板里。 ***** # Box-sizing 為了在CSS中更直接地調整大小，我們將全局box-sizing值從content-box切換到border-box。這可以確保填充不會影響元素的最終計算寬度，但它可能會導致某些第三方軟件（例如Google Maps和Google Custom Search Engine）出現問題。在極少數情況下，你需要覆蓋它，使用類似下面的代碼: ``` .selector-for-some-widget { box-sizing: content-box; } ``` 使用上面的代碼片段，子元素（包括通過:: before和:: after-生成的內容）將繼承該.selector-for-some-widget的指定box-sizing。在 [CSS Tricks](https://css-tricks.com/box-sizing/) 中了解有關盒子模型和大小調整的更多信息。 ***** # 重置(reboot) 為了改進跨瀏覽器呈現，我們使用重置(reboot)來糾正瀏覽器和設備之間的不一致，同時為常見的HTML元素提供稍微更有意義的重置。 ***** # 社區及時了解 Bootstrap 的開發情況，并通過這些有用的資源與社區聯系。 * 關注推特 [@getbootstrap](https://twitter.com/getbootstrap)。 * 在我們的官方博客閱讀或訂閱內容 [The Official Bootstrap Blog](https://blog.getbootstrap.com/)。 * 加入 Bootstrap 在 [slack討論組](https://bootstrap-slack.herokuapp.com/)。 * 在IRC中與其他 Bootstrap 用戶聊天。地址： irc.freenode.net ，## bootstrap channel。 * 在 Stack Overflow 獲取幫助 (記得將問題標記為 [bootstrap-4](https://stackoverflow.com/questions/tagged/bootstrap-4))。 * 及時回來看看文檔有沒有更新。