文章目录
Bootstrap 5 入门
什么是 Bootstrap？
Bootstrap 是一个免费的前端框架，可实现更快、更轻松的 Web 开发
Bootstrap 包括基于 HTML 和 CSS 的设计模板，用于排版、表单、按钮、表格、导航、模态框、图片轮播等，以及可选的 JavaScript 插件
Bootstrap 还使您能够轻松创建响应式设计
什么是响应式 Web 设计？
响应式 Web 设计是指创建可自动调整的网站，使其在所有设备（从小型手机到大型台式机）上都能显示良好。
Bootstrap 5 示例
<divclass="container-fluid p-5 bg-primary text-white text-center"><h1>我的第一个 Bootstrap 页面</h1><p>调整此响应页面的大小以查看效果！</p></div><divclass="container mt-5"><divclass="row"><divclass="col-sm-4"><h3>Column 1</h3><p>Lorem ipsum dolor sat amet， tur adipisicing elit...</p><p>Ut enim ad minim veniam，quis nostrud exeritation ullamco labouris...</p></div><divclass="col-sm-4"><h3>Column 2</h3><p>Lorem ipsum dolor sat amet，consectetur adipisicing elit...</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p></div><divclass="col-sm-4"><h3>Column 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（内容分发网络）包含它。
jsDelivr 为 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持：
MaxCDN：
<!-- 最新编译和压缩的 CSS--><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><!-- 最新编译的 JavaScript --><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
使用 Bootstrap 5CDN 的一个优势：
许多用户在访问其他网站时已经从 jsDelivr 下载了 Bootstrap 5。因此，当他们访问您的网站时，它将从缓存中加载，从而缩短加载时间。此外，大多数 CDN 都会确保一旦用户从中请求文件，就会从距离他们最近的服务器提供该文件，这也会缩短加载时间。
JavaScript？
Bootstrap 5 使用 JavaScript 来处理不同的组件（如模式、工具提示、弹出窗口等）。但是，如果您只使用 Bootstrap 的 CSS 部分，则不需要它们。
下载 Bootstrap 5
如果您想自己下载和托管 Bootstrap 5，请转到 https://getbootstrap.com/，然后按照那里的说明进行操作。
使用 Bootstrap 5 创建您的第一个网页
1. 添加 HTML5 文档类型
Bootstrap 5 使用需要 HTML5 文档类型的 HTML 元素和 CSS 属性。
始终在页面开头包含 HTML5 文档类型，以及 lang 属性和正确的标题和字符集：
<!DOCTYPEhtml><htmllang="en"><head><title>Bootstrap 5 示例</title><metacharset="utf-8"></head></html>
2. Bootstrap 5 是移动优先的
Bootstrap 5 旨在响应移动设备。移动优先样式是核心框架的一部分。
为确保正确呈现和触摸缩放，请在
<head>
元素内添加以下
<meta>
标记：
<metaname="viewport"content="width=device-width, initial-scale=1">
width=device-width 部分设置页面宽度以遵循设备的屏幕宽度（这将根据设备而有所不同）。
initial-scale=1 部分设置页面首次加载时的初始缩放级别由浏览器。
3. 容器
Bootstrap 5 还需要一个包含元素来包装网站内容。
有两种容器类可供选择：
.container 类提供响应式固定宽度容器
.container-fluid 类提供全宽容器，横跨视口的整个宽度
.container
.container-fluid
两个基本 Bootstrap 5 页面
以下示例显示了基本 Bootstrap 5 页面（带有响应式固定宽度容器）的代码：
容器示例
<!DOCTYPEhtml><htmllang="en"><head><title>Bootstrap 示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><divclass="container"><h1>我的第一个 Bootstrap 页面</h1><p>此部分位于 .container 类中。</p><p>.container 类提供响应式固定宽度容器。</p></div></body></html>
以下示例显示了基本 Bootstrap 5 页面（带有全宽容器）的代码：
容器流体示例
<!DOCTYPEhtml><htmllang="en"><head><title>Bootstrap 示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><divclass="container-fluid"><h1>我的第一个 Bootstrap 页面</h1><p>此部分位于 .container-fluid 类内。</p><p>.container-fluid 类提供全宽容器，横跨视口的整个宽度。</p></div></body></html>
总结
本文介绍了Bootstrap5入门，如有问题欢迎私信和评论
版权归原作者 编程岁月 所有， 如有侵权，请联系我们删除。