Bootbox.js旨在使使用Bootstrap modals更容易!请遵循以下指南,您应该立即启动并运行。
下载
可以通过两种简单的方法将Bootbox添加到您的项目中:
通过npm
npm i bootbox
直接下载
Development: | bootbox.js , bootbox.locales.js , bootbox.all.js |
---|---|
Production: | bootbox.min.js , bootbox.locales.min.js |
Production, with locales: | bootbox.all.min.js |
下载Bootbox后,请跳至“ 使用说明”以获取有关设置库的帮助。
依存关系
所有版本的Bootbox都站在两个伟大的巨人的肩上:Bootstrap和jQuery。Bootstrap的确切版本取决于您使用的Bootbox的版本。这已经变得比我们想要的要复杂一些,但是希望这个方便的表格可以解决问题:
Bootbox 版本 | 最低Bootstrap 版本 | 最高Bootstrap | 最低jQuery | 说明 |
---|---|---|---|---|
5.x.x Latest | 3.0.0 * | 4.x.x | 1.9.1 | C当前版本。更新以支持Bootstrap4。与Bootstrap 3保持兼容性。 |
4.x.x | 3.0.0 | 3.4.x | 1.9.1 | 完全重写以支持Bootstrap 3.0.0。 |
3.x.x | 2.2.2 | 2.3.2 | 1.8.3 | 支持Bootstrap 2的最新版本。 |
2.x.x | 2.0.0 | 2.0.4 | 1.7.1 | 如您所见,Bootstrap 2.1.x从未得到正式支持。 |
1.x.x | 1.3.0 | 1.4.0 | 1.7.1 | 不要下载此版本的Bootbox,因为它太旧了。 |
* *有些选项(例如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模态功能的包装,因此您需要按顺序包含这些库:
- jQuery
- Popper.js
- Bootstrap
- Bootbox
- Bootbox Locales (可选-如果仅需要默认的英语语言环境,则省略)