Bootstrap是世界上最流行的框架，用于构建响应性强、移动优先的站点，它带有jsdeliver和模板启动页。
快速开始
希望快速添加引导到您的项目？使用jsdelvr，一个免费的开源CDN。使用包管理器还是需要下载源文件？前往下载页面。
CSS
复制粘贴样式表 <link> 到你的 <head> 中，在所有其他样式表之前加载我们的CSS。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
JS
我们的许多组件都需要使用JavaScript来运行。具体来说，它们需要 jQuery、 Popper和我们自己的JavaScript插件。我们使用 jQuery’s slim 构建，但也支持完整版本。
将 下列 <script> 中的一个放在靠近页面结尾的地方，就在 </body>标记的前面，以启用它们。jQuery必须首先出现，然后是Popper，然后是我们的JavaScript插件。
捆绑包
将每个 Bootstrap JavaScript 插件包含在我们的两个包中。 bootstrap.bundle.js 以及 bootstrap.bundle.min.js 包含用于工具提示和弹出窗口的 Popper，但不包括 jQuery。首先包括jQuery，然后是一个 Bootstrap JavaScript包。有关 Bootstrap中包含的内容的更多信息， 请参阅我们的内容部分。
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
拆分
如果您决定使用单独的脚本解决方案，Popper必须首先出现（如果您使用的是工具提示或弹出窗口），然后是我们的JavaScript插件。
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
组件
想知道哪些组件显式地需要jQuery、JavaScript和Popper吗？单击下面的“显示组件”链接。如果您不确定页面结构，请继续阅读示例页面模板。
Show components requiring JavaScript
- Alerts for dismissing
- Buttons for toggling states and checkbox/radio functionality
- Carousel for all slide behaviors, controls, and indicators
- Collapse for toggling visibility of content
- Dropdowns for displaying and positioning (also requires Popper)
- Modals for displaying, positioning, and scroll behavior
- Navbar for extending our Collapse plugin to implement responsive behavior
- Tooltips and popovers for displaying and positioning (also requires Popper)
- Scrollspy for scroll behavior and navigation updates
入门模板
一定要用最新的设计和开发标准设置页面。这意味着要使用html5文档类型，并包含一个viewport meta标记来实现正确的响应行为。把它们放在一起，你的页面应该是这样的：
<!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/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
-->
</body>
</html>
这就是您对整个页面需求的全部需求。访问 布局文档 或 我们的官方示例，开始布局站点的内容和组件。
重要的全局设置
Bootstrap使用了一些重要的全局样式和设置，您在使用它时需要注意这些样式和设置，所有这些几乎都专门用于跨浏览器样式的规范化。我们潜进去吧。
HTML5 文档类型
Bootstrap 需要使用html5文档类型。没有它，你会看到一些时髦的不完整的造型，但包括它不应该引起任何相当大的困扰。
<!doctype html>
<html lang="en">
...
</html>
响应式 meta 标签
Bootstrap 是 mobile first开发的，在这种策略中，我们首先优化移动设备的代码，然后根据需要使用CSS媒体查询来扩展组件。要确保所有设备的正确渲染和触摸缩放，请 将“响应视口”元标签 添加到 <head>。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
您可以在 入门模板中看到一个这样的示例。
Box-sizing
为了在CSS中更直接地调整大小，我们将全局 box-sizing 值从 content-box切换到 border-box。这确保了padding不会影响元素的最终计算宽度，但它可能会导致一些第三方软件（如Google地图和Google自定义搜索引擎）出现问题。
在极少数情况下，您需要覆盖它，请使用以下内容：
.selector-for-some-widget {
box-sizing: content-box;
}
在上面的代码段中，包含通过 ::before 和 ::after生成的内容的嵌套元素都将继承 .selector-for-some-widget的指定box-sizing。
了解更多关于 盒子模型和大小的CSS技巧。
重置（Reboot）
为了改进跨浏览器呈现，我们使用 Reboot 来纠正浏览器和设备之间的不一致，同时为常见的HTML元素提供稍微有点自以为是的重置。
社区
了解Bootstrap的最新发展，并利用这些有用的资源联系社区。
- 阅读并订阅官方的Bootstrap博客。
- 加入 官方 Slack room。
- 与IRC中的 Bootstrappers聊天。上
irc.freenode.net服务器，在##bootstrap频道中。 - 可以在堆栈溢出（标记为
bootstrap-4）处找到实现帮助。 - 开发人员应该在包上使用关键字
bootstrap，这些包在通过 npm 或类似的交付机制分发时修改或添加bootstrap的功能，以获得最大的可发现性。
你也可以在上关注@getbootstrap获取最新的八卦和精彩的音乐视频。
CSP（内容安全策略）和嵌入式 SVG
一些 Bootstrap组件在我们的CSS中包含了嵌入式svg，以便在浏览器和设备之间一致且轻松地设计组件。 对于具有更严格 CSP CSP配置的组织，我们已经记录了我们的嵌入式svg的所有实例（所有这些都通过background-image应用），因此您可以更彻底地检查您的选项。
基于 社区对话，在您自己的代码库中解决此问题的一些选项包括用本地托管资产替换url、删除图像和使用内联图像（并非在所有组件中都可以），以及修改CSP。我们的建议是仔细检查您自己的安全策略，并在必要时决定一条最佳的前进道路。