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