Bootstrap – 简介
Bootstrap 是一个功能强大、功能丰富的前端工具包。在几分钟内构建任何东西 - 从原型到生产。
1.在项目根目录中创建一个新 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>2.包括 Bootstrap 的 CSS 和 JS。 <link> 在关闭 </body> 之前，将标签放在 <head> for for our CSS 和 JavaScript bundle 的 <script> 标签（包括用于定位下拉列表、popper 和工具提示的 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/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
</body>
</html>您也可以单独包括 Popper 和我们的 JS。如果您不打算使用下拉列表、弹出窗口或工具提示，请通过不包括 Popper 来节省一些千字节。
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-ep+dxp/oz2RKF89ALMPGc7Z89QFa32C8Uv1A3TcEK8sMzXVysblLA3+eJWTzPJzT" crossorigin="anonymous"></script>CDN 链接
作为参考，以下是我们的主要 CDN 链接。
| Description | URL |
|---|---|
| CSS | https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css |
| JS | https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js |
您还可以使用 CDN 获取“内容”页面中列出的任何附加版本。
后续步骤
- 详细了解 Bootstrap 使用的一些重要的全局环境设置。
- 阅读我们的内容部分的 Bootstrap 中包含的内容，以及下面的需要 JavaScript 的组件列表。
- 需要更多动力吗？考虑使用 Bootstrap 进行构建，方法是通过包管理器包含源文件。
- 想要将 Bootstrap 用作带有
<script type="module">？请参阅我们使用 Bootstrap 作为模块部分。
JS 组件
好奇哪些组件明确需要我们的 JavaScript 和 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;
}在上面的代码片段中，嵌套元素（包括 via ::before 和 ::after 生成的内容）都将继承为 that .selector-for-some-widget 指定的 box-sizing .
在 CSS Tricks 中了解有关框模型和大小调整的更多信息。
重新启动
为了改进跨浏览器呈现，我们使用 Reboot 来纠正浏览器和设备之间的不一致，同时为常见的 HTML 元素提供稍微更自以为是的重置。
社区
随时了解 Bootstrap 的最新发展，并通过这些有用的资源与社区联系。
- 阅读并订阅 The Official Bootstrap 博客。
- 询问并探索我们的 GitHub 讨论。
- 在 IRC 中与其他 Bootstrappers 聊天。在
irc.libera.chat服务器上，在频道中#bootstrap。 - 可以在 Stack Overflow（标记
bootstrap-5）中找到实现帮助。 - 开发人员在通过 npm 或类似的交付机制进行分发时，应在修改或添加 Bootstrap 功能的包上使用关键字
bootstrap，以获得最大的可发现性。
您还可以在 Twitter 上关注 @getbootstrap，了解最新的八卦和精彩的音乐视频。
