# 介紹
開始使用 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>
<!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<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"></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))。
* 及時回來看看文檔有沒有更新。