View on GitHub

简介

使用 jsDelivr 和模板启动页开始学习 Bootstrap，这是世界上最流行的框架，用于构建响应式、移动优先的网站。

快速开始

想要在您的项目中快速添加 Bootstrap？使用免费开源 CDN jsDelivr。使用软件包管理器或需要下载源文件？请前往下载页面。

CSS

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/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 bundle。有关 Bootstrap 包含哪些内容的详细信息，请参阅我们的 contents 部分。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-dYZNN/S36H+qFkH6sJzTpni3g1HLk0wUtTr9fD9c//71s4Tm91nya/xLcs+Al0o+" crossorigin="anonymous"></script>

单独的

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

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.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.2/dist/js/bootstrap.min.js" integrity="sha384-7xnvUvHjVbNQlsHJon2soeS+vXvFN+QKl+YLKTfpgYjntS63cQhDK6ZRYrJZvoI6" crossorigin="anonymous"></script>

组件

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

显示需要 JavaScript 支持的组件

用于解除的警报
用于切换状态和复选框/无线电功能的按钮
用于所有幻灯片行为、控件和指示器的旋转木马
折叠用于切换内容的可见性
用于显示和定位的下拉菜单（还需要 Popper）
模态，用于显示、定位和滚动行为
用于扩展 Collapse 插件以实现响应行为的导航条
用于滚动行为和导航更新的 Scrollspy
用于显示和定位的工具提示和弹出窗口（还需要 Popper）

入门模板

确保您的页面设置符合最新的设计和开发标准。这意味着要使用 HTML5 doctype 并包含视口元标签，以实现正确的响应行为。将这一切整合在一起，您的页面应该是这样的：

<!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.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- 可选 JavaScript；二选一  -->

    <!-- 方案 1：jQuery 和 Bootstrap 捆绑软件（包括 Popper） -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-dYZNN/S36H+qFkH6sJzTpni3g1HLk0wUtTr9fD9c//71s4Tm91nya/xLcs+Al0o+" crossorigin="anonymous"></script>

    <!-- 方案 2：分离 Popper 和 Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.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.2/dist/js/bootstrap.min.js" integrity="sha384-7xnvUvHjVbNQlsHJon2soeS+vXvFN+QKl+YLKTfpgYjntS63cQhDK6ZRYrJZvoI6" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

重要全局项

Bootstrap 采用了一些重要的全局样式和设置，使用时需要注意，所有这些几乎都是为了实现跨浏览器样式的规范化。让我们深入了解一下。

HTML5 类型

Bootstrap 要求使用 HTML5 doctype。如果不使用它，你会看到一些不完整的样式，但使用它应该不会造成任何问题。

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

响应式元标签

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

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

您可以在入门模板中看到实际操作的例子。

方框尺寸

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

在极少数情况下，你需要覆盖它，请使用类似下面的方法：

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

通过上述代码段，嵌套元素（包括通过 ::before 和 ::after 生成的内容）都将继承该 .selector-for-some-widget 指定的 box-sizing 大小。

了解有关 CSS 技巧中的盒型和大小的更多信息。

重置

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

社区

了解 Bootstrap 的最新发展情况，并利用这些有用的资源与社区取得联系。

阅读并订阅 The Official Bootstrap Blog。
加入 The Official Slack room。
与其他 Bootstrappers 在 IRC 上聊天。在 irc.libera.chat 服务器上的 #bootstrap 频道。
可以在 Stack Overflow（标签为 bootstrap-4）上找到实现帮助。
开发者在通过 npm 或类似发布机制发布修改或添加 Bootstrap 功能的软件包时，应使用关键字 bootstrap，以获得最大的可发现性。

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

CSP 和嵌入式 SVG

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

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