文章: 阅读:

Bootstrap 警告

CSSBootstrap

前言 🔗

  • 警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。

  • 可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用 警告（Alerts） jQuery 插件。

1、基本警告框

  • 可以通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。

  • 实例

    1
    2
    3
    4
    <div class="alert alert-success">成功！很好地完成了提交。</div>
    <div class="alert alert-info">   信息！请注意这个信息。</div>
    <div class="alert alert-warning">警告！请不要提交。</div>
    <div class="alert alert-danger"> 错误！请进行一些更改。</div>

  • 效果 🔗

2、可取消的警告

  • 创建一个可取消的警告（Dismissal Alert）步骤如下：

    • 通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
    • 同时向上面的 <div> class 添加可选的 .alert-dismissable。
    • 添加一个关闭按钮。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <div class="alert alert-success alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
            &times;
        </button>
        成功！很好地完成了提交。
    </div>
    <div class="alert alert-info alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
            &times;
        </button>
        信息！请注意这个信息。
    </div>
    <div class="alert alert-warning alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
            &times;
        </button>
        警告！请不要提交。
    </div>
    <div class="alert alert-danger alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
            &times;
        </button>
        错误！请进行一些更改。
    </div>

  • 效果 🔗

3、警告中的链接

  • 在警告（Alerts）中创建链接的步骤如下：

    • 通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
    • 使用 .alert-link 实体类来快速提供带有匹配颜色的链接。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div class="alert alert-success">
        <a href="#" class="alert-link">成功！很好地完成了提交。</a>
    </div>
    <div class="alert alert-info">
        <a href="#" class="alert-link">信息！请注意这个信息。</a>
    </div>
    <div class="alert alert-warning">
        <a href="#" class="alert-link">警告！请不要提交。</a>
    </div>
    <div class="alert alert-danger">
        <a href="#" class="alert-link">错误！请进行一些更改。</a>
    </div>

  • 效果 🔗

4、Bootstrap 警告框（Alert）插件

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-10 20:23


评论


文章目录
  1. 1. 前言 🔗
  2. 2. 1、基本警告框
  3. 3. 2、可取消的警告
  4. 4. 3、警告中的链接
  5. 5. 4、Bootstrap 警告框（Alert）插件
隐藏目录