# 介绍
开始使用 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))。
* 及时回来看看文档有没有更新。
