深入理解BootStrap -- 标签（label）与徽章（badge）

于 2017-11-24 18:51:07 发布
阅读量3.4k 收藏
点赞数
分类专栏： jquery html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36663951/article/details/78627397
版权
html5 同时被 2 个专栏收录
34 篇文章 0 订阅
订阅专栏
jquery
14 篇文章 0 订阅
订阅专栏

1、标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。如下图所示：

这里写图片描述

那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。

既然他是一个独立的组件，当然在不同的版本下有不同的文件：

☑ LESS版本：对应的源文件label.less

☑ Sass版本：对应的源文件_label.scss

☑ 编译后版本：bootstrap.css文件第4261行～第4327行

1、使用原理：

使用方法很简单，你可以在使用span这样的行内标签：

<code
 class="hljs xml has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">h3</span>></span>Example heading <span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">span</span> <span 
class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0,
 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"label 
label-default"</span>></span>New<span class="hljs-tag"
 style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">span</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">h3</span>></span></code><ul 
class="pre-numbering" style="box-sizing: border-box; position: absolute;
 width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; 
border-right-width: 1px; border-right-style: solid; border-right-color: 
rgb(221, 221, 221); list-style: none; text-align: right; 
background-color: rgb(238, 238, 238);"><li style="box-sizing: 
border-box; padding: 0px 5px;">1</li></ul>

运行效果： 
这里写图片描述

2、实现原理：

/bootstrap.css文件第4261行～第4272行/

<code
 class="hljs css has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 
63);">.label</span> <span class="hljs-rules" 
style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">display</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> 
inline</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">padding</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> .<span 
class="hljs-number" style="box-sizing: border-box;">2</span>em 
.<span class="hljs-number" style="box-sizing: 
border-box;">6</span>em .<span class="hljs-number" 
style="box-sizing: 
border-box;">3</span>em</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">font-size</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span 
class="hljs-number" style="box-sizing: 
border-box;">75</span>%</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">font-weight</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> 
bold</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">line-height</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span 
class="hljs-number" style="box-sizing: 
border-box;">1</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">color</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span 
class="hljs-hexcolor" style="box-sizing: 
border-box;">#fff</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">text-align</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> 
center</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">white-space</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> 
nowrap</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">vertical-align</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> 
baseline</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">border-radius</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> .<span 
class="hljs-number" style="box-sizing: 
border-box;">25</span>em</span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span></code><ul 
class="pre-numbering" style="box-sizing: border-box; position: absolute;
 width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; 
border-right-width: 1px; border-right-style: solid; border-right-color: 
rgb(221, 221, 221); list-style: none; text-align: right; 
background-color: rgb(238, 238, 238);"><li style="box-sizing: 
border-box; padding: 0px 5px;">1</li><li style="box-sizing: 
border-box; padding: 0px 5px;">2</li><li style="box-sizing: 
border-box; padding: 0px 5px;">3</li><li style="box-sizing: 
border-box; padding: 0px 5px;">4</li><li style="box-sizing: 
border-box; padding: 0px 5px;">5</li><li style="box-sizing: 
border-box; padding: 0px 5px;">6</li><li style="box-sizing: 
border-box; padding: 0px 5px;">7</li><li style="box-sizing: 
border-box; padding: 0px 5px;">8</li><li style="box-sizing: 
border-box; padding: 0px 5px;">9</li><li style="box-sizing: 
border-box; padding: 0px 5px;">10</li><li style="box-sizing:
 border-box; padding: 0px 5px;">11</li><li 
style="box-sizing: border-box; padding: 0px 
5px;">12</li></ul>

如果使用的是a标签元素来制作的话，为了让其更美观，在hover状态去掉下划线之类：

/bootstrap.css文件第4273行～4278行/

<code
 class="hljs css has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 
63);">.label</span><span class="hljs-attr_selector" 
style="color: rgb(0, 136, 0); box-sizing: 
border-box;">[href]</span><span class="hljs-pseudo" 
style="color: rgb(0, 0, 0); box-sizing: 
border-box;">:hover</span>,
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label</span><span 
class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: 
border-box;">[href]</span><span class="hljs-pseudo" 
style="color: rgb(0, 0, 0); box-sizing: 
border-box;">:focus</span> <span class="hljs-rules" 
style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">color</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span 
class="hljs-hexcolor" style="box-sizing: 
border-box;">#fff</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">text-decoration</span>:<span class="hljs-value"
 style="box-sizing: border-box; color: rgb(0, 102, 102);"> 
none</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">cursor</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> 
pointer</span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span></code><ul 
class="pre-numbering" style="box-sizing: border-box; position: absolute;
 width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; 
border-right-width: 1px; border-right-style: solid; border-right-color: 
rgb(221, 221, 221); list-style: none; text-align: right; 
background-color: rgb(238, 238, 238);"><li style="box-sizing: 
border-box; padding: 0px 5px;">1</li><li style="box-sizing: 
border-box; padding: 0px 5px;">2</li><li style="box-sizing: 
border-box; padding: 0px 5px;">3</li><li style="box-sizing: 
border-box; padding: 0px 5px;">4</li><li style="box-sizing: 
border-box; padding: 0px 5px;">5</li><li style="box-sizing: 
border-box; padding: 0px 5px;">6</li></ul>

有的时候标签内没有内容的时候，可以借助CSS3的:empty伪元素将其隐藏：

<code
 class="hljs css has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 
63);">.label</span><span class="hljs-pseudo" style="color: 
rgb(0, 0, 0); box-sizing: border-box;">:empty</span> <span 
class="hljs-rules" style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">display</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> 
none</span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span></code><ul 
class="pre-numbering" style="box-sizing: border-box; position: absolute;
 width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; 
border-right-width: 1px; border-right-style: solid; border-right-color: 
rgb(221, 221, 221); list-style: none; text-align: right; 
background-color: rgb(238, 238, 238);"><li style="box-sizing: 
border-box; padding: 0px 5px;">1</li><li style="box-sizing: 
border-box; padding: 0px 5px;">2</li><li style="box-sizing: 
border-box; padding: 0px 5px;">3</li></ul>

3、颜色样式设置：

和按钮元素button类似，label样式也提供了多种颜色：

  • ☑ label-deafult:默认标签，深灰色

  • ☑ label-primary：主要标签，深蓝色

  • ☑ label-success：成功标签，绿色

  • ☑ label-info：信息标签，浅蓝色

  • ☑ label-warning：警告标签，橙色

  • ☑ label-danger：错误标签，红色

主要是通过这几个类名来修改背景颜色和文本颜色：

<code
 class="hljs xml has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">span</span> <span 
class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0,
 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"label 
label-default"</span>></span>默认标签<span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">span</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">span</span> <span 
class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0,
 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"label 
label-primary"</span>></span>主要标签<span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">span</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">span</span> <span 
class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0,
 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"label 
label-success"</span>></span>成功标签<span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">span</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">span</span> <span 
class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0,
 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"label 
label-info"</span>></span>信息标签<span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">span</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">span</span> <span 
class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0,
 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"label 
label-warning"</span>></span>警告标签<span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">span</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">span</span> <span 
class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0,
 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"label 
label-danger"</span>></span>错误标签<span class="hljs-tag"
 style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">span</span>></span></code><ul 
class="pre-numbering" style="box-sizing: border-box; position: absolute;
 width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; 
border-right-width: 1px; border-right-style: solid; border-right-color: 
rgb(221, 221, 221); list-style: none; text-align: right; 
background-color: rgb(238, 238, 238);"><li style="box-sizing: 
border-box; padding: 0px 5px;">1</li><li style="box-sizing: 
border-box; padding: 0px 5px;">2</li><li style="box-sizing: 
border-box; padding: 0px 5px;">3</li><li style="box-sizing: 
border-box; padding: 0px 5px;">4</li><li style="box-sizing: 
border-box; padding: 0px 5px;">5</li><li style="box-sizing: 
border-box; padding: 0px 5px;">6</li></ul>

运行效果：

这里写图片描述

4、颜色实现原理：

/bootstrap.css文件第4286行～第4237行/

<code
 class="hljs css has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 
63);">.label-default</span> <span class="hljs-rules" 
style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">background-color</span>:<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 
102);"> <span class="hljs-hexcolor" style="box-sizing: 
border-box;">#999</span></span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-default</span><span 
class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: 
border-box;">[href]</span><span class="hljs-pseudo" 
style="color: rgb(0, 0, 0); box-sizing: 
border-box;">:hover</span>,
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-default</span><span 
class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: 
border-box;">[href]</span><span class="hljs-pseudo" 
style="color: rgb(0, 0, 0); box-sizing: 
border-box;">:focus</span> <span class="hljs-rules" 
style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">background-color</span>:<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 
102);"> <span class="hljs-hexcolor" style="box-sizing: 
border-box;">#808080</span></span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-primary</span> <span 
class="hljs-rules" style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">background-color</span>:<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 
102);"> <span class="hljs-hexcolor" style="box-sizing: 
border-box;">#428bca</span></span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-primary</span><span 
class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: 
border-box;">[href]</span><span class="hljs-pseudo" 
style="color: rgb(0, 0, 0); box-sizing: 
border-box;">:hover</span>,
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-primary</span><span 
class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: 
border-box;">[href]</span><span class="hljs-pseudo" 
style="color: rgb(0, 0, 0); box-sizing: 
border-box;">:focus</span> <span class="hljs-rules" 
style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">background-color</span>:<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 
102);"> <span class="hljs-hexcolor" style="box-sizing: 
border-box;">#3071a9</span></span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-success</span> <span 
class="hljs-rules" style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">background-color</span>:<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 
102);"> <span class="hljs-hexcolor" style="box-sizing: 
border-box;">#5cb85c</span></span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-success</span><span 
class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: 
border-box;">[href]</span><span class="hljs-pseudo" 
style="color: rgb(0, 0, 0); box-sizing: 
border-box;">:hover</span>,
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-success</span><span 
class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: 
border-box;">[href]</span><span class="hljs-pseudo" 
style="color: rgb(0, 0, 0); box-sizing: 
border-box;">:focus</span> <span class="hljs-rules" 
style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">background-color</span>:<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 
102);"> <span class="hljs-hexcolor" style="box-sizing: 
border-box;">#449d44</span></span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-info</span> <span 
class="hljs-rules" style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">background-color</span>:<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 
102);"> <span class="hljs-hexcolor" style="box-sizing: 
border-box;">#5bc0de</span></span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-info</span><span 
class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: 
border-box;">[href]</span><span class="hljs-pseudo" 
style="color: rgb(0, 0, 0); box-sizing: 
border-box;">:hover</span>,
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-info</span><span 
class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: 
border-box;">[href]</span><span class="hljs-pseudo" 
style="color: rgb(0, 0, 0); box-sizing: 
border-box;">:focus</span> <span class="hljs-rules" 
style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">background-color</span>:<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 
102);"> <span class="hljs-hexcolor" style="box-sizing: 
border-box;">#31b0d5</span></span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-warning</span> <span 
class="hljs-rules" style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">background-color</span>:<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 
102);"> <span class="hljs-hexcolor" style="box-sizing: 
border-box;">#f0ad4e</span></span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-warning</span><span 
class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: 
border-box;">[href]</span><span class="hljs-pseudo" 
style="color: rgb(0, 0, 0); box-sizing: 
border-box;">:hover</span>,
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-warning</span><span 
class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: 
border-box;">[href]</span><span class="hljs-pseudo" 
style="color: rgb(0, 0, 0); box-sizing: 
border-box;">:focus</span> <span class="hljs-rules" 
style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">background-color</span>:<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 
102);"> <span class="hljs-hexcolor" style="box-sizing: 
border-box;">#ec971f</span></span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-danger</span> <span 
class="hljs-rules" style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">background-color</span>:<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 
102);"> <span class="hljs-hexcolor" style="box-sizing: 
border-box;">#d9534f</span></span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span>
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-danger</span><span 
class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: 
border-box;">[href]</span><span class="hljs-pseudo" 
style="color: rgb(0, 0, 0); box-sizing: 
border-box;">:hover</span>,
<span class="hljs-class" style="box-sizing: border-box; color: 
rgb(155, 112, 63);">.label-danger</span><span 
class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: 
border-box;">[href]</span><span class="hljs-pseudo" 
style="color: rgb(0, 0, 0); box-sizing: 
border-box;">:focus</span> <span class="hljs-rules" 
style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">background-color</span>:<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 
102);"> <span class="hljs-hexcolor" style="box-sizing: 
border-box;">#c9302c</span></span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span></code><ul 
class="pre-numbering" style="box-sizing: border-box; position: absolute;
 width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; 
border-right-width: 1px; border-right-style: solid; border-right-color: 
rgb(221, 221, 221); list-style: none; text-align: right; 
background-color: rgb(238, 238, 238);"><li style="box-sizing: 
border-box; padding: 0px 5px;">1</li><li style="box-sizing: 
border-box; padding: 0px 5px;">2</li><li style="box-sizing: 
border-box; padding: 0px 5px;">3</li><li style="box-sizing: 
border-box; padding: 0px 5px;">4</li><li style="box-sizing: 
border-box; padding: 0px 5px;">5</li><li style="box-sizing: 
border-box; padding: 0px 5px;">6</li><li style="box-sizing: 
border-box; padding: 0px 5px;">7</li><li style="box-sizing: 
border-box; padding: 0px 5px;">8</li><li style="box-sizing: 
border-box; padding: 0px 5px;">9</li><li style="box-sizing: 
border-box; padding: 0px 5px;">10</li><li style="box-sizing:
 border-box; padding: 0px 5px;">11</li><li 
style="box-sizing: border-box; padding: 0px 5px;">12</li><li
 style="box-sizing: border-box; padding: 0px 
5px;">13</li><li style="box-sizing: border-box; padding: 0px
 5px;">14</li><li style="box-sizing: border-box; padding: 
0px 5px;">15</li><li style="box-sizing: border-box; padding:
 0px 5px;">16</li><li style="box-sizing: border-box; 
padding: 0px 5px;">17</li><li style="box-sizing: border-box;
 padding: 0px 5px;">18</li><li style="box-sizing: 
border-box; padding: 0px 5px;">19</li><li style="box-sizing:
 border-box; padding: 0px 5px;">20</li><li 
style="box-sizing: border-box; padding: 0px 5px;">21</li><li
 style="box-sizing: border-box; padding: 0px 
5px;">22</li><li style="box-sizing: border-box; padding: 0px
 5px;">23</li><li style="box-sizing: border-box; padding: 
0px 5px;">24</li><li style="box-sizing: border-box; padding:
 0px 5px;">25</li><li style="box-sizing: border-box; 
padding: 0px 5px;">26</li><li style="box-sizing: border-box;
 padding: 0px 5px;">27</li><li style="box-sizing: 
border-box; padding: 0px 5px;">28</li><li style="box-sizing:
 border-box; padding: 0px 5px;">29</li><li 
style="box-sizing: border-box; padding: 0px 5px;">30</li><li
 style="box-sizing: border-box; padding: 0px 
5px;">31</li><li style="box-sizing: border-box; padding: 0px
 5px;">32</li><li style="box-sizing: border-box; padding: 
0px 5px;">33</li><li style="box-sizing: border-box; padding:
 0px 5px;">34</li><li style="box-sizing: border-box; 
padding: 0px 5px;">35</li><li style="box-sizing: border-box;
 padding: 0px 5px;">36</li><li style="box-sizing: 
border-box; padding: 0px 5px;">37</li><li style="box-sizing:
 border-box; padding: 0px 5px;">38</li><li 
style="box-sizing: border-box; padding: 0px 5px;">39</li><li
 style="box-sizing: border-box; padding: 0px 
5px;">40</li><li style="box-sizing: border-box; padding: 0px
 5px;">41</li><li style="box-sizing: border-box; padding: 
0px 5px;">42</li></ul>

2、徽章

从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，如下图所示：

这里写图片描述

在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现。

对应的文件版本：

☑ LESS版本:源文件badges.less

☑ Sass版本：源文件_badges.scss

☑ 编译后版本：bootstrap.css文件第4328行～第4366行

使用方法：

使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类：

<code
 class="hljs xml has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">a</span> <span 
class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0,
 102);">href</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"#"</span>></span>Inbox <span class="hljs-tag"
 style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">span</span> <span 
class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0,
 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"badge"</span>></span>42<span class="hljs-tag"
 style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">span</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">a</span>></span></code><ul 
class="pre-numbering" style="box-sizing: border-box; position: absolute;
 width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; 
border-right-width: 1px; border-right-style: solid; border-right-color: 
rgb(221, 221, 221); list-style: none; text-align: right; 
background-color: rgb(238, 238, 238);"><li style="box-sizing: 
border-box; padding: 0px 5px;">1</li></ul>

运行效果:

这里写图片描述

1、实现原理：

主要将其设置为椭圆形，并且加了一个背景色：

/bootstrap.css文件第4328行～第4341行/

<code
 class="hljs css has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 
63);">.badge</span> <span class="hljs-rules" 
style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">display</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> 
inline-block</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">min-width</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span 
class="hljs-number" style="box-sizing: 
border-box;">10</span>px</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">padding</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span 
class="hljs-number" style="box-sizing: border-box;">3</span>px 
<span class="hljs-number" style="box-sizing: 
border-box;">7</span>px</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">font-size</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span 
class="hljs-number" style="box-sizing: 
border-box;">12</span>px</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">font-weight</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> 
bold</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">line-height</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span 
class="hljs-number" style="box-sizing: 
border-box;">1</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">color</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span 
class="hljs-hexcolor" style="box-sizing: 
border-box;">#fff</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">text-align</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> 
center</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">white-space</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> 
nowrap</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">vertical-align</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> 
baseline</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">background-color</span>:<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 
102);"> <span class="hljs-hexcolor" style="box-sizing: 
border-box;">#999</span></span></span>;
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">border-radius</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span 
class="hljs-number" style="box-sizing: 
border-box;">10</span>px</span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span></code><ul 
class="pre-numbering" style="box-sizing: border-box; position: absolute;
 width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; 
border-right-width: 1px; border-right-style: solid; border-right-color: 
rgb(221, 221, 221); list-style: none; text-align: right; 
background-color: rgb(238, 238, 238);"><li style="box-sizing: 
border-box; padding: 0px 5px;">1</li><li style="box-sizing: 
border-box; padding: 0px 5px;">2</li><li style="box-sizing: 
border-box; padding: 0px 5px;">3</li><li style="box-sizing: 
border-box; padding: 0px 5px;">4</li><li style="box-sizing: 
border-box; padding: 0px 5px;">5</li><li style="box-sizing: 
border-box; padding: 0px 5px;">6</li><li style="box-sizing: 
border-box; padding: 0px 5px;">7</li><li style="box-sizing: 
border-box; padding: 0px 5px;">8</li><li style="box-sizing: 
border-box; padding: 0px 5px;">9</li><li style="box-sizing: 
border-box; padding: 0px 5px;">10</li><li style="box-sizing:
 border-box; padding: 0px 5px;">11</li><li 
style="box-sizing: border-box; padding: 0px 5px;">12</li><li
 style="box-sizing: border-box; padding: 0px 
5px;">13</li><li style="box-sizing: border-box; padding: 0px
 5px;">14</li></ul>
同样也使用`:empty`伪元素，当没有内容的时候隐藏： 
<code
 class="hljs css has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 
63);">.badge</span><span class="hljs-pseudo" style="color: 
rgb(0, 0, 0); box-sizing: border-box;">:empty</span> <span 
class="hljs-rules" style="box-sizing: border-box;">{
<span class="hljs-rule" style="box-sizing: border-box;"><span 
class="hljs-attribute" style="box-sizing: 
border-box;">display</span>:<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 102, 102);"> 
none</span></span>;
<span class="hljs-rule" style="box-sizing: 
border-box;">}</span></span></code><ul 
class="pre-numbering" style="box-sizing: border-box; position: absolute;
 width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; 
border-right-width: 1px; border-right-style: solid; border-right-color: 
rgb(221, 221, 221); list-style: none; text-align: right; 
background-color: rgb(238, 238, 238);"><li style="box-sizing: 
border-box; padding: 0px 5px;">1</li><li style="box-sizing: 
border-box; padding: 0px 5px;">2</li><li style="box-sizing: 
border-box; padding: 0px 5px;">3</li></ul>

正如开头所说，可以将徽章与按钮或者导航之类配合使用：

<code
 class="hljs xml has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">div</span> <span 
class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0,
 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"navbar 
navbar-default"</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 
102);">role</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"navigation"</span>></span>
　<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">div</span> <span 
class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0,
 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"navbar-header"</span>></span>
　       <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>
 <span class="hljs-attribute" style="box-sizing: border-box; color: 
rgb(102, 0, 102);">href</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"##"</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 
102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"navbar-brand"</span>></span>慕课网<span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">a</span>></span>
　<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">div</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ul</span> <span 
class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0,
 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"nav 
navbar-nav"</span>></span>
         <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 
136);">li</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 
102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"active"</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span
 class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 
136);">a</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 
102);">href</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"##"</span>></span>网站首页<span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">a</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">li</span>></span>
         <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 
136);">li</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span
 class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 
136);">a</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 
102);">href</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"##"</span>></span>系列教程<span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">a</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">li</span>></span>
         <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 
136);">li</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span
 class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 
136);">a</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 
102);">href</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"##"</span>></span>名师介绍<span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">a</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">li</span>></span>
         <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 
136);">li</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span
 class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 
136);">a</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 
102);">href</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"##"</span>></span>成功案例<span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span
 class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 
136);">span</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 
102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"badge"</span>></span>23<span class="hljs-tag"
 style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">span</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">a</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">li</span>></span>
         <span class="hljs-tag" style="color: rgb(0, 102, 102); 
box-sizing: border-box;"><<span class="hljs-title" 
style="box-sizing: border-box; color: rgb(0, 0, 
136);">li</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span
 class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 
136);">a</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 
102);">href</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"##"</span>></span>关于我们<span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">a</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">li</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ul</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">div</span>></span></code><ul 
class="pre-numbering" style="box-sizing: border-box; position: absolute;
 width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; 
border-right-width: 1px; border-right-style: solid; border-right-color: 
rgb(221, 221, 221); list-style: none; text-align: right; 
background-color: rgb(238, 238, 238);"><li style="box-sizing: 
border-box; padding: 0px 5px;">1</li><li style="box-sizing: 
border-box; padding: 0px 5px;">2</li><li style="box-sizing: 
border-box; padding: 0px 5px;">3</li><li style="box-sizing: 
border-box; padding: 0px 5px;">4</li><li style="box-sizing: 
border-box; padding: 0px 5px;">5</li><li style="box-sizing: 
border-box; padding: 0px 5px;">6</li><li style="box-sizing: 
border-box; padding: 0px 5px;">7</li><li style="box-sizing: 
border-box; padding: 0px 5px;">8</li><li style="box-sizing: 
border-box; padding: 0px 5px;">9</li><li style="box-sizing: 
border-box; padding: 0px 5px;">10</li><li style="box-sizing:
 border-box; padding: 0px 5px;">11</li><li 
style="box-sizing: border-box; padding: 0px 
5px;">12</li></ul>

运行效果

这里写图片描述

2、按钮和胶囊形导航设置徽章：

另外，徽章在按钮元素button和胶囊形导航nav-pills也可以有类似的样式，只不过是颜色不同而以：

<code
 class="hljs xml has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ul</span> <span 
class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0,
 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 0);">"nav 
nav-pills"</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">li</span> <span 
class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0,
 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"active"</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span
 class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 
136);">a</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 
102);">href</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"#"</span>></span>Home <span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span
 class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 
136);">span</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 
102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"badge"</span>></span>42<span class="hljs-tag"
 style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">span</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">a</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">li</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">li</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span
 class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 
136);">a</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 
102);">href</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"#"</span>></span>Profile<span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">a</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">li</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">li</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span
 class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 
136);">a</span> <span class="hljs-attribute" 
style="box-sizing: border-box; color: rgb(102, 0, 
102);">href</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"#"</span>></span>Messages <span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">span</span> <span 
class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0,
 102);">class</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"badge"</span>></span>3<span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">span</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 
136);">a</span>></span><span class="hljs-tag" 
style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">li</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"></<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ul</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">br</span> 
/></span> </code><ul class="pre-numbering" 
style="box-sizing: border-box; position: absolute; width: 50px; top: 
0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 
1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); 
list-style: none; text-align: right; background-color: rgb(238, 238, 
238);"><li style="box-sizing: border-box; padding: 0px 
5px;">1</li><li style="box-sizing: border-box; padding: 0px 
5px;">2</li><li style="box-sizing: border-box; padding: 0px 
5px;">3</li><li style="box-sizing: border-box; padding: 0px 
5px;">4</li><li style="box-sizing: border-box; padding: 0px 
5px;">5</li><li style="box-sizing: border-box; padding: 0px 
5px;">6</li></ul>

运行效果: 
这里写图片描述

样式代码请查看bootstrap.css文件第4345行～第4366行。

注意：不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。

张高伟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值