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

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

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div style="padding:20px">
<p class="alert alert-success">成功，很好地完成了提交。</p>
<p class="alert alert-info">信息，这个消息很重要。</p>
<p class="alert alert-warning">警告，幸好没有进行提交。</p>
<p class="alert alert-danger">错误，请进一步修改。</p>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap 警告(Alerts)的更多相关文章

  1. Bootstrap <基础二十五>警告（Alerts）

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

  2. Bootstrap <基础二十九>面板（Panels）

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

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

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

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

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

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

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

  6. Bootstrap <基础二十二>超大屏幕（Jumbotron）

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

  7. Bootstrap<基础二十> 标签

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

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

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

  9. Bootstrap <基础三十二>模态框（Modal）插件

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

  10. Bootstrap <基础三十>Well

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

随机推荐

  1. 2017-8-31 NOIP模拟赛

    可接受序列 [题目描述] 让计算机这样读入一列非负整数: 1.读入数T. 2.接着往下读入T个数. 3.如果数列读完了,则停止,否则,转到1. 但是,往往会出现这样的问题:执行第2步时,数列已经没有T ...

  2. 洛谷P1582 倒水

    P1582 倒水 题目描述 一天,CC买了N个容量可以认为是无限大的瓶子,开始时每个瓶子里有1升水.接着~~CC发现瓶子实在太多了,于是他决定保留不超过K个瓶子.每次他选择两个当前含水量相同的瓶子,把 ...

  3. Python-10-条件和条件语句

    num = int(input('Enter a number: ')) if num > 0:     print('The number is positive') elif num < ...

  4. fstream类总结

    - ofstream, ifstream, fstream 在头文件fstream中,在fstream类中,用open成员函数打开文件,实现类与文件的关联操作. - open(filename, mo ...

  5. Jmeter4.0----监控服务器性能（7）

    1.说明 JMeter是一款压力测试工具. 通常在压力测试中我们也需要监控和知道服务器的相关资源情况,jmeter本身不具备这个功能,今天我们主要说一下如何通过JMeter插件来监控服务器CPU.内存 ...

  6. SQLServer数据库表字段超长，找到超长字段脚本

    平时开发系统时偶尔会遇到数据超长导致往数据库中保存时出错. 使用下边的脚本可以方便的找出超长的字段. 1.通过正式表创建临时表,修改临时表中varchar.nvarchar的长度为max ); ); ...

  7. Spring Security 5中的默认密码编码器

    1.概述 在Spring Security 4中,可以使用内存中身份验证以纯文本格式存储密码. 对版本5中的密码管理过程进行了重大改进,为密码编码和解码引入了更安全的默认机制.这意味着如果您的Spri ...

  8. 《javascript设计模式》笔记之第九章：组合模式

    之前一直都是按照书的结构顺序做总结,觉得好像不是很好,现在试着完全按照自己的理解做总结.例子还是书上的例子. 一:组合模式的作用: 在web开发中,主要用于创建嵌套的html结点,使得我们方便的把各种 ...

  9. python Fuction 方法的调用

    def display():#无参数 print("No") return # display() def callfun():#调用 print("2") d ...

  10. mysql(数据库，sql语句，普通查询)

    第1章 数据库 1.1 数据库概述 l 什么是数据库 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据进行增加,修改,删除及查询操作. l 什 ...