• 博客园logo
  • 会员
  • 周边
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
技术无止境
勇敢、创新、坚韧、执着——青年应具备的精神
博客园    首页    新随笔    联系   管理    订阅  订阅
bootstrap 徽章的使用配合<sub><sup>,角标效果很不错

<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;
}

posted on 2018-02-02 14:49  刘宁  阅读(1961)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3