• 技术文章 >web前端 >Bootstrap教程

    一招搞定bootstrap警告框

    醉折花枝作酒筹醉折花枝作酒筹2021-03-31 18:00:34原创126
    警告框可以通过灵活的提供一些预定义信息,为用户反馈一些内容和提示。今天我们来介绍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 类和一个关闭按钮,则成为一个可以关闭的警告框。为了保证该操作可行,需要给 <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>

    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中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:bootstrap
    上一篇:三分钟带你了解bootstrap下拉菜单 下一篇:详细了解Bootstrap中的分页组件
    第15期线上培训班

    相关文章推荐

    • Bootstrap学习之按钮组件(二)• 详解Bootstrap中的表单• 聊聊Bootstrap4中的网格系统• 浅谈Bootstrap3中的下拉菜单事件• 详解Bootstrap中的标签、徽章、巨幕和页头• 三分钟带你了解bootstrap下拉菜单

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网