通知条
通知条常用于信息推送,信息提示等。
基本样式
通知条由头部标识、时间和通知内容组成,其基本样式为。
<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>