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 框架开发任何响应式站点或应用程序。

属性integritycrossorigin已添加到 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.cssbootstrap.bundle.min.js文件。

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

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

查看笔记

扫码一下
查看教程更方便