Bootstrap 入门

在本教程中，您将学习如何使用 Bootstrap 框架创建网页。

Bootstrap 入门

在本教程中，您将了解使用 Bootstrap 创建网页是多么容易。但在开始之前，请确保有一个代码编辑器和一些 HTML 和 CSS 的工作知识。

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

好吧，让我们开始创建我们的第一个 Bootstrap 驱动的网页。

使用 Bootstrap 创建您的第一个网页

现在我们将通过 CDN 包含 Bootstrap CSS 和 JS 文件来创建一个基本的 Bootstrap 模板。 Bootstrap 的某些组件（如弹出框和工具提示）需要第三方库 Popper.js。您可以单独包含它，也可以简单地包含与 Popper 捆绑的 Bootstrap JS。

我们建议通过 CDN（内容交付网络）在您的项目中添加 Bootstrap，因为 CDN 通过减少加载时间来提供性能优势，因为它们将文件托管在遍布全球的多个服务器上，因此当用户请求文件时将由离他们最近的服务器提供服务。我们还在示例中使用了 CDN 链接：

让我们完成以下步骤。在本教程结束时，您将制作一个由 Bootstrap 驱动的简单网页，该网页在您的网络浏览器中显示"Hello world"消息。

第 1 步：创建基本 HTML 文件

打开您喜欢的代码编辑器并创建一个新的 HTML 文件。从一个空窗口开始，输入以下代码并将其保存为桌面上的"basic.html"。

示例

Try this code »

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

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

第 2 步：使这个 HTML 文件成为 Bootstrap 模板

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

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Basic Bootstrap Template</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 在窗口对象中检测到 jQuery，它会将其所有组件添加到 jQuery 的插件系统中。您将在本教程系列的高级部分了解它们。

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

第 3 步：保存和查看文件

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

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

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

下载 Bootstrap 文件

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

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

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

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

提示： 不需要单独包含所需的 Popper.js（为了使 Bootstrap 的 tooltip 和 popover 组件工作），因为它已经包含在"bootstrap.bundle.js"和缩小的"bootstrap"中 .bundle.min.js"文件。

Bootstrap 入门