如何运用Bootstrap的徽章

1、首先在建好的HTML页面中，引入bootstrap的样式文件，如下图所示

2、然后继续引入Bootstrap的脚本文件，注意要先引入jquery文件，如下图所示

3、接下来我们调用bootstrap中的badge样式来定义一个徽章，如下图所示

4、然后我们看一下徽章在导航中的样式是怎么应用的，我们定义以及胶囊式导航，如下图所莲镘拎扇示，在导航中运用徽章，可以看到下图的效果

5、接下来我们在定义一个列表导航，并且也加入徽章的样式，显示出来的效果如下图所示

6、最后我们看一下bootstrap中徽章的样式定义，如下图所示，激活状态和默认状态的颜色都是不一样的

7、综上所述，在bootstrap中应用徽章只需要定义badge样式即可，bootstrap会自动来给徽章应用颜色的