View on GitHub

简介

Bootstrap 是全球最受欢迎的前端框架，用于构建响应式、移动设备优先的网站。利用 jsDelivr 和我们提供的入门模板帮助你快速掌握 Bootstrap。

快速开始

如何让项目快速用上 Bootstrap？使用 jsDelivr，这是一个免费且开源的 CDN，在你的页面上添加几个文件链接就能开始你的 Bootstrap 之旅啦。你是否在使用软件包管理器或想下载 Bootstrap 的源文件？请转到下载页面查看说明。

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 文件

Bootstrap 自带的大部分组件都需要依赖 JavaScript 才能起作用。具体来说，这些组件依赖 jQuery、Popper 以及我们自己开发的 JavaScript 插件。我们使用的是 jQuery 的 slim 构建版本，当然，完整版本也是被支持的。

复制下面的 <script> 标签 粘贴到页面底部，并且是在 </body> 标签之前，就能起作用了。注意，顺序很重要，不能错，首先是 jQuery，然后是 Popper，最后是我们自己的 JavaScript 插件。

集成包

我们提供的两个集成包都包含了 Bootstrap 的每一个 JavaScript 插件。即 bootstrap.bundle.js 和 bootstrap.bundle.min.js，此外，还包含了 Popper，用于支持工具提示（tooltip）和弹出框（popover）功能，但是不包含 jQuery。添加到页面中时，按照先 jQuery 后 Bootstrap 的 JavaScript 集成包的顺序依次添加。有关 Bootstrap 中包含了哪些内容的更多信息，请参见我们的内容章节。

<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-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>

分开加载

如果你决定分开加载各个文件，那么务必按此顺序，首先是 jQuery，其次是 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-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04" crossorigin="anonymous"></script>

Bootstrap 组件

是否好奇哪些组件明确需要 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
Scrollspy for scroll behavior and navigation updates
Tooltips and popovers for displaying and positioning (also requires Popper)

入门模板

请确保使用最新的页面设计和开发标准来设置页面。也就是说，使用 HTML5 文档类型（doctype）、并包含一个设置 viewport（视口）的 <meta> 标签以实现正确的响应式布局行为。这些要求组合在一起之后，你的页面应当如下所示：

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <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-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" 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-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04" crossorigin="anonymous"></script>
    -->
  </body>
</html>

以上就是对于一个页面的大致要求。请访问布局文档或我们的官方示例作为你布局网站内容和组件的参考。

重要的全局设置

Bootstrap 依赖一些重要的全局样式和设置，专门针对的是跨浏览器的样式 统一化（normalization），需要你在使用 Bootstrap 之前重点了解。接下来开始我们历险之旅吧。

HTML5 文档类型（doctype）

Bootstrap 要求文档类型（doctype）是 HTML5。如果没有这一设置，你就会看到一些古怪的、不完整的样式，因此，正确设置文档类型（doctype）就能轻松避免这些困扰。

<!doctype html>
<html lang="zh-CN">
  ...
</html>

响应式布局相关的标签

Bootstrap 采用的是 移动设备优先（mobile first） 的开发策略，因此，我们首先为移动设备优化代码，然后根据需要并利用 CSS 媒体查询功能来缩放组件。为了确保所有设备都能支持正确的渲染和触屏缩放，请务必在 <head> 标签中 添加让 viewport（视口）支持响应式布局的标签。

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

你可以在入门模板中查看此示例的实际应用。

CSS 盒模型

为了让 CSS 中的尺寸设置更加直观，我们将全局的 box-sizing 从 content-box 调整为 border-box。这样可以确保 padding 的设置不会影响计算元素的最终宽度，但是会导致某些第三方软件（例如 Google Maps 和 Google Custom Search Engine）出现问题。

在为数不多的情况下，你需要专门覆盖这一些设置，可以使用如下示例代码：

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

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

了解有关盒模型和尺寸设置的更多信息。

Reboot

为了提升跨浏览器的渲染效果，我们使用 Reboot 来纠正不同浏览器和设备之间的差异，并同时为常见的 HTML 元素提供更多更合适的样式重置。

社区

掌握最新的 Bootstrap 开发进展方面的信息，并通过这些有用的资源保持与社区的练习。

阅读并订阅 Bootstrap 官方博客.
加入官方 Slack 会议室.
在 IRC 频道中与 Bootstrap 同道中人聊天。irc.libera.chat server服务器,#bootstrap 频道。
在 Stack Overflow 上可以找到更实际的帮助（标签为 bootstrap-4）.
如果开发者对 Bootstrap 进行修改或增加功能并通过类似 npm 的分发机制来发布新的软件包的话，请务必为软件包添加 bootstrap 关键字，以增加更多的曝光。

你也可以关注 @getbootstrap on Twitter 以获取最新的八卦和超赞的音视频。

CSP（内容安全策略）和嵌入式 SVG

某些 Bootstrap 组件在 CSS 中包含了嵌入式 SVG，以便能够让为组件设置的样式在浏览器和设备之间保持一致。对于设置了更严格的 CSP 配置的组织，我们在文档中对所有出现嵌入式 SVG（全部通过 background-image 设置）的地方都进行了说明，因此你可以更好的控制。

根据此社区讨论，在你自己的代码库中解决此问题的几个选项包括：用本地托管的资源替换原 URL；删除图片并使用内联图片（并非在所有组件中都可以这样做）；修改 CSP 设置。我们的建议是仔细检查你自己的安全策略，并在必要时决定最佳路线。

简介