教程 > Bootstrap 5 教程 > Bootstrap 5 基础 阅读：1399

Bootstrap5 入门使用

在本篇文章中，您将了解使用 Bootstrap 创建网页是很容易的。但在开始之前，请确保有一个代码编辑器和一些 HTML 和 CSS 的基本知识。

如果刚刚涉足 Web 开发领域，请从这里开始学习

让我们开始创建我们的第一个 Bootstrap5 驱动的网页。

使用 Bootstrap5 创建第一个网页

现在我们将通过 CDN 包含 Bootstrap CSS 和 JS 文件来创建一个基本的 Bootstrap 网页。Bootstrap5 需要第三方库Popper.js用于其某些组件，例如弹出窗口和工具提示。我们可以单独包含这个库文件，也可以简单地包含与 Popper 捆绑的 Bootstrap JS。

我们建议通过 CDN（内容交付网络）在项目中添加 Bootstrap，因为 CDN 可以减少加载时间，具有性能优势，因为它们将文件托管在遍布全球的多个服务器上，这样当用户请求文件时，将会从离他们最近的服务器获取到文件。我们还在示例中使用 CDN 链接：

让我们逐步完成以下步骤。在本篇内容结束时，我们将制作一个简单的 Bootstrap5 的网页，该网页在 Web 浏览器中显示“Hello world”消息。

步骤 1：创建基本 HTML 文件

打开您最喜欢的代码编辑器并创建一个新的 HTML 文件，basic.html。

basic.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Basic HTML 文件</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

尝试一下

提示 ：始终在文档部分的<head>内包含视口标签<meta>，以启用触摸缩放并确保在移动设备上能呈现正确的布局。

步骤 2：将此 HTML 文件设为 Bootstrap 模板

为了使这个纯 HTML 文件成为 Bootstrap 模板，只需使用 CDN 链接包含 Bootstrap5 的 CSS 和 JS 文件。此外，还应该在页面底部包含 JavaScript 文件，就在结束标记</body>之前，以提高网页的性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Basic Bootstrap 模板</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

尝试一下

啊哈，现在我们都准备好了！，将 Bootstrap 的 CSS 和 JS 文件添加到我们的 HTML 页面后，我们就可以开始使用 Bootstrap 框架开发任何响应式站点或应用程序。

属性integrity和crossorigin已添加到 CDN 链接从而实现子资源完整性(SRI)。这是一项安全功能，可确保网站（从 CDN 或任何地方）获取的文件在没有意外或恶意修改的情况下交付，从而使我们能够降低源自受损 CDN 的攻击风险。它的工作原理是允许你提供获取的文件必须匹配的加密哈希。

注意 ： Bootstrap 5 最大的变化是它不再需要 jQuery。但是，我们仍然可以使用 jQuery 来快速实现 Bootstrap 组件的方法和选项。如果 Bootstrap 在 window 对象中检测到 jQuery，它将在 jQuery 的插件系统中添加它的所有组件。后续将在本教程系列的高级部分了解它们。

提示 ：如果网站的访问者在访问其他网站时已经从同一个 CDN 下载了 Bootstrap 的 CSS 和 JS 文件，则将从浏览器的缓存中加载，而不是重新下载，从而加快加载速度。

步骤 3：保存和查看文件

现在将文件保存在桌面上，bootstrap-template.html。

要在 Web 浏览器中打开此文件，请选中该文件，然后右键单击它，接下来选择您喜欢的 Web 浏览器。或者，您可以打开浏览器并将此文件拖到其中。

注意 ：.html 指定扩展名很重要，一些文本编辑器，如 Windows 上的记事本，会自动将其另存为.txt。

下载 Bootstrap 文件

或者，我们也可以从他们的官方网站下载 Bootstrap 的 CSS 和 JS 文件并包含在自己的项目中。有两个版本可供下载，编译的 Bootstrap和Bootstrap 源文件。可以从这里下载 Bootstrap 5 文件。

bootstrap5 下载页面

编译下载包含编译和 min 版本的 CSS 和 JavaScript 文件，以便更快、更轻松地进行 Web 开发。编译后的版本还包括可选的 JavaScript 依赖项，例如与 Bootstrap JS ( bootstrap.bundle.*)捆绑在一起的 Popper 。而源代码下载包含所有 CSS 和 JavaScript 的原始源文件，以及文档的本地副本。

下载并解压编译好的 Bootstrap。现在，如果查看文件夹内部，就会发现它包含已编译的 CSS 和 JS 文件 ( bootstrap.*)，以及已编译和压缩过的 CSS 和 JS ( bootstrap.min.*)。使用bootstrap.min.css和bootstrap.bundle.min.js文件。

使用精简版的 CSS 和 JS 文件将提高网站的性能并节省宝贵的带宽，因为更少的 HTTP 请求和下载大小。

提示 ：不需要单独包含所需的Popper.js（为了使 Bootstrap 的工具提示和弹出窗口组件工作），因为它已经包含在“bootstrap.bundle.js”和压缩的“bootstrap.bundle.min.js”文件中。

查看笔记

扫码一下
查看教程更方便