bootstrap4 入门使用——迹忆客-ag捕鱼王app官网

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

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

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

使用 bootstrap 创建第一个网页

现在我们将通过 cdn 包含 bootstrap css 和 js 文件来创建一个基本的 bootstrap 网页。

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

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

步骤 1：创建基本 html 文件

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

basic.html

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

步骤 2：将此 html 文件设为 bootstrap 模板

为了使这个纯 html 文件成为 bootstrap 模板，只需使用 cdn 链接包含 bootstrap4 的 css 和 js 文件。此外，还应该在页面底部包含 javascript 文件，就在结束标记之前，以提高网页的性能。

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

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

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

步骤 3：保存和查看文件

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

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

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

下载 bootstrap 文件

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

编译下载包含编译和 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 文件将提高网站的性能并节省宝贵的带宽。