Bootstrap入门

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

Bootstrap 入门

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

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

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

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

现在我们将通过包含 Bootstrap CSS 和 JS 文件以及其他 JavaScript 依赖项（例如通过 CDN 的 jQuery 库）来创建一个基本的 Bootstrap 模板。

我们建议通过 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 文件以及所需的 jQuery。

您应该在页面底部、关闭 </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 file -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
    <h1>Hello, world!</h1>
    <!-- JS files: jQuery first, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

一切准备就绪！ 添加 Bootstrap 的 CSS 和 JS 文件以及所需的 jQuery 库后，我们就可以开始使用 Bootstrap 框架开发任何网站或应用程序了。

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

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

第 3 步：保存和查看文件

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

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

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

下载 Bootstrap 文件

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

编译下载包含 CSS 和 JavaScript 文件的编译和缩小版本，用于更快、更轻松的 Web 开发。然而，编译后的版本不包含任何可选的 JavaScript 依赖项，例如 jQuery。然而，源下载包含所有 CSS 和 JavaScript 的原始源文件，以及文档的本地副本。

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

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

提示： 请注意，Bootstrap 的 JavaScript 插件需要包含 jQuery。您可以在此处下载最新版本的 jQuery 表单 https://jquery.com/download/。但是，不需要单独包含所需的 Popper.js（用于工具提示和弹出框工作），因为它已经包含在"bootstrap.bundle.min.js"文件中。

Bootstrap入门