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警告框的使用方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！