栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > Bootstrap教程

Bootstrap 警告(Alerts) · Bootstrap教程

Bootstrap 警告(alerts)

本章将讲解警告(alerts)以及 Bootstrap 所提供的用于警告的 class。警告(alerts)向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。

您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框,请使用 警告(alerts) jQuery 插件。

您可以通过创建一个 ,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框。下面的实例演示了这点:




   Bootstrap 实例 - 警告(alerts)
   
   
   



成功!很好地完成了提交。
信息!请注意这个信息。
警告!请不要提交。
错误!请进行一些更改。



结果如下所示:


警告(alerts)

可取消的警告(Dismissal alerts)

创建一个可取消的警告(Dismissal alert)步骤如下:

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

下面的实例演示了这点:




   Bootstrap 实例 - 可取消的警告(Dismissal alerts)
   
   
   




   
   成功!很好地完成了提交。


   
   信息!请注意这个信息。


   
   警告!请不要提交。


   
   错误!请进行一些更改。






请确保使用带有 data-dismiss="alert" data 属性的

结果如下所示:


可取消的警告(Dismissal alerts)

警告(alerts)中的链接

在警告(alerts)中创建链接的步骤如下:

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



   Bootstrap 实例 - 警告(alerts)中的链接
   
   
   




   成功!很好地完成了提交。


   信息!请注意这个信息。


   警告!请不要提交。


   错误!请进行一些更改。




结果如下所示:


警告(alerts)中的链接

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/10686.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号