BootStrap-CSS樣式_佈局元件_徽章（訊息提示）
阿新 • • 發佈：2019-01-01
Bootstrap 徽章（Badges）：徽章與標籤相似，主要的區別在於徽章的邊角更加 圓滑。
徽章（Badges）主要用於突出顯示新的或未讀的項。如需使用徽章，只需要把 <span class="badge"> 新增到連結、Bootstrap 導航等這些元素上即可
span標籤+.badge樣式：設定徽章，例如：<span class="badge">50</span> 其中50為徽章內容
例項演示：
<a href="#">Email <span class="badge">50</span></a>
程式碼例項：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>徽章</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body style="padding:50px;"> <!-- span標籤+.badge樣式：設定徽章，例如：<span class="badge">50</span> 其中50為徽章內容 --> <div class="container" style="padding:20px"> <h2>徽章</h2> <a href="#">Email <span class="badge">50</span></a> </div> <h4>膠囊式導航中的啟用狀態</h4> <ul class="nav nav-pills"> <li class="active"><a href="#">首頁 <span class="badge">42</span></a> </li> <li><a href="#">簡介</a> </li> <li><a href="#">訊息 <span class="badge">重要3</span></a> </li> </ul> <br> <h4>列表導航中的啟用狀態</h4> <ul class="nav nav-pills nav-stacked" style="max-width: 260px;"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span> 首頁 </a> </li> <li><a href="#">簡介</a> </li> <li> <a href="#"> <span class="badge pull-right">重要3</span> 訊息 </a> </li> </ul> <script src="../js/jquery-1.11.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> </body> </html>
顯示效果：
