开始使用 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/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" 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-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

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

<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-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>

Hello World！在您选择的浏览器中打开页面以查看您的 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
用于显示和关闭的Toast
用于显示和定位的工具提示和弹出窗口（也需要Popper）

重要的全局变量

Bootstrap 使用了一些重要的全局样式和设置，所有这些几乎都专门用于跨浏览器样式的规范化。让我们开始吧。

HTML5 文档类型

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

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

响应式元标记

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

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

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

Box-sizing

为了在 CSS 中更直接地调整大小，我们将全局box-sizing值从content-box切换为border-box。这确保padding不会影响元素的最终计算宽度，但它可能会导致一些第三方软件出现问题，如谷歌地图和谷歌自定义搜索引擎。

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

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

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

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

reboot

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

社区

随时了解 Bootstrap 的最新发展，并利用这些有用的资源接触社区。

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

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