您现在的位置是:群英 > 开发技术 > web开发
Bootstrap怎么实现警告框,可关闭警告框不同在在哪
Admin发表于 2022-05-07 17:07:16765 次浏览
这篇文章主要给大家介绍“Bootstrap怎么实现警告框,可关闭警告框不同在在哪”的相关知识,下文通过实际案例向大家展示操作过程,内容简单清晰,易于学习,有这方面学习需要的朋友可以参考,希望这篇“Bootstrap怎么实现警告框,可关闭警告框不同在在哪”文章能对大家有所帮助。

警告框可以通过灵活的提供一些预定义信息,为用户反馈一些内容和提示。今天我们来介绍bootstrap警告框,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

警告框

将文本和一个可选择的按钮放在一起,就是一个警告框,使用警告框必须设置.alert,还有其他的类可供选择。目前提供了成功、消息、警告或危险。

<div class="alert alert-success" role="alert">成功</div>
    <div class="alert alert-info" role="alert">你有一条新消息</div>
    <div class="alert alert-warning" role="alert">警告!!!</div>
    <div class="alert alert-danger" role="alert">本次操作危险,是否继续?</div>

可关闭警告框

在警告框中加入.alert-dismissible 类和一个关闭按钮,则成为一个可以关闭的警告框。为了保证该操作可行,需要给 <button> 元素添加 data-dismiss="alert" 属性。

<div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>警告!</strong> 本次操作有风险,是否继续?
</div>

警告中的链接

.alert-link 可以为链接设置与当前警告框相同的颜色。

 <div class="alert alert-success" role="alert">
        <a href="#" class="alert-link">成功</a>
      </div>
      <div class="alert alert-info" role="alert">
        <a href="#" class="alert-link">你有一条新消息</a>
      </div>
      <div class="alert alert-warning" role="alert">
        <a href="#" class="alert-link">警告!!!</a>
      </div>
      <div class="alert alert-danger" role="alert">
        <a href="#" class="alert-link">本次操作危险,是否继续?</a>
    </div>

此次就不演示了,演示了图片也看不出,还是自己亲身实践比较好。


关于“Bootstrap怎么实现警告框,可关闭警告框不同在在哪”的内容就介绍到这,感谢各位的阅读,相信大家对Bootstrap怎么实现警告框,可关闭警告框不同在在哪已经有了进一步的了解。大家如果还想学习更多知识,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: bootstrap警告框
相关信息推荐
2022-09-29 17:50:02 
摘要:这篇文章主要为大家介绍了Go语言开发必知的一个内存模型细节详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-09-21 09:30:52 
摘要:这篇文章主要介绍了如何利用PHP实现连接SQL数据库,从而对页面进行增删改查功能,文中的示例代码讲解详细,感兴趣的可以了解一下
2022-10-13 17:46:28 
摘要:在c语言中,可以通过“(新类型名称) 数据或表达式”语句来进行强制类型转换;例如“(float) 100”就是将数值100(默认为int类型)转换为float类型,“(int)(x+y)”就是将表达式“x+y”的结果转换为int整型。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部