正文

掌握Bootstrap弹出层所需引入的JS文件：Bootstrap核心JS、jQuery库和Popper.js

/0 浏览量
0508

在使用Bootstrap创建弹出层（Modal）时，正确引入相应的JavaScript文件是非常重要的。以下是三个核心文件的作用和引入方法：

1. Bootstrap核心JS文件

文件名：bootstrap.bundle.js 或 bootstrap.bundle.min.js（取决于是否需要压缩）

作用：Bootstrap的核心JavaScript文件包含了所有Bootstrap的JavaScript组件和实用工具，例如弹出层、下拉菜单、轮播图等。

引入方法：

<!-- 下载地址：https://getbootstrap.com/docs/5.0/getting-started/download/ -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

2. jQuery库

文件名：jQuery.js 或 jQuery.min.js

作用：jQuery是一个快速、小型且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和AJAX操作。Bootstrap依赖于jQuery来运行其大部分组件。

引入方法：

<!-- 下载地址：https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

3. Popper.js

文件名：popper.js 或 popper.min.js

作用：Popper.js是一个基于原生JavaScript的库，用于为Bootstrap的弹出层、下拉菜单、悬停菜单等提供位置计算功能。它允许这些组件以正确的方式定位，尤其是在响应式设计中。

引入方法：

<!-- 下载地址：https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@2.9.2/dist/umd/popper.min.js"></script>

引入顺序

确保按照以下顺序引入这些文件，因为Bootstrap依赖于jQuery和Popper.js：

  1. jQuery库
  2. Popper.js
  3. Bootstrap核心JS

示例代码

以下是一个完整的HTML示例，展示了如何正确引入这些文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Modal Example</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 引入Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@2.9.2/dist/umd/popper.min.js"></script>
    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <!-- 创建一个简单的弹出层 -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
       Launch demo modal
    </button>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

通过正确引入这些文件，你可以在网页上使用Bootstrap的弹出层功能。记得在使用之前查看Bootstrap的官方文档以获取最新信息和更新。

-- 展开阅读全文 --