介绍

开始使用 Bootstrap，它是世界上最流行的构建响应式、移动优先网站的框架，带有 jsDelivr 和模板起始页。

快速开始

想要快速将 Bootstrap 添加到您的项目中？使用 jsDelivr，一个免费的开源 CDN。使用包管理器还是需要下载源文件？前往下载页面。

CSS

将样式表复制粘贴<link>到<head>所有其他样式表之前，以加载我们的 CSS。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

我们的许多组件都需要使用 JavaScript 才能运行。具体来说，它们需要jQuery、Popper和我们自己的 JavaScript 插件。我们使用jQuery 的 slim build，但也支持完整版。

将以下<script>s之一放置在页面末尾附近，就在结束</body>标记之前，以启用它们。jQuery 必须先出现，然后是 Popper，然后是我们的 JavaScript 插件。

捆

将每个 Bootstrap JavaScript 插件包含在我们的两个捆绑包之一中。两者都bootstrap.bundle.js包括bootstrap.bundle.min.js用于我们的工具提示和弹出框的Popper，但不包括jQuery。首先包含 jQuery，然后是 Bootstrap JavaScript 包。有关 Bootstrap 中包含的内容的更多信息，请参阅我们的内容部分。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

分离

如果您决定使用单独的脚本解决方案，则必须首先使用 Popper（如果您使用工具提示或弹出框），然后是我们的 JavaScript 插件。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

成分

好奇哪些组件明确需要 jQuery、我们的 JavaScript 和 Popper？单击下面的显示组件链接。如果您不确定页面结构，请继续阅读示例页面模板。

显示需要 JavaScript 的组件

解雇提醒
用于切换状态和复选框/收音机功能的按钮
所有幻灯片行为、控件和指示器的轮播
折叠以切换内容的可见性
用于显示和定位的下拉菜单（也需要Popper）
用于显示、定位和滚动行为的模式
用于扩展我们的 Collapse 插件以实现响应行为的导航栏
用于滚动行为和导航更新的 Scrollspy
用于显示和定位的工具提示和弹出框（也需要Popper）

入门模板

请务必使用最新的设计和开发标准设置您的页面。这意味着使用 HTML5 文档类型并包含一个视口元标记以实现正确的响应行为。将它们放在一起，您的页面应如下所示：

<!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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" 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://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

这就是整体页面要求所需的全部内容。访问布局文档或我们的官方示例，开始布局您网站的内容和组件。

重要的全局变量

Bootstrap 采用了一些重要的全局样式和设置，您在使用它时需要注意它们，所有这些几乎都专门用于跨浏览器样式的规范化。让我们潜入水中。

HTML5 文档类型

Bootstrap 需要使用 HTML5 文档类型。没有它，您会看到一些时髦的不完整样式，但包括它不应该引起任何严重的问题。

<!doctype html>
<html lang="en">
  ...
</html>

响应式元标记

Bootstrap 是移动优先开发的，这是一种策略，我们首先优化移动设备的代码，然后根据需要使用 CSS 媒体查询扩展组件。为确保所有设备的正确渲染和触摸缩放，请将响应式视口元标记添加到您的<head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

您可以在starter 模板中看到一个这样的例子。

盒子尺寸

为了在 CSS 中更直接地调整大小，我们将全局box-sizing值从切换content-box到border-box. 这确保padding不会影响元素的最终计算宽度，但可能会导致某些第三方软件出现问题，例如谷歌地图和谷歌自定义搜索引擎。

在极少数情况下您需要覆盖它，请使用以下内容：

.selector-for-some-widget {
  box-sizing: content-box;
}

使用上面的代码片段，嵌套元素——包括通过::beforeand生成的内容::after——都将继承box-sizing为 that指定的内容.selector-for-some-widget。

在 CSS Tricks了解更多关于盒子模型和大小的信息。

重启

为了改进跨浏览器呈现，我们使用Reboot来纠正跨浏览器和设备的不一致，同时对常见的 HTML 元素提供稍微更自以为是的重置。

社区

随时了解 Bootstrap 的最新发展，并通过这些有用的资源与社区联系。

阅读并订阅官方 Bootstrap 博客。
与 IRC 中的 Bootstrapper 同事聊天。在irc.libera.chat服务器上，在#bootstrap频道中。
可以在 Stack Overflow 上找到实现帮助（标记为bootstrap-4）。
当通过npm或类似的交付机制bootstrap分发时，开发人员应在修改或添加到 Bootstrap 功能的包上使用关键字，以获得最大的可发现性。

您还可以在 Twitter 上关注 @getbootstrap 以获取最新的八卦和精彩的音乐视频。

CSP 和嵌入式 SVG

一些 Bootstrap 组件在我们的 CSS 中包含嵌入的 SVG，以在浏览器和设备上一致且轻松地为组件设置样式。对于具有更严格CSP配置的组织，我们记录了嵌入式 SVG 的所有实例（所有这些实例都通过应用background-image），因此您可以更彻底地查看您的选项。

根据社区对话，在您自己的代码库中解决此问题的一些选项包括将 URL 替换为本地托管的资产、删除图像并使用内联图像（并非在所有组件中都可能）以及修改您的 CSP。我们的建议是仔细审查您自己的安全策略，并在必要时确定最佳前进路径。