bootstrap 徽章的使用配合,角标效果很不错


<p ng-click="gotooffice(item.plugurl)"><sub><img src="imgs/s_1/{{item.plugimg}}.png" class="imgappcss" /></sub><sup><span class="badge Red">{{item.unread}}</span></sup></p>
<p style=" text-align:center; padding-top:8px;">{{item.plugname}}</p>
样式如下:
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color:red;
border-radius: 10px;
}
// 没有内容,不显示badge,很重要
.badge:empty {
display: none;
}


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM