Bootstrap 基礎チュートリアル

Bootstrap プラグイン

Bootstrapタグ

この章では、Bootstrap タグについて説明します。タグは、カウント、ヒント、またはページ上の他のマーク表示に使用できます。クラスを使用して .label タグを表示する方法について説明します。以下の例を参照してください：

オンラインサンプル

例

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　サンプル　-　タグ/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>例ヘッディング<span　class="label　label-default">ラベル</span></h1>
<h2>例ヘッディング<span　class="label　label-default">ラベル</span></h2>
<h2>例ヘッディング<span　class="label　label-default">ラベル</span></h2>
<h4>例ヘッディング<span　class="label　label-default">ラベル</span></h4>
</body>
</html>

テストを見てみましょう ‹/›

以下の結果が表示されます：

修飾されたクラスを使用して タグ-default、タグ-primary、タグ-success、タグ-info、タグ-warning、タグ-danger タグの外観を変更する方法について説明します。以下の例を参照してください：

オンラインサンプル

例

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　サンプル　-　タグのバリエーション</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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>

テストを見てみましょう ‹/›

以下の結果が表示されます：

タグの他の例

クラス	説明	例
.label label-default	デフォルトの灰色いタグ	試してみてください
.label label-success	"success"タイプの緑色いタグ	試してみてください
.label label-warning	"warning"タイプの黄色いタグ	試してみてください

Bootstrapバッジ Bootstrapページネーション