Bootstrap警告（Alerts）的实现方法_bootstrapalert资源-CSDN文库

96 浏览量 2020-08-31 01:31:17 上传评论收藏 45KB PDF 举报

Bootstrap 警告（Alerts）的实现方法详解 Bootstrap 警告（Alerts）是一种常用的交互式反馈机制，用于向用户提供重要信息、警示或提示。Bootstrap 提供了一种简洁易用的方法来实现警告框的创建。下面将详细介绍 Bootstrap 警告（Alerts）的实现方法。一、基本警告框 Bootstrap 提供了四种基本警告框样式，分别是： * `.alert-success`：绿色背景，用于表示成功或确认信息 * `.alert-info`：蓝色背景，用于表示信息或提示 * `.alert-warning`：黄色背景，用于表示警示或警告 * `.alert-danger`：红色背景，用于表示错误或危险信息要创建一个基本的警告框，只需要创建一个 `<div>` 元素，并添加相应的警告框样式类即可。例如： ```html <div class="alert alert-success">成功！很好地完成了提交。</div> <div class="alert alert-info">信息！请注意这个信息。</div> ``` 二、可取消的警告框（Dismissal Alert）如果要创建一个可取消的警告框，需要添加 `.alert-dismissable` 类，并添加一个关闭按钮。关闭按钮可以点击关掉警告框。 ```html <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 警告！请不要提交。 </div> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 错误！请进行一些更改。 </div> ``` 注意：在创建关闭按钮时，需要添加 `data-dismiss="alert"` 属性，以便Bootstrap能够正确地处理警告框的关闭事件。三、完整示例下面是一个完整的示例，展示了基本警告框和可取消的警告框的使用： ```html <!DOCTYPE html> <html> <head> <title>Bootstrap 页面标题（Page Header）</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > </head> <body> <div class="container"> <div class="alert alert-success">成功！很好地完成了提交。</div> <div class="alert alert-info">信息！请注意这个信息。</div> <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 警告！请不要提交。 </div> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 错误！请进行一些更改。 </div> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> ``` Bootstrap 警告（Alerts）的实现方法非常简洁易用，只需要添加相应的类名和样式就可以创建基本或可取消的警告框。

资源推荐

资源详情

资源评论