Bootstrap 5 教程
Bootstrap 2023-08-10 09:26:34小码哥的IT人生shichen
Bootstrap 5 教程
Bootstrap 5 教程
Bootstrap 5 是 Bootstrap 的最新版本，它是最流行的 HTML、CSS 和 JavaScript 框架，用于创建响应式、移动优先的网站。
Bootstrap 5 的下载和使用是完全免费的！
亲自试一试实例
本教程包含数百个 Bootstrap 5 实例。
使用我们的在线编辑器，您可以编辑代码，然后单击按钮查看结果。
Bootstrap 5 实例
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>我的第一张 Bootstrap 页面</h1>
<p>请调整这张响应式页面的大小以查看效果！</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>列 1</h3>
<p>胜日寻芳泗水滨，无边光景一时新。</p>
<p>等闲识得东风面，万紫千红总是春。</p>
</div>
<div class="col-sm-4">
<h3>列 2</h3>
<p>纷纷红紫已成尘，布谷声中夏令新。</p>
<p>夹路桑麻行不尽，始知身是太平人。</p>
</div>
<div class="col-sm-4">
<h3>列 3</h3>
<p>远上寒山石径斜，白云生处有人家。</p>
<p>停车坐爱枫林晚，霜叶红于二月花。</p>
</div>
</div>
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请单击“亲自试一试”按钮，查看它是如何工作的。
Bootstrap 5 vs. Bootstrap 3 & 4
Bootstrap 5 是 Bootstrap 的最新版本；使用了新的组件、更快的样式表，还有更快的响应能力。
Bootstrap 5 支持所有主要浏览器和平台的最新的稳定版本。但是，它不支持 Internet Explorer 11 及更早的版本。
Bootstrap 5 和 Bootstrap 3 & 4 的主要区别在于 Bootstrap 5 已经切换到 JavaScript 而不是 jQuery。
提示：请注意 Bootstrap 3 和 Bootstrap 4 仍受其团队支持以进行关键的错误修复和文档更改，继续使用它们是完全安全的。但是不会得到任何新特性。
