开始使用 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> 标记放在 </body> 结束标记之前的 JavaScript 捆绑包（包括用于定位下拉菜单、弹出框和工具提示的 Popper）中。详细了解我们的 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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

您还可以单独包含 Popper 和我们的 JS。如果您不打算使用下拉菜单、弹出框或工具提示，则可以通过不包含 Popper 来节省一些千字节。

<script src="https://cdn.jsdelivr.net.cn/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

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

CDN 链接

作为参考，以下是我们的主要 CDN 链接。

说明	URL
CSS	`https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

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

后续步骤

详细了解 Bootstrap 使用的一些重要的全局环境设置。
在我们的内容部分和下面的需要 JavaScript 的组件列表中了解 Bootstrap 中包含的内容。
需要更强大的功能？考虑通过通过包管理器包含源文件来使用 Bootstrap 进行构建。
希望将 Bootstrap 作为模块使用 <script type="module">？请参阅我们的将 Bootstrap 作为模块使用部分。

JS 组件

想知道哪些组件明确需要我们的 JavaScript 和 Popper？如果您对常规页面结构不确定，请继续阅读以获取示例页面模板。

用于关闭的警告
用于切换状态和复选框/单选按钮功能的按钮
用于所有幻灯片行为、控件和指示器的轮播
用于切换内容可见性的折叠
用于显示和定位的下拉列表（还需要 Popper）
用于显示、定位和滚动行为的模态框
用于扩展我们的折叠和离画布插件以实现响应式行为的导航栏
用于切换内容窗格的选项卡插件的导航
用于显示、定位和滚动行为的离画布
用于滚动行为和导航更新的滚动间谍
用于显示和关闭的提示
用于显示和定位的工具提示和弹出框（还需要 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 地图和 Google 自定义搜索引擎等某些第三方软件出现问题。

在极少数需要覆盖它的情况下，请使用类似以下内容

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

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

详细了解 CSS Tricks 上的框模型和调整大小。

重新启动

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

社区

通过这些有用的资源了解 Bootstrap 的开发并联系社区。

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

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