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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 警告(Alerts)</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <div class="alert alert-success">成功!很好地完成了提交。</div>
<div class="alert alert-info">信息!请注意这个信息。</div>
<div class="alert alert-warning">警告!请不要提交。</div>
<div class="alert alert-danger">错误!请进行一些更改。</div> </body>
</html>

结果如下所示:

可取消的警告(Dismissal Alerts)

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

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

下面的实例演示了这点:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 可取消的警告(Dismissal Alerts)</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <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> </body>
</html>

请确保使用带有 data-dismiss="alert" data 属性的 <button> 元素。

结果如下所示:

警告(Alerts)中的链接

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

  • 通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框。
  • 使用 .alert-link 实体类来快速提供带有匹配颜色的链接。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 警告(Alerts)中的链接</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <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> </body>
</html>

结果如下所示:

Bootstrap <基础二十五>警告(Alerts)的更多相关文章

  1. Bootstrap <基础二十九>面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  2. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  3. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

  4. Bootstrap<基础二十四> 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

  5. Bootstrap <基础二十二>超大屏幕(Jumbotron)

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

  6. Bootstrap<基础二十> 标签

    Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...

  7. 夯实Java基础(二十五)——JDBC使用详解

    1.JDBC介绍 JDBC的全称是Java Data Base Connectivity(Java数据库连接).是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问(例如MyS ...

  8. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  9. Bootstrap <基础三十>Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

随机推荐

  1. windows系统中WIN键的快捷组合

    1.WIN+E    打开我的电脑(计算机) 2.WIN+D      返回桌面 当你在用聊天工具与朋友聊天时,旁边突然出现某位小伙伴,快速按下WIN+D返回到桌面就可以很好的保护你的聊天内容啦! 3 ...

  2. 如何为数据源向导填加一种自定义的数据源类型(win示例)

    https://www.devexpress.com/Support/Center/Example/Details/T310160

  3. Web墨卡托投影(转)

    Google Maps地图投影全解析(1):Web墨卡托投影 Google Maps.Virtual Earth等网络地理所使用的地图投影,常被称作Web Mercator或Spherical Mer ...

  4. 优秀开发人员网站推荐。——Arvin

    常用论坛汇总:智能车制作论坛:http://www.znczz.com/中国电子网:http://www.21ic.com/爱板网:http://www.eeboard.com/电子发烧友:http: ...

  5. WF2013Low Power芯片

    Description     有n个机器,每个机器有2个芯片,每个芯片可以放k个电池.     每个芯片能量是k个电池的能量的最小值.     两个芯片的能量之差越小,这个机器就工作的越好.     ...

  6. 转!!负载均衡器技术Nginx和F5的优缺点对比

    对于数据流量过大的网络中,往往单一设备无法承担,需要多台设备进行数据分流,而负载均衡器就是用来将数据分流到多台设备的一个转发器. 目前有许多不同的负载均衡技术用以满足不同的应用需求,如软/硬件负载均衡 ...

  7. openssl stack 数据结构栈基本操作

    堆栈是两种不同的数据结构: 堆:数据先进先出: 栈:数据先进后观: 在stack.h 中 openssl 为我们提供了一个通用的栈,利用提供的接口我们可以方便的用此栈来存放开发中的任意数据. open ...

  8. 磁盘文件系统Fat、Fat32、NTFS、exFAT的优缺点

    我们在Windows系统里格式化磁盘的时候,文件系统的选项里可以看到有“FAT”.“FAT32”.“NTFS”等选项,在对U盘或其他移动存储设备 格式化的时候还会出现“exFAT”选项,那么这四种磁盘 ...

  9. VMware Workstation 10+Centos7(64位)共享文件夹

    这一两天一直在研究VMware Workstation自带的共享文件夹的功能,期间出了不少问题,在公司搭建的是vm10.0+centos07,在家搭建的是VM 7+centos07... 公司环境搭建 ...

  10. asp.net 解决 "回发或回调参数无效" 一些常见解决方案

    一.回发或回调参数无效,出现下图错误, 常见解决方案: 1.在页面的<%@ Page Language="C#"  AutoEventWireup="true&qu ...