首页 >web前端 >Bootstrap教程 >一招搞定bootstrap警告框

一招搞定bootstrap警告框

醉折花枝作酒筹
醉折花枝作酒筹原创
2021-03-31 17:56:302149浏览

警告框可以通过灵活的提供一些预定义信息,为用户反馈一些内容和提示。今天我们来介绍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>

H`28EB6R9YG@I5CRF]{`B_U.png

可关闭警告框

在警告框中加入.alert-dismissible 类和一个关闭按钮,则成为一个可以关闭的警告框。为了保证该操作可行,需要给 bb9345e55eb71822850ff156dfde57c8 元素添加 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>

G36LWG71S8Z[BUV~]2)P[D3.png

警告中的链接

.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警告框的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn