Bootstrap4组件:警告提示框(Alert)


发布时间:2020-03-18 20:20    作者: Uncle Hui   已过去:4 月,2 周   阅读总量:199 已被赞:0


警告提示框(Alert)

示例

警告提示框

<div class="alert alert-primary">

  This is a primary alert—check it out!

</div>

<div class="alert alert-secondary">

  This is a secondary alert—check it out!

</div>

<div class="alert alert-success">

  This is a success alert—check it out!

</div>

<div class="alert alert-danger">

  This is a danger alert—check it out!

</div>

<div class="alert alert-warning">

  This is a warning alert—check it out!

</div>

<div class="alert alert-info">

  This is a info alert—check it out!

</div>

<div class="alert alert-light">

  This is a light alert—check it out!

</div>

<div class="alert alert-dark">

  This is a dark alert—check it out!

</div>

链接颜色

使用 .alert-link 类可以为带颜色的警告文本框中的链接加上合适的颜色(BootStrap已经内置了相应的颜色解决方案,会自动对应有一个优化后的链接颜色方案)。

<div class="alert alert-primary">

  This is a primary alert with <a href="#"晖叔学编程</a>. Give it a click if you like.

</div>

<div class="alert alert-primary">

  This is a primary alert with <a href="#" class="alert-link"> 晖叔学编程 </a>. Give it a click if you like.

</div>

<div class="alert alert-secondary">

  This is a secondary alert with <a href="#" class="alert-link"> 晖叔学编程 </a>. Give it a click if you like.

</div>

<div class="alert alert-success">

  This is a success alert with <a href="#" class="alert-link"> 晖叔学编程 </a>. Give it a click if you like.

</div>

<div class="alert alert-danger">

  This is a danger alert with <a href="#" class="alert-link"> 晖叔学编程 </a>. Give it a click if you like.

</div>

<div class="alert alert-warning">

  This is a warning alert with <a href="#" class="alert-link"> 晖叔学编程 </a>. Give it a click if you like.

</div>

<div class="alert alert-info">

  This is a info alert with <a href="#" class="alert-link"> 晖叔学编程 </a>. Give it a click if you like.

</div>

<div class="alert alert-light">

  This is a light alert with <a href="#" class="alert-link"> 晖叔学编程 </a>. Give it a click if you like.

</div>

<div class="alert alert-dark">

  This is a dark alert with <a href="#" class="alert-link"> 晖叔学编程 </a>. Give it a click if you like.

</div>

额外附加内容

警报还可以包含其他HTML元素,如标、段落和分隔符。

<div class="alert alert-success">

<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结合JavaScript,可以实现警报效果,贴在页面上,并可以自由关闭,其要点如下:

  1. 确保你正确加载了.alert警报组件,或者是编译后的 Bootstrap JavaScript代码组。
  2. 如果你要自行编译JavaScript组件,请将必须的 util.js包括进去。
  3. 可以在右上角定义一个.close关闭按钮效果,则需要在容器中引用 .alert-dismissible 类。
  4. 警告按钮上要增加data-dismiss="alert" 触发 JavaScript 动作,同时使用<button>元素,以确保在所有设备上都能获得正确的行为响应。
  5. 要在关闭警报时生成警报提示,请确保添加.fade.show样式。

(关闭警报会将其从DOM中移除)

<div class="alert alert-danger alert-dismissible fade show">

<strong>登录失败!</strong> 您的用户名或密码错误.

<button type="button" class="close" data-dismiss="alert">×</button>

</div>

JavaScript行为

方法

  1. .alert(‘close’)

例子:

事件

(1) close.bs.alert 点击关闭×号前

(2) closed.bs.alert 关闭×号后

 

点赞

0




登陆后方可评论