Bootstrap 警告

原文请见 Bootstrap 警告

警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。

您可以为警告框添加一个可选的关闭按钮。

您可以通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 警告（Alerts）</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body><div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！请注意这个信息。</div>
<div class="alert alert-warning">警告！请不要提交。</div>
<div class="alert alert-danger">错误！请进行一些更改。</div></body>
</html>

1. 可取消的警告（Dismissal Alerts）

创建一个可取消的警告（Dismissal Alert）步骤如下：

通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
同时向上面的 <div> class 添加可选的 .alert-dismissable。
添加一个关闭按钮。

<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert"aria-hidden="true">&times;</button>成功！很好地完成了提交。
</div><div class="alert alert-info alert-dismissable"><button type="button" class="close" data-dismiss="alert"aria-hidden="true">&times;</button>信息！请注意这个信息。
</div><div class="alert alert-warning alert-dismissable"><button type="button" class="close" data-dismiss="alert"aria-hidden="true">&times;</button>警告！请不要提交。
</div><div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert"aria-hidden="true">&times;</button>错误！请进行一些更改。
</div>

Bootstrap 警告相关推荐

Bootstrap警告框
前面的话在网站中,网页总是需要和用户一起做沟通与交流.特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功.操作错误.提示或者警告等.在Bootstrap框架有一个独立的组件,实 ...
Bootstrap警告框、弹出提示层、模态框的js插件效果总结
Bootstrap警告框js插件经常会在bootstrap项目中遇到警告框.弹出提示层.弹出模态框组件等等场景应用. 使用前准备: 插件使用之前,请先导入如下文件: jquery.min.js bo ...
Bootstrap 警告框插件Alert 的事件
事件 Bootstrap警告框插件Alert有两个事件,一个是close,一个是closed,它们的含义见表 5‑6. 表 5‑6 警告框的事件及含义事件含义 close 调用close方法时,立 ...
Bootstrap 警告框插件Alert
警告框 Bootstrap警告框插件Alert需要 bootstrap-alert.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-alert.js 文件. 使用方法 ...
Bootstrap 警告框的外观
警告框的外观 Bootstrap还提供了 3 个可选的情景类 .alert-error..alert-success 和 .alert-info,用于改变警告框和警告块的背景颜色,以及警告框和警告块中 ...
Bootstrap 警告块
警告块如果警告框中包含多行文本,可以追加一个 .alert-block 类,来增加警告框的上下内边距,让多行文本看起来更舒服.如: <div class="alert alert-b ...
Bootstrap 警告框
警告框在交互式网页中,经常要根据用户操作的上下文,比如操作成功.操作失败等,为用户提供灵活的提示信息. 警告框警告框用于为成功.警告和错误信息提供样式.默认的警示框可以通过给 <div> ...
3.15 Bootstrap 警告(Alerts)
文章目录 Bootstrap 警告(Alerts) 可取消的警告(Dismissal Alerts) 警告(Alerts)中的链接 Bootstrap 警告(Alerts) 本章将讲解警告(Alert ...
Bootstrap 警告框（Alert）插件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...

Bootstrap 警告

1. 可取消的警告（Dismissal Alerts）

Bootstrap 警告相关推荐

最新文章

热门文章