ace bootstrap后台框架-徽章

ace徽章Badge

.nav-list a .badge, .nav-list a .label  {

1. font-size: 12px;
2. padding-left: 6px;
3. padding-right: 6px;
4. position: absolute;
5. top: 9px;
6. right: 11px;
7. opacity: .88;

}

.label-transparent, .badge-transparent  {

1. background-color:  transparent !important;

}

.badge  {

1. text-shadow: none;
2. font-size: 12px;
3. padding-top: 1px;
4. padding-bottom: 3px;
5. font-weight: normal;
6. line-height: 15px;
7. background-color:  #abbac3 !important;

}

原bootstrap

.badge  {

1. display: inline-block;
2. min-width: 10px;
3. padding: 3px 7px;
4. font-size: 12px;
5. font-weight: bold;
6. line-height: 1;
7. color:  #fff ;
8. text-align: center;
9. white-space: nowrap;
10. vertical-align: baseline;
11. background-color:  #999 ;
12. border-radius: 10px;

}

在去除 .label-transparent其实与bootstrap原有的并没有太多的不同

<span class="badge" title="测试提示">4</span>

ace提示tooltip，提示样式tooltip-error、tooltip-warning、tooltip-info、tooltip-default（每种对应不同的颜色）,属性title为提示内容，不用写初始化的js,在源代码中已经初始化好了.

比较有意思的是，ace没有用bootstrap的图标字体,而是Font Awesome:图标字体，

ace中已经引用了font-awesome.min.css，

.icon-warning-sign:before  {

1. content: "\f071";//f071为警告图标

}

参考引用：http://blog.csdn.net/xiaobingtao/article/details/42879549，有关Font Awesome:图标字体的介绍及使用

案例：

<span class="badge badge-transparent tooltip-error" title="测试提示"> <i class="icon-warning-sign red"></i> </span>