消息框能够轻松展示一些需要引起用户注意的内容。

不同感情色彩的消息框

这里提供了5中色彩的消息框用于不同场合。

你好


有一些内容你可能需要知道。

Hello


World.

太好了!


一切已准备就绪。
Hi! 这条消息可能需要你注意。
注意! 看起来遇到一些问题。

不好了!

确实遇到了问题,请立即处理吧。

<div class="alert">...</div>
<div class="alert alert-primary">...</div>
<div class="alert alert-danger">...</div>
<div class="alert alert-success">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-info">...</div>

使用图标

在消息框中使用醒目的合适的图标能更容易让用户接收。需要使.alert配合.with-icon参数一起使用。

你好


有一些内容你可能需要知道。

太好了!


一切已准备就绪。

Hello


World.

Hi! 这条消息可能需要你注意。
注意! 看起来遇到一些问题。

不好了!

确实遇到了问题,请立即处理吧。

<div class="alert alert-success with-icon">
  <i class="icon-ok-sign"></i>
  <div class="content">...</div>
</div>

使用反色主题

你好


有一些内容你可能需要知道。

Hello


World.

太好了!


一切已准备就绪。
Hi! 这条消息可能需要你注意。
注意! 看起来遇到一些问题。

不好了!

确实遇到了问题,请立即处理吧。

<div class="alert alert-inverse">...</div>
<div class="alert alert-primary-inverse">...</div>
<div class="alert alert-danger-inverse">...</div>
<div class="alert alert-success-inverse">...</div>
<div class="alert alert-warning-inverse">...</div>
<div class="alert alert-info-inverse">...</div>

块级消息

块级消息框将没有外边距和边框圆角,适合用在页面顶部或者浮现在页面之上

太好了! 一切已准备就绪。
<div class="alert alert-block">...</div>

消息框中的链接

当消息框中包含链接时,推荐使用工具栏.alert-link来使得链接的样式与消息框类型保持一致。

你好! 有一些内容你可能需要知道。

Hello


World.

太好了! 一切已准备就绪
Hi! 这条消息可能需要你注意
注意! 看起来遇到一些问题
不好了! 确实遇到了问题,请立即处理吧。
<div class="alert">注意消息框中的<a class="alert-link" href="your/url/">链接</a>。</div>

可以关闭的消息框

可以用一个可选的.alert-dismissable和关闭按钮。

注意! 看起来遇到一些问题。

您可以点击右上角的 来关闭这条消息。

<div class="alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
  <p>您可以点击右上角的 <i class="icon-remove"></i> 来关闭这条消息。</p>
</div>