1. Bootstrap 解析
  2. 第十一讲：警告

Bootstrap 解析 第十一讲：Alert（警告）

Bootstrap 警告

本章将讲解警告（Alerts）以及 Bootstrap 所提供的用于警告的 class。警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。 您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用 警告（Alerts） jQuery 插件。 您可以通过创建一个

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

Demo

.alert 警告

提示：success
提示：info
提示：warning
提示：danger
					
<div class="alert alert-success">提示：success</div>
<div class="alert alert-info">提示：info</div>
<div class="alert alert-warning">提示：warning</div>
<div class="alert alert-danger">提示：danger</div>

.alert-dismissable 可取消的警告

点右侧 × 可以关闭

提示：success
提示：info
提示：warning
提示：danger 
					
<div class="alert alert-success alert-dismissable">提示：success
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
<div class="alert alert-info">提示：info
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
<div class="alert alert-warning">提示：warning
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
<div class="alert alert-danger">提示：danger
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>

.alert-link 警告中的链接

提示：success
提示：info
提示：warning
提示：danger 
					
<div class="alert alert-success alert-dismissable">提示：<a href="#" class="alert-link">success</a>
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
<div class="alert alert-info">提示：<a href="#" class="alert-link">info</a>
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
<div class="alert alert-warning">提示：<a href="#" class="alert-link">warning</a>
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
<div class="alert alert-danger">提示：<a href="#" class="alert-link">danger</a>
	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>