Bootstrap4组件：警告提示框(Alert)
警告提示框(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，可以实现警报效果，贴在页面上，并可以自由关闭，其要点如下：
- 确保你正确加载了.alert警报组件，或者是编译后的 Bootstrap JavaScript代码组。
- 如果你要自行编译JavaScript组件，请将必须的 util.js包括进去。
- 可以在右上角定义一个.close关闭按钮效果，则需要在容器中引用 .alert-dismissible 类。
- 警告按钮上要增加data-dismiss="alert" 触发 JavaScript 动作，同时使用<button>元素，以确保在所有设备上都能获得正确的行为响应。
- 要在关闭警报时生成警报提示，请确保添加.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行为
方法
- .alert(‘close’)
例子：
事件
(1) close.bs.alert 点击关闭×号前
(2) closed.bs.alert 关闭×号后
0
年 月 归 档
点 赞 最 多
- python程序打包成exe可执行文件 50
- Django Rest Framework+art-template实现文章异步加载 25
- 【小白实战】利用django2.0，搭建属于自己的博客（五） 10
- 网站图片转存到七牛云并在首页使用七牛云外链地址（1） 8
- Django Haystack + jieba 实现站内全文检索与关键词高亮 7
- django2.0-再启程【项目环境搭建流程与命令】 6
- Bootstrap4组件：轮播效果(Carousel) 5
- 解决表单提交时候防攻击的代码问题 4
- django-【Django模板】DTL常用过滤器（1） 3
- wordcloud自动生成词云图 之自定义django中间件 3
登陆后方可评论