消息框能够轻松展示一些需要引起用户注意的内容。
你好
有一些内容你可能需要知道。
消息框能够轻松展示一些需要引起用户注意的内容。
这里提供了5中色彩的消息框用于不同场合。
有一些内容你可能需要知道。
World.
确实遇到了问题,请立即处理吧。
<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
参数一起使用。
<div class="alert alert-success with-icon">
<i class="icon-ok-sign"></i>
<div class="content">...</div>
</div>
<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
来使得链接的样式与消息框类型保持一致。
<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>