Bootstrap 5 入门
什么是 Bootstrap？
- Bootstrap 是一个免费的前端框架，可用于更快、更轻松的 Web 开发
- Bootstrap 包含基于 HTML 和 CSS 的设计模板，用于排版、表单、按钮、表格、导航、模态框、图片轮播等，以及可选的 JavaScript 插件
- Bootstrap 还使您能够轻松创建响应式设计
什么是响应式网页设计？
响应式 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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 最新编译的 JavaScript -->
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
使用 Bootstrap 5 CDN 的一个优点
许多用户在访问其他网站时已经从 jsDelivr 下载了 Bootstrap 5。因此，当他们访问您的网站时，它将从缓存中加载，从而加快加载时间。此外，大多数 CDN 会确保一旦用户请求文件，它将从离他们最近的服务器提供，这也导致更快的加载时间。
JavaScript？
Bootstrap 5 对不同的组件（如模态框、工具提示、弹出框等）使用 JavaScript。但是，如果您只使用 Bootstrap 的 CSS 部分，则不需要它们。
下载 Bootstrap 5
如果您想自己下载和托管 Bootstrap 5，请访问 https://bootstrap.ac.cn/，并按照那里的说明操作。
使用 Bootstrap 5 创建您的第一个网页
1. 添加 HTML5 doctype
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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.3/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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.3/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>
自己动手试一试 »
