开始使用 Bootstrap

Bootstrap 是一个功能强大、功能丰富的前端工具包。在几分钟内构建任何东西——从原型到生产。

在本页面

快速开始

通过 CDN 包含 Bootstrap 的生产就绪 CSS 和 JavaScript 开始，无需任何构建步骤。使用此Bootstrap CodePen 演示在实践中查看它。

index.html在项目根目录中创建一个新文件。包括<meta name="viewport">标记以及移动设备中的正确响应行为。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

包括 Bootstrap 的 CSS 和 JS。将<link>标签放在<head>我们的 CSS 中，并将<script>我们的 JavaScript 包的标签（包括用于定位下拉菜单、弹出器和工具提示的 Popper）放在关闭之前</body>。详细了解我们的CDN 链接。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

您也可以分别包含Popper和我们的 JS。如果您不打算使用下拉菜单、弹出框或工具提示，请通过不包括 Popper 来节省一些 KB。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

你好世界！在您选择的浏览器中打开该页面以查看您的 Bootstrapped 页面。现在您可以通过创建自己的布局、添加数十个组件并利用我们的官方示例来开始使用 Bootstrap 进行构建。

CDN 链接

作为参考，这里是我们的主要 CDN 链接。

描述	网址
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

您还可以使用 CDN 获取我们在内容页面中列出的任何其他构建。

下一步

阅读更多有关Bootstrap 使用的一些重要全局环境设置的信息。
在我们的内容部分阅读 Bootstrap 中包含的内容以及下面需要 JavaScript的组件列表。
需要更多的力量吗？考虑通过包管理器包含源文件来使用 Bootstrap 构建。
希望将 Bootstrap 用作模块<script type="module">？请参阅我们的使用 Bootstrap 作为模块部分。

JS 组件

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

显示需要 JavaScript 的组件

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

重要的全局变量

Bootstrap 采用了一些重要的全局样式和设置，所有这些几乎都专门针对跨浏览器样式的规范化。让我们潜入水中。

HTML5 文档类型

Bootstrap 需要使用 HTML5 文档类型。没有它，您会看到一些时髦且不完整的样式。

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

响应式元标记

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

<meta name="viewport" content="width=device-width, initial-scale=1">

您可以在快速入门中看到一个这样的例子。

盒子尺寸

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

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

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

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

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

重启

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

社区

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

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

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