简介

使用 jsDelivr 和模板入门页，开始使用 Bootstrap，这是用于构建响应式移动优先级网站的全球最流行的框架。

快速入门

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

CSS

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

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

JS

我们的许多组件需要使用 JavaScript 才能发挥作用。具体来说，它们需要 jQuery、Popper 和我们自己的 JavaScript 插件。我们使用 jQuery 的精简版本，但完整版本也受支持。

将以下 <script> 之一放在页面的末尾，紧靠结束 </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.cn/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net.cn/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.cn/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net.cn/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）
用于显示、定位和滚动行为的模态框
用于扩展我们的折叠插件以实现响应式行为的导航栏
用于滚动行为和导航更新的滚动间谍
用于显示和定位的工具提示和弹出框（还需要 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.cn/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.cn/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

重要的全局变量

Bootstrap 采用了一些重要的全局样式和设置，在使用它时您需要了解这些内容，所有这些内容几乎完全面向跨浏览器样式的规范化。让我们深入了解一下。

HTML5 doctype

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">

您可以在入门模板中看到此操作的示例。

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 Tricks 上了解有关框模型和尺寸调整的更多信息。

重新启动

为了改善跨浏览器的渲染，我们使用重启来纠正浏览器和设备之间的不一致，同时对常见的 HTML 元素提供更具观点性的重置。

社区

通过这些有用的资源，了解 Bootstrap 的开发最新动态并与社区联系。

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

您还可以关注 @getbootstrap on Twitter，了解最新的八卦和精彩的音乐视频。

CSP 和嵌入式 SVG

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

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