Bootstrap是一个功能强大、功能丰富的前端工具包。在几分钟内构建任何东西——从原型到生产。
首先，通过CDN包含Bootstrap的生产就绪CSS和JavaScript，而无需任何构建步骤。通过这个Bootstrap CodePen演示在实践中看到它。
<!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>
<link>标签放在 <head> 标签内<head>，<script>将 JavaScript 包（包括用于定位下拉菜单、弹出窗口和工具提示的 Popper）的 <script> 标签放在 </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.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 链接。
| 描述 | 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 获取我们在目录页面中列出的任何其他版本。
<script type="module">？请参阅我们的“将 Bootstrap 作为模块使用”部分。想知道哪些组件明确需要我们的 JavaScript 和 Popper 吗？点击下方“显示组件”链接。如果您对页面整体结构不太清楚，请继续阅读示例页面模板。
Bootstrap 使用了一些重要的全局样式和设置，它们几乎都完全是为了实现跨浏览器样式的统一。让我们深入了解一下。
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）都将继承box-sizing为该元素指定的属性.selector-for-some-widget。
在 CSS Tricks 上了解更多关于盒模型和尺寸的信息。
为了改善跨浏览器渲染效果，我们使用Reboot来纠正不同浏览器和设备之间的不一致之处，同时对常见的 HTML 元素提供更具个性化的重置。