Bootstarp 4 入门之提醒框

提醒框

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

语法

class="alert alert-类型"

类型

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

对应如下颜色
描述

携带链接alert-link

<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,图片截图粘贴拖拽都可以自动上传。