通知条
通知条常用于信息推送，信息提示等。
基本样式
通知条由头部标识、时间和通知内容组成，其基本样式为。
品牌
快把你的好消息告诉全世界吧!
<div class="toast">
<div class="toast-header">
<span class="icon-icon"><i></i></span>
<strong>品牌</strong>
<time>刚刚</time>
</div>
<div class="toast-bodyer">快把你的好消息告诉全世界吧!</div>
</div>
分隔线
可在头部和内容中间增加.toast-divider样式元素，即可用线条将两者分隔。
品牌
快把你的好消息告诉全世界吧!
<div class="toast">
<div class="toast-header">
<span class="icon-icon"><i></i></span>
<strong>品牌</strong>
<time>1 分钟前</time>
</div>
<div class="toast-divider"></div>
<div class="toast-bodyer">快把你的好消息告诉全世界吧!</div>
</div>
关闭通知条
在头部的最后面，可添加关闭按钮元素，点击后可关闭通知条。
品牌
快把你的好消息告诉全世界吧!
<div class="toast">
<div class="toast-header">
<span class="icon-icon"><i></i></span>
<strong>品牌</strong>
<time>5 分钟前</time>
<i class="icon-danger-bg" data-dismiss="toast"></i>
</div>
<div class="toast-divider"></div>
<div class="toast-bodyer">快把你的好消息告诉全世界吧!</div>
</div>
颜色设置
可通过改变背景，边框，文本色、边角等，调整通知条的样式。
品牌
快把你的好消息告诉全世界吧!
品牌
快把你的好消息告诉全世界吧!
品牌
快把你的好消息告诉全世界吧!
<div class="toast">
<div class="toast-header">
<span class="icon-icon"><i></i></span>
<strong>品牌</strong>
<time>刚刚</time>
<i class="icon-danger-bg" data-dismiss="toast"></i>
</div>
<div class="toast-divider"></div>
<div class="toast-bodyer">快把你的好消息告诉全世界吧!</div>
</div>
<div class="toast radius border-white">
<div class="toast-header bg-white">
<span class="icon-icon"><i></i></span>
<strong>品牌</strong>
<time>1 分钟前</time>
<i class="icon-danger-bg" data-dismiss="toast"></i>
</div>
<div class="toast-divider"></div>
<div class="toast-bodyer">快把你的好消息告诉全世界吧!</div>
</div>
<div class="toast radius-small border-dark bg-deep text-silver">
<div class="toast-header">
<span class="icon-icon"><i></i></span>
<strong>品牌</strong>
<time>5 分钟前</time>
<i class="icon-danger-bg" data-dismiss="toast"></i>
</div>
<div class="toast-divider"></div>
<div class="toast-bodyer">快把你的好消息告诉全世界吧!</div>
</div>