1. 程式人生 > >Bootstrap學習日記之徽章

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">實現未讀資訊的數目

執行結果