Bootstrap<基礎二十> 標籤

時間 2019-12-07

原文原文鏈接

Bootstrap 標籤。標籤可用於計數、提示或頁面上其餘的標記顯示。使用 class .label 來顯示標籤，以下面的實例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 標籤</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h3>Example Heading <span class="label label-default">Label</span></h3>
<h4>Example Heading <span class="label label-default">Label</span></h4>


</body>
</html>

結果以下所示：css

您可使用修飾的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 來改變標籤的外觀，以下面的實例所示：html

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 標籤的變體</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<span class="label label-default">默認標籤</span>
<span class="label label-primary">主要標籤</span>
<span class="label label-success">成功標籤</span>
<span class="label label-info">信息標籤</span>
<span class="label label-warning">警告標籤</span>
<span class="label label-danger">危險標籤</span>


</body>
</html>

結果以下所示：jquery