引言
启动Bootstrap，这是世界上最流行的构建响应性、移动优先的站点的框架，使用BootstrapCDN和一个模板启动页面。
快速开始
希望快速添加引导到您的项目?使用BootstrapCDN，由StackPath的人员免费提供。使用包管理器还是需要下载源文件?
CSS
复制粘贴样式表<链接>到您的，在所有其他样式表加载我们的CSS之前。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
JS
我们的许多组件都需要使用JavaScript来运行。具体来说，它们需要jQuery和Popper。和我们自己的JavaScript插件。将以下
我们使用jQuery的瘦构建，但也支持完整版本。
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
想知道哪些组件显式地需要jQuery、我们的JS和pop . JS ?单击下面的show components链接。如果您完全不确定一般的页面结构，请继续阅读示例页面模板。
我们的bootstrap.bundle.js和bootstrap.bundle.min.js包括Popper，但不包括jQuery。有关Bootstrap包含什么内容的更多信息，请参见我们的目录部分。
要使用JavaScript的组件：
- 警报解雇
- 用于切换状态和复选框/单选功能的按钮
- 用于所有幻灯片行为、控件和指示器的旋转木马
- 折叠以切换内容的可见性
- 用于显示和定位的下拉列表(也需要pop .js)
- 用于显示、定位和滚动行为的模态
- 扩展折叠插件以实现响应行为的导航栏
- 用于显示和定位的工具提示和弹出窗口(也需要Popper.js)
- Scrollspy用于滚动行为和导航更新
起动器模板
确保您的页面使用最新的设计和开发标准。这意味着使用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" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
这就是整个页面需求所需要的全部内容。访问布局文档或我们的官方示例，开始布局您的站点的内容和组件。
重要的全局变量
Bootstrap使用了一些重要的全局样式和设置，您在使用它时需要注意，所有这些几乎都是专门针对跨浏览器样式的标准化的。就让我们一探究竟吧。
HTML5 文档类型
<!doctype html> # html5的专属声明/跟4是不一样的/如果不声明可能影响解析。
<html lang="en">
...
</html>
响应元标签
Bootstrap是先开发移动端，这是一种策略，我们首先为移动设备优化代码，然后根据需要使用CSS媒体查询扩展组件。为了确保对所有设备进行正确的呈现和触摸缩放，将响应式viewport元标记添加到您的。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
盒模型
为了在CSS中更直观地调整大小，我们将全局box-sizing值从content-box切换到border-box。这确保填充不会影响元素的最终计算宽度，但它会导致一些第三方软件出现问题，比如谷歌Maps和谷歌定制搜索引擎。
在极少数情况下，您需要覆盖它，请使用以下内容:
.selector-for-some-widget {
box-sizing: content-box;
}
通过上面的代码片段，嵌套的元素(包括通过::before和::after生成的内容)都将继承.selector-for-some-widget的指定 box-sizing。
重启
对于改进的跨浏览器呈现，我们使用restart来纠正跨浏览器和设备的不一致，同时为常见HTML元素提供稍微多一些自以为是的重置。