Bootstrap 5 入门
什么是 Bootstrap?
- Bootstrap 是一个免费的前端框架，用于更快更轻松地进行 Web 开发。
- Bootstrap 包含基于 HTML 和 CSS 的设计模板，用于排版、表单、按钮、表格、导航、模态框、图片轮播以及更多内容，以及可选的 JavaScript 插件。
- Bootstrap 还使您能够轻松创建响应式设计。
什么是响应式 Web 设计?
响应式 Web 设计是关于创建能够自动调整自身以在所有设备上看起来良好的网站，从小型手机到大型台式机。
Bootstrap 5 示例
<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>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>列 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>列 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
自己尝试 »Bootstrap 版本
Bootstrap 5（于 2021 年发布）是 Bootstrap（于 2013 年发布）的最新版本；具有新的组件、更快的样式表和更多响应能力。
Bootstrap 5 支持所有主要浏览器和平台的最新稳定版本。但是，Internet Explorer 11 及更低版本不受支持。
Bootstrap 5 与 Bootstrap 3 和 4 之间的最大区别在于，Bootstrap 5 已切换到原生 JavaScript，而不是 jQuery。
注意：Bootstrap 3 和 Bootstrap 4 仍由团队提供支持，以进行关键的错误修复和文档更改，因此可以继续安全地使用它们。但是，不会向它们添加新功能。
为什么要使用 Bootstrap?
Bootstrap 的优势
- 易于使用：任何拥有基本 HTML 和 CSS 知识的人都可以开始使用 Bootstrap。
- 响应式功能：Bootstrap 的响应式 CSS 适应手机、平板电脑和台式机。
- 移动优先方法：在 Bootstrap 中，移动优先样式是核心框架的一部分。
- 浏览器兼容性：Bootstrap 5 兼容所有现代浏览器（Chrome、Firefox、Edge、Safari 和 Opera）。注意如果您需要支持 IE11 及更低版本，则必须使用 BS4 或 BS3。
从哪里获取 Bootstrap 5?
在您自己的网站上开始使用 Bootstrap 5 有两种方法。
您可以
- 从 CDN 包含 Bootstrap 5
- 从 getbootstrap.com 下载 Bootstrap 5
Bootstrap 5 CDN
如果您不想自己下载和托管 Bootstrap 5，您可以从 CDN（内容分发网络）包含它。
jsDelivr 为 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持。
MaxCDN
<!-- 最新编译和压缩的 CSS -->
<link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 最新编译的 JavaScript -->
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
使用 Bootstrap 5 CDN 的一个优势
许多用户在访问其他网站时已经从 jsDelivr 下载了 Bootstrap 5。因此，当他们访问您的网站时，它将从缓存中加载，从而导致更快的加载时间。此外，大多数 CDN 将确保一旦用户从 CDN 请求文件，它将从最靠近他们的服务器提供，这也导致更快的加载时间。
JavaScript?
Bootstrap 5 使用 JavaScript 用于不同的组件（如模态框、提示框、气泡框等）。但是，如果您只使用 Bootstrap 的 CSS 部分，则不需要它们。
下载 Bootstrap 5
如果您想自己下载和托管 Bootstrap 5，请访问 https://bootstrap.ac.cn/，并按照那里的说明进行操作。
使用 Bootstrap 5 创建您的第一个网页
1. 添加 HTML5 文档类型
Bootstrap 5 使用需要 HTML5 文档类型的 HTML 元素和 CSS 属性。
始终在页面开头包含 HTML5 文档类型，以及 lang 属性和正确的标题和字符集。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 示例</title>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 5 是移动优先的
Bootstrap 5 被设计为对移动设备具有响应能力。移动优先样式是核心框架的一部分。
为了确保正确呈现和触摸缩放，在 <head> 元素内添加以下 <meta> 标签
<meta name="viewport" content="width=device-width, initial-scale=1">
这 width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（这将根据设备而有所不同）。
这 initial-scale=1 部分设置浏览器首次加载页面时的初始缩放级别。
3. 容器
Bootstrap 5 还需要一个包含元素来包裹网站内容。
有两种容器类可供选择
- 这
.container类提供一个响应式的固定宽度容器 - 这
.container-fluid类提供一个全宽度容器，跨越视窗的整个宽度
两个基本的 Bootstrap 5 页面
以下示例显示了基本 Bootstrap 5 页面（具有响应式固定宽度容器）的代码。
容器示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>我的第一个 Bootstrap 页面</h1>
<p>此部分位于 .container 类内部。</p>
<p>.container 类提供一个响应式固定宽度容器。</p>
</div>
</body>
</html>
自己尝试 »
以下示例显示了基本 Bootstrap 5 页面（具有全宽度容器）的代码。
容器流体示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>我的第一个 Bootstrap 页面</h1>
<p>此部分位于 .container-fluid 类内部。</p>
<p>.container-fluid 类提供一个全宽度容器，跨越视窗的整个宽度。</p>
</div>
</body>
</html>
自己尝试 »
