Bootbox.js旨在使使用Bootstrap modals更容易!请遵循以下指南,您应该立即启动并运行。

可以通过两种简单的方法将Bootbox添加到您的项目中:

通过npm

npm i bootbox

下载Bootbox后,请跳至“ 使用说明”以获取有关设置库的帮助。

所有版本的Bootbox都站在两个伟大的巨人的肩上:Bootstrap和jQuery。Bootstrap的确切版本取决于您使用的Bootbox的版本。这已经变得比我们想要的要复杂一些,但是希望这个方便的表格可以解决问题:

Bootbox 版本最低Bootstrap 版本最高Bootstrap最低jQuery
5.x.x Latest3.0.0 *4.x.x1.9.1
4.x.x3.0.03.4.x1.9.1
3.x.x2.2.22.3.21.8.3
2.x.x2.0.02.0.41.7.1
1.x.x1.3.01.4.01.7.1
* *有些选项(例如size)需要Bootstrap 3.1.0或更高版本。

如果您使用的是Bootstrap 4,则还必须包含Popper.js。如果您愿意,Bootstrap当前还会在预编译版本中包含bootstrap.bundle.min.js文件,该文件将Popper.js与bootstrap.js源文件结合在一起。

依赖项进行排序后,用法就非常简单了,就像您曾经使用过的任何其他JavaScript库一样。该库创建一个bootbox对象的单个全局实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My page</title>

    <!-- CSS dependencies -->
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>

    <p>Content here. <a class="show-alert" href=#>Alert!</a></p>

    <!-- JS dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Bootstrap 4 dependency -->
    <script src="popper.min.js"></script>
    <script src="bootstrap.min.js"></script>

    <!-- bootbox code -->
    <script src="bootbox.min.js"></script>
    <script src="bootbox.locales.min.js"></script>
    <script>
        $(document).on("click", ".show-alert", function(e) {
            bootbox.alert("Hello world!", function() {
                console.log("Alert Callback");
            });
        });
    </script>
</body>
</html>

注意脚本引用的顺序

由于Bootbox是Bootstrap模态功能的包装,因此您需要按顺序包含这些库:

  1. jQuery
  2. Popper.js
  3. Bootstrap
  4. Bootbox
  5. Bootbox Locales (可选-如果仅需要默认的英语语言环境,则省略)

当您启动并运行时,请查看一些示例文档