Bootstrap学习日记之徽章

  Bootstrap中的徽章跟我们之前学的标签有点类似，主要区别在徽章表现得更加的圆滑，徽章一般表示未读消息的数目

创建基本徽章

• 带有class="badge"的<span>即可
• 不管是导航元素还是文本元素都可以

       <p><a href="#">收件箱<span class="badge">17</span></a></p>

运行结果

创建带有徽章的导航

• 在导航元素中的<li>中加入<span class="badge">即可

   <ul class="nav nav-pills">
       <li class="active"><a href="#">首页</a></li>
       <li><a href="#">消息<span class="badge">17</span></a></li>
       <li><a href="#">登录<span class="glyphicon glyphicon-user"></span></a></li>
   </ul>

代码解读：我们创建了一个胶囊式的导航，在它的<li>中我们加入<span class="badge">实现未读信息的数目

运行结果

注：本篇文章为博主在菜鸟教程学习的日记，菜鸟教程：http://www.runoob.com/