Bootstrap 模态框（Modal）使用教程

2026-01-17 08:29:38作者：农烁颖Land

Bootstrap 的模态框组件提供了一种方便的方式来在页面上弹出临时内容，如警告、表单或详细信息，而不需要离开当前页面。本教程将指导你如何设置和使用这个功能。

1. 项目目录结构及介绍

由于提供的链接并不是一个实际的代码库克隆，我们不能直接查看具体的目录结构。然而，一个典型的Bootstrap项目包括以下几个关键部分：

dist/: 包含编译好的CSS、JS和其他生产环境使用的资源。
src/: 存放源码，用于构建和定制Bootstrap。
scss/: SCSS文件夹，包含所有原始的Sass样式文件。
js/: JavaScript 文件夹，包括源代码和组件文件。
docs/: 文档相关的文件，通常包含了示例和API说明。
package.json: 项目依赖管理文件，用于npm安装和脚本执行。

2. 项目启动文件介绍

Bootstrap 的模态框主要通过HTML、CSS和JavaScript进行交互。在你的HTML中，你需要以下元素来创建一个基本的模态框：

<!-- 模态触发按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

在此，data-toggle="modal" 和 data-target="#myModal" 属性用于触发模态框显示，data-dismiss="modal" 则用于关闭模态框。

3. 项目的配置文件介绍

Bootstrap 模态框主要依赖于核心的Bootstrap CSS和JavaScript库。在你的项目中，你需要引入这些库。通常，这可以通过CDN链接或者从本地构建文件中导入完成。例如，在HTML文件的<head>标签内添加以下链接：

<!-- 最新的 Bootstrap 核心 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">

<!-- 可选的 Bootstrap 主题文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@themesget/comfy/dist/css/theme-bootstrap.min.css">

<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

如果你选择在本地开发环境中使用，那么这些文件将位于dist/目录下，你可以替换为相应的本地路径。

请注意，Bootstrap 5.x 已经不再依赖jQuery，但是为了兼容性，这里依然使用了它来演示模态框的JavaScript行为。在实际项目中，你可以根据需求决定是否使用jQuery。

希望这篇简短的教程对你理解和使用Bootstrap模态框有所帮助。更多详细的文档和示例可以在官方文档中找到：Bootstrap 官方文档。

bootstrap-modal

Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.

项目地址：https://gitcode.com/gh_mirrors/bo/bootstrap-modal

登录后查看全文

Bootstrap 模态框（Modal）使用教程

1. 项目目录结构及介绍

2. 项目启动文件介绍

3. 项目的配置文件介绍

项目优选