正文

如何在HTML页面中正确引入Bootstrap库文件

/0 浏览量
1015

在HTML页面中引入Bootstrap库文件是使用Bootstrap框架的基础步骤。Bootstrap是一个流行的前端框架，它可以帮助开发者快速构建响应式和移动优先的网站。以下是在HTML页面中正确引入Bootstrap库文件的详细步骤：

1. 选择Bootstrap版本

首先，你需要选择一个Bootstrap版本。Bootstrap提供了CDN（内容分发网络）链接，你可以直接从CDN引入Bootstrap，也可以下载到本地使用。

目前，Bootstrap有两个主要版本：

  • Bootstrap 4
  • Bootstrap 5

2. 从CDN引入Bootstrap

如果你选择从CDN引入Bootstrap，以下是两种方法：

方法一：引入Bootstrap 4

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 示例</title>
  <!-- 引入Bootstrap 4 CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<!-- 页面内容 -->

<!-- 引入Bootstrap 4 JS -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

方法二：引入Bootstrap 5

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 示例</title>
  <!-- 引入Bootstrap 5 CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
</head>
<body>

<!-- 页面内容 -->

<!-- 引入Bootstrap 5 JS -->
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>
</body>
</html>

3. 从本地下载Bootstrap

如果你选择从本地下载Bootstrap，你需要按照以下步骤操作：

  1. 访问Bootstrap官网（https://getbootstrap.com/）。
  2. 选择合适的版本，并下载压缩包。
  3. 解压下载的压缩包，找到dist文件夹。
  4. 将dist文件夹中的css和js文件夹中的文件复制到你的项目目录中。

然后，在HTML页面中引入这些文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 本地示例</title>
  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="path/to/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>

<!-- 页面内容 -->

<!-- 引入Bootstrap JS -->
<script src="path/to/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

确保将path/to/bootstrap/dist/css/bootstrap.min.css和path/to/bootstrap/dist/js/bootstrap.min.js替换为实际的文件路径。

通过以上步骤，你就可以在HTML页面中正确引入Bootstrap库文件，并开始使用Bootstrap框架构建你的网站了。

-- 展开阅读全文 --