ブートストラップタグ


この章ではBootstrapタグについて説明します。ラベルは、ページ上のカウント、リマインダー、またはその他のマークアップ表示に使用できます。次の例に示すように、クラス .label を使用してラベルを表示します。

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/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>

インスタンスの実行»

[インスタンスの実行] ボタンをクリックして、オンラインの例を表示します

次の例に示すように、変更されたクラス label-default、label-primary、label-success、label-info、label-warning、label-danger を使用して、ラベルの外観を変更します。

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签的变体</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/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>

サンプルを実行します »

「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します