1、标签
在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。如下图所示：
那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。既然他是一个独立的组件，当然在不同的版本下有不同的文件：☑ LESS版本：对应的源文件label.less☑ Sass版本：对应的源文件_label.scss☑ 编译后版本：bootstrap.css文件第4261行～第4327行1、使用原理：使用方法很简单，你可以在使用span这样的行内标签：<codeclass="hljs xml has-numbering" 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;"><spanclass="hljs-tag" color: rgb(0,102,102); box-sizing:border-box;"><<span class="hljs-title" box-sizing:border-box; color: rgb(0,136);">h3</span>></span>Example heading <spanclass="hljs-tag" color: rgb(0,136);">span</span> <spanclass="hljs-attribute" box-sizing: border-box; color: rgb(102,102);">class</span>=<span class="hljs-value"box-sizing: border-box; color: rgb(0,136,0);">"labellabel-default"</span>></span>New<span class="hljs-tag"color: rgb(0,102); box-sizing:border-box;"></<span class="hljs-title" box-sizing:border-box; color: rgb(0,136);">span</span>></span><span class="hljs-tag"color: rgb(0,136);">h3</span>></span></code><ulclass="pre-numbering" 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 box-sizing:border-box; padding: 0px 5px;">1</li></ul>运行效果：
2、实现原理：/bootstrap.css文件第4261行～第4272行/<codeclass="hljs css has-numbering" 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;"><spanclass="hljs-class" box-sizing: border-box; color: rgb(155,112,63);">.label</span> <span class="hljs-rules"box-sizing: border-box;">{<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">display</span>:<span class="hljs-value"box-sizing: border-box; color: rgb(0,102);">inline</span></span>;<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">padding</span>:<span class="hljs-value"box-sizing: border-box; color: rgb(0,102);"> .<spanclass="hljs-number" box-sizing: border-box;">2</span>em.<span class="hljs-number" box-sizing:border-box;">6</span>em .<span class="hljs-number"box-sizing:border-box;">3</span>em</span></span>;<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">font-size</span>:<span class="hljs-value"box-sizing: border-box; color: rgb(0,102);"> <spanclass="hljs-number" box-sizing:border-box;">75</span>%</span></span>;<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">font-weight</span>:<span class="hljs-value"box-sizing: border-box; color: rgb(0,102);">bold</span></span>;<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">line-height</span>:<span class="hljs-value"box-sizing: border-box; color: rgb(0,102);"> <spanclass="hljs-number" box-sizing:border-box;">1</span></span></span>;<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">color</span>:<span class="hljs-value"box-sizing: border-box; color: rgb(0,102);"> <spanclass="hljs-hexcolor" box-sizing:border-box;">#fff</span></span></span>;<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">text-align</span>:<span class="hljs-value"box-sizing: border-box; color: rgb(0,102);">center</span></span>;<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">white-space</span>:<span class="hljs-value"box-sizing: border-box; color: rgb(0,102);">nowrap</span></span>;<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">vertical-align</span>:<span class="hljs-value"box-sizing: border-box; color: rgb(0,102);">baseline</span></span>;<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">border-radius</span>:<span class="hljs-value"box-sizing: border-box; color: rgb(0,102);"> .<spanclass="hljs-number" box-sizing:border-box;">25</span>em</span></span>;<span class="hljs-rule" box-sizing:border-box;">}</span></span></code><ulclass="pre-numbering" 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,238);"><li box-sizing:border-box; padding: 0px 5px;">1</li><li box-sizing:border-box; padding: 0px 5px;">2</li><li box-sizing:border-box; padding: 0px 5px;">3</li><li box-sizing:border-box; padding: 0px 5px;">4</li><li box-sizing:border-box; padding: 0px 5px;">5</li><li box-sizing:border-box; padding: 0px 5px;">6</li><li box-sizing:border-box; padding: 0px 5px;">7</li><li box-sizing:border-box; padding: 0px 5px;">8</li><li box-sizing:border-box; padding: 0px 5px;">9</li><li box-sizing:border-box; padding: 0px 5px;">10</li><li box-sizing:border-box; padding: 0px 5px;">11</li><libox-sizing: border-box; padding: 0px5px;">12</li></ul>如果使用的是a标签元素来制作的话，为了让其更美观，在hover状态去掉下划线之类：/bootstrap.css文件第4273行～4278行/<codeclass="hljs css has-numbering" display: block; padding: 0px;color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',63);">.label</span><span class="hljs-attr_selector"color: rgb(0,0); box-sizing:border-box;">[href]</span><span class="hljs-pseudo"color: rgb(0,0); box-sizing:border-box;">:hover</span>,<span class="hljs-class" box-sizing: border-box; color:rgb(155,63);">.label</span><spanclass="hljs-attr_selector" color: rgb(0,0); box-sizing:border-box;">:focus</span> <span class="hljs-rules"box-sizing: border-box;">{<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">color</span>:<span class="hljs-value"box-sizing: border-box; color: rgb(0,102);"> <spanclass="hljs-hexcolor" box-sizing:border-box;">#fff</span></span></span>;<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">text-decoration</span>:<span class="hljs-value"box-sizing: border-box; color: rgb(0,102);">none</span></span>;<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">cursor</span>:<span class="hljs-value"box-sizing: border-box; color: rgb(0,102);">pointer</span></span>;<span class="hljs-rule" box-sizing:border-box;">}</span></span></code><ulclass="pre-numbering" 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,238);"><li box-sizing:border-box; padding: 0px 5px;">1</li><li box-sizing:border-box; padding: 0px 5px;">2</li><li box-sizing:border-box; padding: 0px 5px;">3</li><li box-sizing:border-box; padding: 0px 5px;">4</li><li box-sizing:border-box; padding: 0px 5px;">5</li><li box-sizing:border-box; padding: 0px 5px;">6</li></ul>有的时候标签内没有内容的时候，可以借助CSS3的:empty伪元素将其隐藏：<codeclass="hljs css has-numbering" display: block; padding: 0px;color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',63);">.label</span><span class="hljs-pseudo" color:rgb(0,0); box-sizing: border-box;">:empty</span> <spanclass="hljs-rules" box-sizing: border-box;">{<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">display</span>:<span class="hljs-value"box-sizing: border-box; color: rgb(0,102);">none</span></span>;<span class="hljs-rule" box-sizing:border-box;">}</span></span></code><ulclass="pre-numbering" 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,238);"><li box-sizing:border-box; padding: 0px 5px;">1</li><li box-sizing:border-box; padding: 0px 5px;">2</li><li 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：错误标签，红色主要是通过这几个类名来修改背景颜色和文本颜色：<codeclass="hljs xml has-numbering" display: block; padding: 0px;color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',0);">"labellabel-default"</span>></span>默认标签<spanclass="hljs-tag" color: rgb(0,136);">span</span>></span><span class="hljs-tag" color: rgb(0,0);">"labellabel-primary"</span>></span>主要标签<spanclass="hljs-tag" color: rgb(0,0);">"labellabel-success"</span>></span>成功标签<spanclass="hljs-tag" color: rgb(0,0);">"labellabel-info"</span>></span>信息标签<span class="hljs-tag"color: rgb(0,0);">"labellabel-warning"</span>></span>警告标签<spanclass="hljs-tag" color: rgb(0,0);">"labellabel-danger"</span>></span>错误标签<span class="hljs-tag"color: rgb(0,136);">span</span>></span></code><ulclass="pre-numbering" 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,238);"><li box-sizing:border-box; padding: 0px 5px;">1</li><li box-sizing:border-box; padding: 0px 5px;">2</li><li box-sizing:border-box; padding: 0px 5px;">3</li><li box-sizing:border-box; padding: 0px 5px;">4</li><li box-sizing:border-box; padding: 0px 5px;">5</li><li box-sizing:border-box; padding: 0px 5px;">6</li></ul>运行效果：
4、颜色实现原理：/bootstrap.css文件第4286行～第4237行/<codeclass="hljs css has-numbering" display: block; padding: 0px;color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',63);">.label-default</span> <span class="hljs-rules"box-sizing: border-box;">{<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">background-color</span>:<spanclass="hljs-value" box-sizing: border-box; color: rgb(0,102);"> <span class="hljs-hexcolor" box-sizing:border-box;">#999</span></span></span>;<span class="hljs-rule" box-sizing:border-box;">}</span></span><span class="hljs-class" box-sizing: border-box; color:rgb(155,63);">.label-default</span><spanclass="hljs-attr_selector" color: rgb(0,0); box-sizing:border-box;">:focus</span> <span class="hljs-rules"box-sizing: border-box;">{<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">background-color</span>:<spanclass="hljs-value" box-sizing: border-box; color: rgb(0,102);"> <span class="hljs-hexcolor" box-sizing:border-box;">#808080</span></span></span>;<span class="hljs-rule" box-sizing:border-box;">}</span></span><span class="hljs-class" box-sizing: border-box; color:rgb(155,63);">.label-primary</span> <spanclass="hljs-rules" box-sizing: border-box;">{<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">background-color</span>:<spanclass="hljs-value" box-sizing: border-box; color: rgb(0,102);"> <span class="hljs-hexcolor" box-sizing:border-box;">#428bca</span></span></span>;<span class="hljs-rule" box-sizing:border-box;">}</span></span><span class="hljs-class" box-sizing: border-box; color:rgb(155,63);">.label-primary</span><spanclass="hljs-attr_selector" color: rgb(0,102);"> <span class="hljs-hexcolor" box-sizing:border-box;">#3071a9</span></span></span>;<span class="hljs-rule" box-sizing:border-box;">}</span></span><span class="hljs-class" box-sizing: border-box; color:rgb(155,63);">.label-success</span> <spanclass="hljs-rules" box-sizing: border-box;">{<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">background-color</span>:<spanclass="hljs-value" box-sizing: border-box; color: rgb(0,102);"> <span class="hljs-hexcolor" box-sizing:border-box;">#5cb85c</span></span></span>;<span class="hljs-rule" box-sizing:border-box;">}</span></span><span class="hljs-class" box-sizing: border-box; color:rgb(155,63);">.label-success</span><spanclass="hljs-attr_selector" color: rgb(0,102);"> <span class="hljs-hexcolor" box-sizing:border-box;">#449d44</span></span></span>;<span class="hljs-rule" box-sizing:border-box;">}</span></span><span class="hljs-class" box-sizing: border-box; color:rgb(155,63);">.label-info</span> <spanclass="hljs-rules" box-sizing: border-box;">{<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">background-color</span>:<spanclass="hljs-value" box-sizing: border-box; color: rgb(0,102);"> <span class="hljs-hexcolor" box-sizing:border-box;">#5bc0de</span></span></span>;<span class="hljs-rule" box-sizing:border-box;">}</span></span><span class="hljs-class" box-sizing: border-box; color:rgb(155,63);">.label-info</span><spanclass="hljs-attr_selector" color: rgb(0,102);"> <span class="hljs-hexcolor" box-sizing:border-box;">#31b0d5</span></span></span>;<span class="hljs-rule" box-sizing:border-box;">}</span></span><span class="hljs-class" box-sizing: border-box; color:rgb(155,63);">.label-warning</span> <spanclass="hljs-rules" box-sizing: border-box;">{<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">background-color</span>:<spanclass="hljs-value" box-sizing: border-box; color: rgb(0,102);"> <span class="hljs-hexcolor" box-sizing:border-box;">#f0ad4e</span></span></span>;<span class="hljs-rule" box-sizing:border-box;">}</span></span><span class="hljs-class" box-sizing: border-box; color:rgb(155,63);">.label-warning</span><spanclass="hljs-attr_selector" color: rgb(0,102);"> <span class="hljs-hexcolor" box-sizing:border-box;">#ec971f</span></span></span>;<span class="hljs-rule" box-sizing:border-box;">}</span></span><span class="hljs-class" box-sizing: border-box; color:rgb(155,63);">.label-danger</span> <spanclass="hljs-rules" box-sizing: border-box;">{<span class="hljs-rule" box-sizing: border-box;"><spanclass="hljs-attribute" box-sizing:border-box;">background-color</span>:<spanclass="hljs-value" box-sizing: border-box; color: rgb(0,102);"> <span class="hljs-hexcolor" box-sizing:border-box;">#d9534f</span></span></span>;<span class="hljs-rule" box-sizing:border-box;">}</span></span><span class="hljs-class" box-sizing: border-box; color:rgb(155,63);">.label-danger</span><spanclass="hljs-attr_selector" color: rgb(0,102);"> <span class="hljs-hexcolor" box-sizing:border-box;">#c9302c</span></span></span>;<span class="hljs-rule" box-sizing:border-box;">}</span></span></code><ulclass="pre-numbering" 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,238);"><li box-sizing:border-box; padding: 0px 5px;">1</li><li box-sizing:border-box; padding: 0px 5px;">2</li><li box-sizing:border-box; padding: 0px 5px;">3</li><li box-sizing:border-box; padding: 0px 5px;">4</li><li box-sizing:border-box; padding: 0px 5px;">5</li><li box-sizing:border-box; padding: 0px 5px;">6</li><li box-sizing:border-box; padding: 0px 5px;">7</li><li box-sizing:border-box; padding: 0px 5px;">8</li><li box-sizing:border-box; padding: 0px 5px;">9</li><li box-sizing:border-box; padding: 0px 5px;">10</li><li box-sizing:border-box; padding: 0px 5px;">11</li><libox-sizing: border-box; padding: 0px 5px;">12</li><libox-sizing: border-box; padding: 0px5px;">13</li><li box-sizing: border-box; padding: 0px5px;">14</li><li box-sizing: border-box; padding:0px 5px;">15</li><li box-sizing: border-box; padding:0px 5px;">16</li><li box-sizing: border-box;padding: 0px 5px;">17</li><li box-sizing: border-box;padding: 0px 5px;">18</li><li box-sizing:border-box; padding: 0px 5px;">19</li><li box-sizing:border-box; padding: 0px 5px;">20</li><libox-sizing: border-box; padding: 0px 5px;">21</li><libox-sizing: border-box; padding: 0px5px;">22</li><li box-sizing: border-box; padding: 0px5px;">23</li><li box-sizing: border-box; padding:0px 5px;">24</li><li box-sizing: border-box; padding:0px 5px;">25</li><li box-sizing: border-box;padding: 0px 5px;">26</li><li box-sizing: border-box;padding: 0px 5px;">27</li><li box-sizing:border-box; padding: 0px 5px;">28</li><li box-sizing:border-box; padding: 0px 5px;">29</li><libox-sizing: border-box; padding: 0px 5px;">30</li><libox-sizing: border-box; padding: 0px5px;">31</li><li box-sizing: border-box; padding: 0px5px;">32</li><li box-sizing: border-box; padding:0px 5px;">33</li><li box-sizing: border-box; padding:0px 5px;">34</li><li box-sizing: border-box;padding: 0px 5px;">35</li><li box-sizing: border-box;padding: 0px 5px;">36</li><li box-sizing:border-box; padding: 0px 5px;">37</li><li box-sizing:border-box; padding: 0px 5px;">38</li><libox-sizing: border-box; padding: 0px 5px;">39</li><libox-sizing: border-box; padding: 0px5px;">40</li><li box-sizing: border-box; padding: 0px5px;">41</li><li 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" 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" color: rgb(0,102); box-sizing:
border-box;"><<span class="hljs-title" box-sizing:
border-box; color: rgb(0,136);">a</span> <span
class="hljs-attribute" box-sizing: border-box; color: rgb(102,
102);">href</span>=<span class="hljs-value"
box-sizing: border-box; color: rgb(0,
0);">"#"</span>></span>Inbox <span class="hljs-tag"
color: rgb(0,136);">span</span> <span
class="hljs-attribute" box-sizing: border-box; color: rgb(102,
102);">class</span>=<span class="hljs-value"
box-sizing: border-box; color: rgb(0,
0);">"badge"</span>></span>42<span class="hljs-tag"
color: rgb(0,102); box-sizing:
border-box;"></<span class="hljs-title" box-sizing:
border-box; color: rgb(0,
136);">span</span>></span><span class="hljs-tag"
color: rgb(0,
136);">a</span>></span></code><ul
class="pre-numbering" 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); list-style: none; text-align: right;
background-color: rgb(238,238);"><li box-sizing:
border-box; padding: 0px 5px;">1</li></ul>
运行效果:
1、实现原理：
主要将其设置为椭圆形，并且加了一个背景色：
/bootstrap.css文件第4328行～第4341行/
<code
class="hljs css has-numbering" 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" box-sizing: border-box; color: rgb(155,
63);">.badge</span> <span class="hljs-rules"
box-sizing: border-box;">{
<span class="hljs-rule" box-sizing: border-box;"><span
class="hljs-attribute" box-sizing:
border-box;">display</span>:<span class="hljs-value"
box-sizing: border-box; color: rgb(0,102);">
inline-block</span></span>;
<span class="hljs-rule" box-sizing: border-box;"><span
class="hljs-attribute" box-sizing:
border-box;">min-width</span>:<span class="hljs-value"
box-sizing: border-box; color: rgb(0,102);"> <span
class="hljs-number" box-sizing:
border-box;">10</span>px</span></span>;
<span class="hljs-rule" box-sizing: border-box;"><span
class="hljs-attribute" box-sizing:
border-box;">padding</span>:<span class="hljs-value"
box-sizing: border-box; color: rgb(0,102);"> <span
class="hljs-number" box-sizing: border-box;">3</span>px
<span class="hljs-number" box-sizing:
border-box;">7</span>px</span></span>;
<span class="hljs-rule" box-sizing: border-box;"><span
class="hljs-attribute" box-sizing:
border-box;">font-size</span>:<span class="hljs-value"
box-sizing: border-box; color: rgb(0,102);"> <span
class="hljs-number" box-sizing:
border-box;">12</span>px</span></span>;
<span class="hljs-rule" box-sizing: border-box;"><span
class="hljs-attribute" box-sizing:
border-box;">font-weight</span>:<span class="hljs-value"
box-sizing: border-box; color: rgb(0,102);">
bold</span></span>;
<span class="hljs-rule" box-sizing: border-box;"><span
class="hljs-attribute" box-sizing:
border-box;">line-height</span>:<span class="hljs-value"
box-sizing: border-box; color: rgb(0,102);"> <span
class="hljs-number" box-sizing:
border-box;">1</span></span></span>;
<span class="hljs-rule" box-sizing: border-box;"><span
class="hljs-attribute" box-sizing:
border-box;">color</span>:<span class="hljs-value"
box-sizing: border-box; color: rgb(0,102);"> <span
class="hljs-hexcolor" box-sizing:
border-box;">#fff</span></span></span>;
<span class="hljs-rule" box-sizing: border-box;"><span
class="hljs-attribute" box-sizing:
border-box;">text-align</span>:<span class="hljs-value"
box-sizing: border-box; color: rgb(0,102);">
center</span></span>;
<span class="hljs-rule" box-sizing: border-box;"><span
class="hljs-attribute" box-sizing:
border-box;">white-space</span>:<span class="hljs-value"
box-sizing: border-box; color: rgb(0,102);">
nowrap</span></span>;
<span class="hljs-rule" box-sizing: border-box;"><span
class="hljs-attribute" box-sizing:
border-box;">vertical-align</span>:<span class="hljs-value"
box-sizing: border-box; color: rgb(0,102);">
baseline</span></span>;
<span class="hljs-rule" box-sizing: border-box;"><span
class="hljs-attribute" box-sizing:
border-box;">background-color</span>:<span
class="hljs-value" box-sizing: border-box; color: rgb(0,
102);"> <span class="hljs-hexcolor" box-sizing:
border-box;">#999</span></span></span>;
<span class="hljs-rule" box-sizing: border-box;"><span
class="hljs-attribute" box-sizing:
border-box;">border-radius</span>:<span class="hljs-value"
box-sizing: border-box; color: rgb(0,102);"> <span
class="hljs-number" box-sizing:
border-box;">10</span>px</span></span>;
<span class="hljs-rule" box-sizing:
border-box;">}</span></span></code><ul
class="pre-numbering" 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,238);"><li box-sizing:
border-box; padding: 0px 5px;">1</li><li box-sizing:
border-box; padding: 0px 5px;">2</li><li box-sizing:
border-box; padding: 0px 5px;">3</li><li box-sizing:
border-box; padding: 0px 5px;">4</li><li box-sizing:
border-box; padding: 0px 5px;">5</li><li box-sizing:
border-box; padding: 0px 5px;">6</li><li box-sizing:
border-box; padding: 0px 5px;">7</li><li box-sizing:
border-box; padding: 0px 5px;">8</li><li box-sizing:
border-box; padding: 0px 5px;">9</li><li box-sizing:
border-box; padding: 0px 5px;">10</li><li box-sizing:
border-box; padding: 0px 5px;">11</li><li
box-sizing: border-box; padding: 0px 5px;">12</li><li
box-sizing: border-box; padding: 0px
5px;">13</li><li box-sizing: border-box; padding: 0px
5px;">14</li></ul>同样也使用`:empty`伪元素，当没有内容的时候隐藏：<code
class="hljs css has-numbering" display: block; padding: 0px;
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',
63);">.badge</span><span class="hljs-pseudo" color:
rgb(0,0); box-sizing: border-box;">:empty</span> <span
class="hljs-rules" box-sizing: border-box;">{
<span class="hljs-rule" box-sizing: border-box;"><span
class="hljs-attribute" box-sizing:
border-box;">display</span>:<span class="hljs-value"
box-sizing: border-box; color: rgb(0,102);">
none</span></span>;
<span class="hljs-rule" box-sizing:
border-box;">}</span></span></code><ul
class="pre-numbering" 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,238);"><li box-sizing:
border-box; padding: 0px 5px;">1</li><li box-sizing:
border-box; padding: 0px 5px;">2</li><li box-sizing:
border-box; padding: 0px 5px;">3</li></ul>
正如开头所说，可以将徽章与按钮或者导航之类配合使用：
<code
class="hljs xml has-numbering" display: block; padding: 0px;
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',136);">div</span> <span
class="hljs-attribute" box-sizing: border-box; color: rgb(102,0);">"navbar
navbar-default"</span> <span class="hljs-attribute"
box-sizing: border-box; color: rgb(102,
102);">role</span>=<span class="hljs-value"
box-sizing: border-box; color: rgb(0,
0);">"navigation"</span>></span>
<span class="hljs-tag" color: rgb(0,
0);">"navbar-header"</span>></span>
<span class="hljs-tag" color: rgb(0,102);
box-sizing: border-box;"><<span class="hljs-title"
box-sizing: border-box; color: rgb(0,136);">a</span>
<span class="hljs-attribute" box-sizing: border-box; color:
rgb(102,102);">href</span>=<span class="hljs-value"
box-sizing: border-box; color: rgb(0,
0);">"##"</span> <span class="hljs-attribute"
box-sizing: border-box; color: rgb(102,
0);">"navbar-brand"</span>></span>慕课网<span
class="hljs-tag" color: rgb(0,136);">a</span>></span>
<span class="hljs-tag" color: rgb(0,136);">div</span>></span>
<span class="hljs-tag" color: rgb(0,136);">ul</span> <span
class="hljs-attribute" box-sizing: border-box; color: rgb(102,0);">"nav
navbar-nav"</span>></span>
<span class="hljs-tag" color: rgb(0,
136);">li</span> <span class="hljs-attribute"
box-sizing: border-box; color: rgb(102,
0);">"active"</span>></span><span class="hljs-tag"
color: rgb(0,102); box-sizing: border-box;"><<span
class="hljs-title" box-sizing: border-box; color: rgb(0,
136);">a</span> <span class="hljs-attribute"
box-sizing: border-box; color: rgb(102,
0);">"##"</span>></span>网站首页<span class="hljs-tag"
color: rgb(0,
136);">a</span>></span><span class="hljs-tag"
color: rgb(0,136);">li</span>></span>
<span class="hljs-tag" color: rgb(0,
136);">li</span>></span><span class="hljs-tag"
color: rgb(0,
0);">"##"</span>></span>系列教程<span class="hljs-tag"
color: rgb(0,
0);">"##"</span>></span>名师介绍<span class="hljs-tag"
color: rgb(0,
0);">"##"</span>></span>成功案例<span class="hljs-tag"
color: rgb(0,
136);">span</span> <span class="hljs-attribute"
box-sizing: border-box; color: rgb(102,
0);">"badge"</span>></span>23<span class="hljs-tag"
color: rgb(0,
0);">"##"</span>></span>关于我们<span class="hljs-tag"
color: rgb(0,136);">ul</span>></span>
<span class="hljs-tag" color: rgb(0,
136);">div</span>></span></code><ul
class="pre-numbering" 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,238);"><li box-sizing:
border-box; padding: 0px 5px;">1</li><li box-sizing:
border-box; padding: 0px 5px;">2</li><li box-sizing:
border-box; padding: 0px 5px;">3</li><li box-sizing:
border-box; padding: 0px 5px;">4</li><li box-sizing:
border-box; padding: 0px 5px;">5</li><li box-sizing:
border-box; padding: 0px 5px;">6</li><li box-sizing:
border-box; padding: 0px 5px;">7</li><li box-sizing:
border-box; padding: 0px 5px;">8</li><li box-sizing:
border-box; padding: 0px 5px;">9</li><li box-sizing:
border-box; padding: 0px 5px;">10</li><li box-sizing:
border-box; padding: 0px 5px;">11</li><li
box-sizing: border-box; padding: 0px
5px;">12</li></ul>
运行效果
2、按钮和胶囊形导航设置徽章：
另外，徽章在按钮元素button和胶囊形导航nav-pills也可以有类似的样式，只不过是颜色不同而以：
<code
class="hljs xml has-numbering" display: block; padding: 0px;
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',0);">"nav
nav-pills"</span>></span>
<span class="hljs-tag" color: rgb(0,136);">li</span> <span
class="hljs-attribute" box-sizing: border-box; color: rgb(102,
0);">"#"</span>></span>Home <span class="hljs-tag"
color: rgb(0,
0);">"#"</span>></span>Profile<span
class="hljs-tag" color: rgb(0,
0);">"#"</span>></span>Messages <span
class="hljs-tag" color: rgb(0,
0);">"badge"</span>></span>3<span class="hljs-tag"
color: rgb(0,136);">br</span>
/></span> </code><ul class="pre-numbering"
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);
list-style: none; text-align: right; background-color: rgb(238,
238);"><li box-sizing: border-box; padding: 0px
5px;">1</li><li box-sizing: border-box; padding: 0px
5px;">2</li><li box-sizing: border-box; padding: 0px
5px;">3</li><li box-sizing: border-box; padding: 0px
5px;">4</li><li box-sizing: border-box; padding: 0px
5px;">5</li><li box-sizing: border-box; padding: 0px
5px;">6</li></ul>
运行效果:
样式代码请查看bootstrap.css文件第4345行～第4366行。
注意：不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。
