Bootstrap前端开发实例｜创建定时关闭的信息提示框

清华计算机学堂 2022-12-11

650

Bootstrap是Twitter开发的一套Web前端框架，Bootstrap可以简单地理解为：对CSS的再次封装，因此在大多数情况下，对Bootstrap的应用就是对该框架的相关调用。

本系列所有Bootstrap代码基于Bootstrap 4.3.1实现，在IntelliJ IDEA 2019.2.3环境中编写完成，在最新版的“搜狗高速浏览器”和“Google Chrome浏览器”上测试成功，因此建议读者在上述环境或条件下使用源代码。所有源代码不需要下载Bootstrap的其他文件，在使用时保持网络畅通即可。此外，本系列实例推文需要读者有一定的HTML、CSS和JavaScript的基础知识。

下面这个实例演示了创建定时关闭的信息提示框。

实例功能

此实例主要通过使用alert、alert-secondary等类,以及fadeIn()、delay()、fadeOut()等方法，创建自动定时关闭的信息提示框。当在浏览器中显示页面时，单击图像，则将在下面显示Bootstrap4风格的信息提示框，该信息提示框将在显示5秒之后自动关闭，效果分别如图1和图2所示。

■ 图1

■ 图2

实现代码

在上面这段代码中，fadeIn()表示以淡入的风格显示信息提示框。delay(5000)表示延时5秒。fadeOut()表示以淡出的风格关闭信息提示框。class="alert alert-secondary w-100"表示创建灰色背景的信息提示框，除了alert-secondary类之外，还可以使用下列类设置信息提示框的背景：alert-success(绿色)、alert-info(青色)、alert-warning(黄色)、alert-danger(红色)、alert-primary(蓝色)、alert-light(浅色) 或alert-dark(深色)。

此实例的源文件是MyCode＼ChapB＼ChapB058.html。

源代码下载

关注微信公众号，后台回复关键词 “Bootstrap代码111” 即可获得完整源代码。

* 在测试代码时，必须保持网络畅通。

参考图书

《Bootstrap+Vue.js前端开发超实用代码集锦》

ISBN：978-7-302-56815-5

罗帅罗斌编著

定价：99.8元