Bootstarp 4 入门提醒框

提醒框

通过少量可用和灵活的警报消息,为典型的用户操作提供上下文反馈消息。

语法

class="alert alert-类型"

类型

  • primary
  • secondary
  • success
  • danger
  • warning
  • info
  • light
  • dark

对应如下颜色
描述

<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-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>

携带关闭按钮.alert-dismissible

增加.alert-dismissiblealert 类里面,在关闭按钮增加 data-dismiss="alert" 来触发关闭 js.

<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">&times;</span>
  </button>
</div>

js 使用

方法 描述
$().alert() 使警报监听具有该 data-dismiss="alert" 属性的 后代元素上的单击事件(使用data-api的自动初始化时不需要。)
$().alert('close') 通过从DOM中删除警报来关闭警报。如果 元素上存在 .fade.show类,则警报将在消失之前淡出。
$().alert('dispose') 销毁元素的警报。

js 回调监听事件

事件 描述
close.bs.alert 调用时回调
closed.bs.alert 关闭后回调

描述

  $('.alert').on('closed.bs.alert', function () {
        alert('我关闭了哦');
    })
如果你觉得本站帮助到您,麻烦您帮点个小广告支持下本站,感谢不尽。

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。

公告通知

关于网站广告,由于需要营运成本,所以增加了广告联盟。
如果你觉得本站帮助到您,麻烦您帮点个小广告,感谢不尽。

空气

空气

热卖技术,喜欢新东西。

年度VIP 魔童降世
查看更多

最新视频课程

Laravel 消息通知使用

Laravel 的 PhpSpreadsheet 包入门

ace.js 打造一款属于你的 Web 编辑器,入门文档。

wap2App 入门讲解,100%速成,全面为你讲解。

Laravel Permission 中文文档

Laravel 设置请求头 header 参数

Laravel 实现 RBAC 权限管理功能 Permission 包操作

解释 OAuth 2.0 认证 和使用场景说明

KongQi Laravel Admin2.0 文档安装

KongQi Laravel admin2.0 layui admin 版本序言

黑白课堂社区使用如何购买元宝和开通 VIP

易语言入门拖入文件导入到超级列表框表格内

易语言入门易语言定时任务模块

Visual Studio Code 入门和使用教程安装下载

易语言入门TAB 标签页制作

黑白课堂社区使用社区规范说明

钻级赞助商