Bootstrap系列之警告框(Alert)
文章の目录
- 1、示例
- 1.1、链接的颜色
- 1.2、添加其它内容
- 1.3、关闭警告框
- 2、通过 JavaScript 触发行为
- 2.1、触发器
- 2.2、本组件所暴露的方法
- 2.3、本组件所暴露的事件
- 写在最后
通过精炼且灵活的警告消息为典型的用户操作提供契合上下文的反馈。
1、示例
警告框(alert)组件能够展示任意长度的文本以及一个可选的关闭按钮。为了展示合适的样式,必须 从下列 8 个情境类(例如 .alert-success
)中选择一个合适的并使用。中选择一个合适的并使用。如需内联一个关闭按钮,请使用 警告框(alert)的 JavaScript 插件。
<div class="alert alert-primary" role="alert">A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">A simple dark alert—check it out!
</div>
向辅助技术传递意义
使用颜色来添加含义只提供了一种视觉指示,而不会向使用屏幕阅读器等辅助技术的用户传达这种指示。确保由颜色表示的信息从内容本身(例如可见的文本)中是明显的,或者通过其他方式包含,例如用.sr-only
类隐藏的附加文本。
1.1、链接的颜色
通过使用 .alert-link
工具类可以为任何警告框(alert)组件添加颜色相匹配的链接。
<div class="alert alert-primary" role="alert">A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
1.2、添加其它内容
警告框(alert)组件还可以包含其它 HTML 元素,例如标题、段落、分割线等。
<div class="alert alert-success" role="alert"><h4 class="alert-heading">Well done!</h4><p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><hr><p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
1.3、关闭警告框
通过使用警告框(alert)组件的 JavaScript 插件,可以为任何警告框(alert)组件添加内联的关闭按钮。步骤如下:
- 确保已加载了警告框(alert)组件的 JavaScript 插件,或者是 Bootstrap 的预编译 JavaScript 文件。
- 如果你是自行编译的 JavaScript 源码,那么 需要依赖 util.js 文件。预编译版本已经包含了该文件。
- 添加关闭按钮和
.alert-dismissible
类,这将在警告框(alert)组件的右侧增加额外的空间并放置关闭按钮(.close
)。 - 在关闭按钮上添加
data-dismiss="alert"
属性,该属性会触发 JavaScript 代码。请务必使用<button>
元素,以确保在所有设备上都具有正确的行为。 - 如需在关闭警告框(alert)时展示动画效果,请确保添加
.fade
和.show
。
以下是演示效果:
<div class="alert alert-warning alert-dismissible fade show" role="alert"><strong>Holy guacamole!</strong> You should check in on some of those fields below.<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
2、通过 JavaScript 触发行为
2.1、触发器
通过 JavaScript 代码关闭警告框(alert):
$('.alert').alert()
或者在 警告框(alert)组件内 添加一个按钮,并为按钮设置相应的 data 属性,如下所示:
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
</button>
请注意,关闭的警告框(alert)将被从 DOM 中删除。
2.2、本组件所暴露的方法
$('.alert').alert('close')
2.3、本组件所暴露的事件
Bootstrap 的警告框(alert)插件暴露了一些可以监听的事件。
$('#myAlert').on('closed.bs.alert', function () {// do something...
})
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//
,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L;~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※
!!!
Bootstrap系列之警告框(Alert)相关推荐
- Bootstrap组件_警告框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- Bootstrap系列之模态框(Modal)
文章の目录 1.工作原理 2.示例 2.1.Modal组件 2.2.在线演示 2.3.静态背景 2.4.滚动内容 2.5.垂直居中 2.6.提示和弹窗 2.7.使用网格 2.8.不同模态框的内容 2. ...
- Bootstrap 警告框插件Alert
警告框 Bootstrap警告框插件Alert需要 bootstrap-alert.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-alert.js 文件. 使用方法 ...
- 第二百四十六节,Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...
- Bootstrap 警告框插件Alert 的事件
事件 Bootstrap警告框插件Alert有两个事件,一个是close,一个是closed,它们的含义见表 5‑6. 表 5‑6 警告框的事件及含义 事件 含义 close 调用close方法时,立 ...
- Bootstrap 警告框(Alert)插件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
- Bootstrap入门(三十)JS插件7:警告框
Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...
- Bootstrap警告框
前面的话 在网站中,网页总是需要和用户一起做沟通与交流.特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功.操作错误.提示或者警告等.在Bootstrap框架有一个独立的组件,实 ...
- Bootstrap警告框、弹出提示层、模态框的js插件效果总结
Bootstrap警告框js插件 经常会在bootstrap项目中遇到警告框.弹出提示层.弹出模态框组件等等场景应用. 使用前准备: 插件使用之前,请先导入如下文件: jquery.min.js bo ...
最新文章
- Java and Python: a perfect couple - Developer.com
- Jenkins入门总结
- SOCKET/串口通信粘包问题处理,附带详细代码
- ElementUI中el-upload怎样上传文件并且传递额外参数给Springboot后台进行接收
- 定时器注入spring
- gitlab mr wip 怎么弄成_基于GitLab的工作流程设计
- MicropPython的学习,如何从0到1?
- 如果你不会扒谱,来吧,这款软件给你超能力
- 在Java编程中,为什么char类型数组可以直接用数组名打印,而其他类型数组打印结果而是地址值。
- 《岳阳楼记》古文鉴赏
- eclipse 中用svn共享项目
- 举个栗子!Tableau 技巧(184):查看固定或自定义时间段的数据
- PPT文件带有打开密码怎么解决
- 两张图看清英伟达RTX 20系列显卡的新变化
- 换博客拉 http://vergilwang.iteye.com/
- 学习笔记(34):Python 面试100讲(基于Python3.x)-用正则表达式分别提取电话号的区号、电话号和分机号...
- 多少秒算长镜头_电影中什么是长镜头画面(9个经典长镜头)
- JavaMai——邮箱验证用户注册
- 关于成为网络工程师后具体的工作内容的问题
- 通俗来理解 ARM芯片内核,架构,指令集,软核和硬核之间的关系