Bootstrap 标签


本章将讲解 Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签,如下面的实例所示:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 实例 - 标签</title>
  5. <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6. <script src="/scripts/jquery.min.js"></script>
  7. <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <h1>Example Heading <span class="label label-default">Label</span></h1>
  12. <h2>Example Heading <span class="label label-default">Label</span></h2>
  13. <h3>Example Heading <span class="label label-default">Label</span></h3>
  14. <h4>Example Heading <span class="label label-default">Label</span></h4>
  15.  
  16.  
  17. </body>
  18. </html>

结果如下所示:

标签

您可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观,如下面的实例所示:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 实例 - 标签的变体</title>
  5. <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6. <script src="/scripts/jquery.min.js"></script>
  7. <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <span class="label label-default">默认标签</span>
  12. <span class="label label-primary">主要标签</span>
  13. <span class="label label-success">成功标签</span>
  14. <span class="label label-info">信息标签</span>
  15. <span class="label label-warning">警告标签</span>
  16. <span class="label label-danger">危险标签</span>
  17.  
  18.  
  19. </body>
  20. </html>

结果如下所示:

标签的变体