Bootstrap 基礎チュートリアル

Bootstrap プラグイン

Bootstrap 超大画面 Bootstrap タグ

Bootstrap バッジ

>この章では、Bootstrap バッジ(Badges)について説明します。バッジはタグに似ていますが、バッジの角がより丸くなっています。

>バッジ(Badges)は新しいまたは未読のアイテムを強調表示するために使用されます。バッジを使用するには、ただ以下のようにします： <span> >リンク、Bootstrap ナビゲーションなどの要素に追加してください。

>以下の例がこれを示しています：

オンラインサンプル

>未読メールを表示：

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　バッジ(Badges)</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>
<a　href="#">メールボックス　<span　class="badge">50</span></a>
</body>
</html>

テストして見て‹/›

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

>新しいまたは未読のアイテムがない場合、CSSの :empty >選択子にバッジが折り畳まれ、中に内容がないことを示します。

オンラインサンプル

>未読メッセージを表示：

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-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>
<div　class="container">
　　<h2>バッジ</h2>
　　<p>.badge　クラスは未読メッセージの数を指定します：</>p>
　　<p><a　href="#">インボックス　<span　class="badge">21</span></a></>p>
</>div>
</body>
</html>

テストして見て‹/›

>アクティブナビゲーション状態

アクティブ状態のカプセル式ナビゲーションとリストナビゲーションにバッジを配置できます。以下のように使用します： <span> >以下の例のようにリンクをアクティブにします：

オンラインサンプル

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-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>
<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>
</body>
</html>

テストして見て‹/›

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

Bootstrap 超大画面 Bootstrap タグ