Bootstrap 是一个功能强大、功能丰富的前端工具包。在几分钟内构建任何东西——从原型到生产。
快速入门
首先通过 CDN 包含 Bootstrap 的生产就绪 CSS 和 JavaScript，无需任何构建步骤。通过此 Bootstrap CodePen 演示查看实际作。
在项目根目录中创建一个新的index.html文件。还包含该标签，以便在移动设备中实现正确的响应行为。
<!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。在关闭之前将标签放在 CSS 的 中，并将 JavaScript 捆绑包的标签（包括用于定位下拉列表、弹出框和工具提示的 Popper）放在 中。了解有关我们的 CDN 链接的更多信息。<link><head><script></body>
<!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/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>您也可以分别包含 Popper 和我们的 JS。如果您不打算使用下拉菜单、弹出框或工具提示，请通过不包含 Popper 来节省一些千字节。
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>世界您好！在您选择的浏览器中打开页面以查看您的 Bootstrapped 页面。现在，您可以通过创建自己的布局、添加数十个组件并利用我们的官方示例来开始使用 Bootstrap 进行构建。
CDN 链接
作为参考，以下是我们的主要 CDN 链接。
| 描述 | 网址 |
|---|---|
| CSS系统 | https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css |
| JS | https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js |
您还可以使用 CDN 获取内容页面中列出的任何附加版本。
使用 CDN 链接时，请务必使用该属性来验证正确的文件和版本。这些哈希对于 Bootstrap 的每个文件和版本都是唯一的，因此当您更新到新版本时，请确保该属性也已更新。integrityintegrity
我们还包含一个属性来防止 CORS 错误。crossorigin="anonymous"
后续步骤
- 阅读更多关于 Bootstrap 使用的一些重要全局环境设置的信息。
- 在我们的内容部分阅读 Bootstrap 中包含的内容，以及下面需要 JavaScript 的组件列表。
- 需要更多动力吗？考虑通过包管理器包含源文件来使用 Bootstrap 进行构建。
- 希望将 Bootstrap 用作带有 ？请参阅我们的使用 Bootstrap 作为模块部分。
<script type="module">
JS 组件
好奇哪些组件明确需要我们的 JavaScript 和 Popper？如果您完全不确定一般页面结构，请继续阅读示例页面模板。
- 用于扩展 Collapse 插件的手风琴
- 关闭警报
- 用于切换状态和复选框/单选功能的按钮
- 所有幻灯片行为、控件和指示器的轮播
- 折叠以切换内容的可见性
- 用于显示和定位的下拉菜单（也需要 Popper)
- 用于显示、定位和滚动行为的模式
- Navbar 用于扩展我们的 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">
您可以在快速入门中看到一个实际示例。
盒子尺寸
为了在 CSS 中更直接地调整大小，我们将全局值从 切换到 。这确保不会影响元素的最终计算宽度，但它可能会导致某些第三方软件（如 Google 地图和 Google 自定义搜索引擎）出现问题。box-sizingcontent-boxborder-boxpadding
在极少数情况下，您需要覆盖它，请使用如下所示的内容：
.selector-for-some-widget {
box-sizing: content-box;
}
使用上述代码片段，嵌套元素（包括通过 和 生成的内容）都将继承为该 .::before::afterbox-sizing.selector-for-some-widget
了解有关盒子模型和大小调整的更多信息，请访问 CSS 技巧。
重新启动
为了改进跨浏览器渲染，我们使用 Reboot 来纠正浏览器和设备之间的不一致，同时为常见 HTML 元素提供稍微更有主见的重置。
社区
及时了解 Bootstrap 的最新开发情况，并通过这些有用的资源与社区联系。
- 阅读并订阅官方 Bootstrap 博客。
- 提出问题并浏览我们的 GitHub 讨论。
- 在社区 Discord 或 Bootstrap subreddit 上讨论、提出问题等。
- 在 IRC 中与其他 Bootstrappers 聊天。在服务器上，在通道中。
irc.libera.chat#bootstrap - 可以在 Stack Overflow（标记为
bootstrap-5）找到实现帮助。 - 开发人员应在通过 npm 或类似交付机制分发时修改或添加 Bootstrap 功能的包上使用关键字，以获得最大的可发现性。
bootstrap
您还可以在 X 上关注 @getbootstrap，了解最新的八卦和精彩的音乐视频。