ラベルの設定（Example）

見本

見出しの例 New

設定例

<h*>見出しの例 <span class="label label-default">New</span></h1>

使用可能なバリエーション（Available variations）

以下のいずれかの修飾子クラスを追加して、ラベルの外観を変更。

設定例

<span class="label label-{themecolor}">ラベル</span>

ラベルの種類一部変更

Default　.label-default

Primary　.label-primary

Info　.label-info

Success　.label-success

Warning　.label-warning

Danger　.label-danger

【設定】

span.label.label-{themecolor}（.label-{themecolor}は上記の「ラベルの種類」から選択、.label単独での使用は不可）
ラベルの中に表示する内容が存在しない場合は、ラベルは表示されない（Internet Explorer8では非対応）

【Bootstrap2.3.2との変更箇所】

Default：.label ⇒ .label.label-default（v3RC1の途中）
Primary：.label-primaryが新設（v3RC2の途中）
Danger：.label-important ⇒ .label-danger
Inverse：.label-inverseは廃止

たくさんのラベルがいるなら

狭いコンテナ内に数十のインラインラベルがあり、それぞれに独自のインラインブロック要素（アイコンなど）が含まれていると、レンダリングの問題が発生する可能性がある。これを回避する方法はdisplay：inline-block;を設定すること。文脈と実例については、＃13219を参照すること。

リンク、Bootstrapのナビゲーションなどに<span class="badge">を追加することで、新しいアイテムや未読アイテムを簡単にハイライト可能。

基本のバッジ（Default example）

見本

●アンカーリンクでの設定

受信トレイ 42

空のバッジ

●ボタンでの設定

設定例

<!-- アンカーリンクでの設定 -->
<p><a href="#">受信トレイ <span class="badge">42</span></a></p>
<p><a href="#">空のバッジ <span class="badge"></span></a></p>

<!-- ボタンでの設定 -->
<button class="btn btn-{themecolor}" type="button">ボタン <span class="badge">4</span></button>

【設定】

アンカーリンクでの設定：リンク要素にspan.badgeを入れる
ボタンでの設定：ボタンの設定内に、span.badge を入れる

【Bootstrap2.3.2との変更箇所】

色の指定
- Info：.badge-info
- Success：.badge-success
- Warning：.badge-warning
- Important：.badge-important
- Inverse：.badge-inverse
は全て廃止（Default：.badgeのみになった）

空のバッジ（Self collapsing）

新規または未読のアイテムがない場合、内にコンテンツが存在しない場合、（CSSの:emptyのセレクタ経由で）バッジは単に折りたたまれて表示されない。

クロスブラウザとの互換性

空のバッジは、Internet Explorer 8では:emptyのセレクタのサポートがないため、機能しない。

アクティブ時のバッジ（Adapts to active nav states）v3.0新設

ピルナビゲーションにアクティブ状態のバッジを配置するためのスタイルが組み込まれている。

見本

●ピルナビゲーションでの設定

●積み重ねピルナビゲーションでの設定

設定例

<!-- ピルナビゲーションでの設定 -->
<ul class="nav nav-pills">
	<li class="active"><a href="#">ホーム <span class="badge">42</span></a></li>
	<li><a href="#"><span class="badge">13</span> プロフィール</a></li>
	<li><a href="#"><span class="badge pull-right">5</span> メッセージ</a></li>
</ul>

<!-- 積み重ねピルナビゲーションでの設定 -->
<ul class="nav nav-pills nav-stacked">
	<li class="active"><a href="#">ホーム <span class="badge">42</span></a></li>
	<li><a href="#"><span class="badge">13</span> プロフィール</a></li>
	<li><a href="#"><span class="badge pull-right">5</span> メッセージ</a></li>
</ul>

【設定】

ピルナビゲーション、積み重ねピルナビゲーション内で.activeの場合は白抜き青字に変わる。
span.badgeに.pull-rightを追加するとバッジ部分が右寄せになる

基本のジャンボトロンの設定 v3.0設定変更

軽量で柔軟なコンポーネントで、オプションでビューポート全体を拡張して、サイトの主要コンテンツが表示可能。

見本別タブで表示します

ココを押して下さい

Bootstrap2.3.2の設定例赤背景が変更箇所

<body style="padding-top:70px;">
	<div class="navbar navbar-fixed-top">
		ナビゲーションバー...
	</div>

	<div class="container">
		<div class="hero-unit">
			<h1>こんにちは!</h1>
			<p>...</p>
			<p><a class="btn btn-primary btn-large">もっと学ぼう</a></p>
		</div><!-- /.hero-unit -->

		ページのコンテンツ...
	</div><!-- /.container -->
</body>

Bootstrap3.xの設定例緑背景が変更箇所

<body style="padding-top:70px;">
	<nav class="navbar navbar-default navbar-fixed-top">
		ナビゲーションバー...
	</nav>

	<div class="container">
		<div class="jumbotron">
			<h1>こんにちは!</h1>
			<p>...</p>
			<p><a class="btn btn-primary btn-lg">もっと学ぼう</a></p>
		</div><!-- /.jumbotron -->

		ページのコンテンツ...
	</div><!-- /.container -->
</body>

【設定】

div.container > [div.jumbotron《ジャンボトロン》 + 《ページのコンテンツ》]

【Bootstrap2.3.2との変更箇所】

.hero-unit ⇒ .jumbotron

幅一杯のジャンボトロン v3.0.3新設

ジャンボトロンを全幅にし、角を丸くしないようにするには、ジャンボトロンをすべてのコンテナの外側に置き、コンテンツをコンテナ内に追加。

ジャンボトロンの部分がmax-width: 100%;で表示

見本別タブで表示します

●シンプルなジャンボトロン

ココを押して下さい

●ジャンボトロンの背景に画像を入れる

ココを押して下さい

設定例

<body style="padding-top:50px;">
	<nav class="navbar navbar-default navbar-fixed-top">
		ナビゲーションバー...
	</nav>

	<div class="jumbotron">
		<div class="container">
			<h1>こんにちは!</h1>
			<p>...</p>
			<p><a class="btn btn-primary btn-lg">もっと学ぼう</a></p>
		</div><!-- /.container -->
	</div><!-- /.jumbotron -->

	<div class="container">
		ページのコンテンツ...
	</div><!-- /.container -->
</body>

【設定】

[div.jumbotron > div.container]《ジャンボトロン》 + div.container《ページのコンテンツ》
別途CSSで以下のように設定すれば、見本のようにジャンボトロンの部分に画像を入れることが可能（background-positionの部分は適宜調整）。
```
.jumbotron {
	background-image: url("xxx.jpg");
	background-size: cover;
	background-position: center 60%;
}
```

【注意】

最上部に固定されたナビゲーションバーを使用する場合は、別途<body>タグにpadding-top:50px;のCSSスタイルを指定

h1のための単純な外郭で、ページ上のコンテンツのセクションを適切に分割して区切る。これは、h1のデフォルトのsmall要素だけでなく、他のほとんどのコンポーネント（追加のスタイルを使用）が利用可能。

見本

設定例

<div class="page-header">
	<h1>見出し <small>補助文</small></h1>
</div>

【設定】

div.page-header > （一般的には<h1>）
見出しの補助文も使用可能

画像、動画、テキストなどのグリッドを簡単に表示できるように、サムネイルコンポーネントでBootstrapのグリッドシステムを拡張。

さまざまな高さや幅のサムネイルをPinterestのように表示したい場合は、Masonry、Isotope、Salvattoreなどのサードパーティのプラグインを使用する必要がある。

サムネイルの設定（Default example）v3.0設定変更

デフォルトでは、Bootstrapのサムネイルは、必要最小限のマークアップでリンク画像を表示するように設計。

見本

Bootstrap2.3.2の設定例赤背景が変更箇所

<ul class="thumbnails">
	<li class="span3">
		<a href="#" class="thumbnail">
			<img src="..." alt="...">
		</a>
	</li>
	...
</ul>

Bootstrap3.xの設定例緑背景が変更箇所

<div class="row">
	<div class="col-sm-6 col-md-3">
		<a href="#" class="thumbnail">
			<img src="..." alt="...">
		</a>
	</div>
	...
</div>

【設定】

div.row > [div.col-{breakpoint}-* > a.thumbnail > <img>]《サムネイル画像》

【Bootstrap2.3.2との変更箇所】

ul.thumbnails > li.span* ⇒ div.row > div.col-{breakpoint}-*（グリッドシステムで設定）

コンテンツつきサムネイル（Custom content）

余分にマークアップを追加することで、サムネイルに見出し、段落、ボタンなどのHTMLコンテンツが追加可能。

見本

サムネイルのタイトル

ほんの少しの記述の追加で、ヘッダや文章やボタンのようなHTMLのどんな種類のコンテンツでも、サムネイルに追加することができます。

ボタンボタン

サムネイルのタイトル

ほんの少しの記述の追加で、ヘッダや文章やボタンのようなHTMLのどんな種類のコンテンツでも、サムネイルに追加することができます。

ボタンボタン

サムネイルのタイトル

ほんの少しの記述の追加で、ヘッダや文章やボタンのようなHTMLのどんな種類のコンテンツでも、サムネイルに追加することができます。

ボタンボタン

サムネイルのタイトル

ほんの少しの記述の追加で、ヘッダや文章やボタンのようなHTMLのどんな種類のコンテンツでも、サムネイルに追加することができます。

ボタンボタン

Bootstrap2.3.2の設定例赤背景が変更箇所

<ul class="thumbnails">
	<li class="span3">
		<div class="thumbnail">
			<img src="..." alt="...">
			<div class="caption">
				<h3>サムネイルのタイトル</h3>
				<p>ほんの少しの記述の追加で、ヘッダや文章やボタンのようなHTMLのどんな種類のコンテンツでも、サムネイルに追加することができます。</p>
				<p><a href="#" class="btn btn-primary">ボタン</a> <a href="#" class="btn">ボタン</a></p>
			</div><!-- /.caption -->
		</div><!-- /.thumbnail -->
	</li>
	...
</ul>

Bootstrap3.xの設定例緑背景が変更箇所

<div class="row">
	<div class="col-sm-6 col-md-3">
		<div class="thumbnail">
			<img src="..." alt="...">
			<div class="caption">
				<h3>サムネイルのタイトル</h3>
				<p>ほんの少しの記述の追加で、ヘッダや文章やボタンのようなHTMLのどんな種類のコンテンツでも、サムネイルに追加することができます。</p>
				<p><a href="#" class="btn btn-primary">ボタン</a> <a href="#" class="btn btn-default">ボタン</a></p>
			</div><!-- /.caption -->
		</div><!-- /.thumbnail -->
	</div><!-- /.col-sm-6.col-md-3 -->
	...
</div><!-- /.row -->

【設定】

div.row > 〈div.col-{breakpoint}-* > div.thumbnail > 〔img《サムネイル画像部分》 + {div.caption > [h3《キャプションのタイトル》 + <p>《キャプションのコンテンツ》 + .btn（ボタン）]}〕〉

【Bootstrap2.3.2との変更箇所】

ul.thumbnails > li.span* ⇒ div.row > div.col-{breakpoint}-*（グリッドシステムで設定）

一掴みほどの利用可能な柔軟な警告メッセージを使用して、一般的なユーザーアクションに対するコンテキストフィードバックメッセージを提供。

アラートの設定（Examples）

アラート内のテキストと任意の解除ボタンを囲み、基本的なアラートメッセージの4つのコンテキストクラス（例：.alert-success）のいずれかを囲む。

デフォルトクラスは存在しない

アラートにはデフォルトクラスがなく、ベースクラスと修飾クラスだけが存在。Defaultのグレーアラートはあまり意味がないので、色クラスを使用してタイプを指定する必要がある。Success、Info、Warning、Dangerから選択すること。

設定例

<div class="alert alert-{themecolor}" role="alert">アラートの文章</div>

アラートの種類一部変更

Info：.alert-info

Success：.alert-success

Warning：.alert-warning

Danger：.alert-danger

【設定】

.alert.alert-{themecolor}（.alert-{themecolor}は上記の「アラートの種類」から選択、.alert単独での使用は不可）

【アクセシビリティの設定】

.alert.alert-{themecolor}にrole="alert"属性（支援技術に警告情報の役割を伝える）を入れる

【Bootstrap2.3.2との変更箇所】

長いメッセージ用に使う.alert-blockは不要に（v3RC1の途中）
Warning：.alert ⇒ .alert.alert-warning（v3RC2の途中）
Danger：.alert-error ⇒ .alert-danger
アクセシビリティの設定が追加

アラートメッセージを閉じるボタン（Dismissible alerts）v3.3.2設定変更

.alert-dismissibleオプションと閉じるボタンを追加することで、任意のアラートが構築可能。

JavaScriptアラートプラグインが必要

完全に機能する、拒否可能なアラートの場合は、アラートJavaScriptプラグインを使用する必要がある。

見本

注目! この警報はあなたの注意を必要とします。

Bootstrap2.3.2の設定例赤背景が変更箇所

<div class="alert alert-info">
	<button type="button" class="close" data-dismiss="alert">&times;</button>
	<strong>注目!</strong> この警報はあなたの注意を必要とします。
</div>

Bootstrap3.xの設定例赤背景が変更箇所（3.3.2変更）

<div class="alert alert-info alert-dismissible" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="閉じる"><span aria-hidden="true">&times;</span></button>
	<strong>注目!</strong> この警報はあなたの注意を必要とします。
</div>

【設定】

.alert.alert-dismissible[role="alert"] > {button.close > <span> > ×]《閉じるボタン》 + 《アラート文》}
alert.jsを使ってアラートを閉じるためbutton.closeにdata-dismiss="alert"を入れる
ボタン名の×は、×と記述してエスケープ処理をする

【アクセシビリティの設定】

アラートを閉じるボタンとなる<button>に、aria-label="閉じる"属性（アイコンボタンのラベル）を入れる
閉じるボタンアイコンの×を span[aria-hidden="true"]（スクリーンリーダー等での読み上げをスキップさせる）で囲む

【変更履歴】

【3.2.0】
- .alert-dismissable ⇒ .alert-dismissible
- 閉じるボタンアイコンの設定：aria-hidden="true"は<button>内より独立した<span>内に移動し、<span class="sr-only">閉じる</span>を追加
【3.3.2】閉じるボタンアイコンの設定：<button>にaria-label="閉じる"を追加して、<span class="sr-only">閉じる</span>は不要に

【Bootstrap2.3.2との変更箇所】

.alert-dismissableの新設（v3RC2）⇒ .alert-dismissible（v3.2.0）
アクセシビリティの設定が追加

すべてのデバイスで適切な動作を確保

data-dismiss="alert"データ属性を持つ<button>要素を使用すること。

アラート内のリンク（Links in alerts）v3.0新設

.alert-linkユーティリティークラスを使用すると、アラート内の色付きリンクがすばやく表示可能。

見本

太字！　リンク文字　普通の文字

設定例

<div class="alert alert-{themecolor}" role="alert">
	<strong>太字！</strong>　<a href="#" class="alert-link">リンク文字</a>　普通の文字
</div>

【設定】

.alert > a.alert-link

シンプルで柔軟なプログレスバーを使用して、ワークフローやアクションの進行状況に関する最新のフィードバックを提供。

クロスブラウザとの互換性

プログレスバーは、CSS3トランジションとアニメーションを使用して、その効果の一部を実現。これらの機能はInternet Explorer 9以前と古いバージョンのFirefoxではサポートされていない。Opera 12はアニメーションをサポートしていない。

コンテンツセキュリティポリシー（CSP）との互換性

自分のウェブサイトがstyle-src 'unsafe-inline'を許可しないContent Security Policy（CSP）を持っている場合、以下の例に示すようにインラインstyle属性を使ってプログレスバーの幅を設定することはできない。厳密なCSPと互換性のある幅を設定する別の方法は、ごくわずかなカスタムJavaScript（element.style.widthを設定）を使用する方法や、カスタムCSSクラスを使用する方法がある。

プログレスバーの設定（Basic example）v3.0設定変更

デフォルトのプログレスバー。

見本

Bootstrap2.3.2の設定例赤背景が変更箇所

<div class="progress">
	<div class="bar" style="width:60%;"></div>
</div>

Bootstrap3.xの設定例緑背景が変更箇所

<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;">
		<span class="sr-only">60%完了</span>
	</div>
</div>

【設定】

.progress > .progress-bar[style="width:**%"] > span.sr-only（割合のラベル）
style="width:**%"で表示したいバーの幅の割合を設定

【アクセシビリティの設定】

.progress-barに、
- role="progressbar"（プログレスバーの役割）
- aria-valuenow="**"（現在値）
- aria-valuemin="0"（最小値）
- aria-valuemax="100"（最大値）
を入れる
ユーザー補助用にspan.sr-onlyで割合のラベルをつける

【Bootstrap2.3.2との変更箇所】

.bar ⇒ .progress-bar
アクセシビリティの設定が追加

ラベル付きプログレスバー（With label）v3.0新設

プログレスバーの中から.sr-onlyクラスを含む<span>を削除して、目に見えるパーセンテージを表示。

見本

●バーの中にラベルを表示

60%

●バーの外にラベルを表示

60%

設定例

<!-- バーの中にラベルを表示 -->
<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;">
		60%<!-- 割合のラベル -->
	</div>
</div>

<!-- バーの外にラベルを表示 -->
<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;"></div>
	<span style="margin-left:5px">60%</span><!-- 割合のラベル -->
</div>

【設定】

ユーザー補助用のラベルからspan.sr-onlyをはずして割合を表示するようにする
バーの中にラベルを表示：.progress > .progress-bar > 《ラベル》
バーの外にラベルを表示：.progress > [.progress-bar + span[style="margin-left:5px"]《ラベル》]

低パーセンテージ（Low percentages）v3.2.0新設⇒v3.3.2設定変更

ラベルのテキストが低いパーセンテージであっても読みやすいようにするには、プログレスバーに最小幅を追加することを検討するように。

見本

設定例

<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
		0%<!-- 割合のラベル -->
	</div>
</div>

<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
		2%<!-- 割合のラベル -->
	</div>
</div>

【設定】

0%や一桁の低いパーセンテージを表すプログレスバーは、ラベルが読みやすいようstyle="min-width: 2em;"を入れる

【変更履歴】

【3.3.2】自動的にmin-width: 20px;が組み込まれていたのを、手動でstyle="min-width: 2em;"を入れることに

プログレスバーの色（Contextual alternatives）v3.0設定変更

プログレスバーは、一貫したスタイルのために同じボタンと警告クラスをいくつか使用。

Bootstrap2.3.2の設定例赤背景が変更箇所

<div class="progress progress-{themecolor}">
	<div class="bar" style="width:20%"></div>
</div>

Bootstrap3.xの設定例緑背景が変更箇所

<div class="progress">
	<div class="progress-bar progress-bar-{themecolor}" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">
		<span class="sr-only">20%完了</span>
	</div>
</div>

バーの色の種類クラス変更

Info：.progress-bar-info

Success：.progress-bar-success

Warning：.progress-bar-warning

Danger：.progress-bar-danger

Default：（.progress-barの単独使用）

【設定】

.progress-barに.progress-bar-{themecolor}（.progress-bar-{themecolor}は上記の「バーの色の種類」から選択、Defaultの場合は不要）を追加

【Bootstrap2.3.2との変更箇所】

.progress.progress-{themecolor} > .bar ⇒ .progress > .progress-bar.progress-bar-{themecolor}
Info：.progress-info ⇒ .progress-bar-info
Success：.progress-success ⇒ .progress-bar-success
Warning：.progress-warning ⇒ .progress-bar-warning
Danger：.progress-danger ⇒ .progress-bar-danger

ストライププログレスバー（Striped）v3.2.0設定変更

グラデーションを使用してストライプ効果を作成。 IE9以下では非対応。

見本

Bootstrap2.3.2の設定例赤背景が変更箇所

<div class="progress progress-success progress-striped">
	<div class="bar" style="width:40%"></div>
</div>

Bootstrap3.xの設定例緑背景が変更箇所

<div class="progress">
	<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
		<span class="sr-only">40%完了</span>
	</div>
</div>

【設定】

.progress-barに.progress-bar-stripedを追加

【変更履歴】

【3.2.0】
.progress.progress-striped > .progress-bar(.progress-bar-{themecolor}) ⇒ .progress > .progress-bar.progress-bar-striped(.progress-bar-{themecolor})
.progress-striped ⇒ .progress-bar-striped

【Bootstrap2.3.2との変更箇所】

.progress.progress-striped(.progress-{themecolor}) > .bar ⇒ .progress > .progress-bar.progress-bar-striped(.progress-bar-{themecolor})

アニメーションプログレスバー（Animated）v3.2.0設定変更

.activeを.progress-bar-stripedに追加して、ストライプを右から左にアニメーション化する。IE9以下では非対応。

見本

Bootstrap2.3.2の設定例赤背景が変更箇所

<div class="progress progress-striped active">
	<div class="bar" style="width:45%"></div>
</div>

Bootstrap3.xの設定例緑背景が変更箇所

<div class="progress">
	<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width:45%">
		<span class="sr-only">45%完了</span>
	</div>
</div>

【設定】

.progress-bar.progress-bar-stripedに.activeを追加

【変更履歴】

【3.2.0】.progress.progress-striped.active > .progress-bar(.progress-bar-{themecolor}) ⇒ .progress > .progress-bar.progress-bar-striped.active(.progress-bar-{themecolor})

【Bootstrap2.3.2との変更箇所】

.progress.progress-striped.active(.progress-{themecolor}) > .bar ⇒ .progress > .progress-bar.progress-bar-striped.active(.progress-bar-{themecolor})

積み重ねプログレスバー（Stacked）

複数のバーを同じ.progress内に配置して積み重ねる。

見本

Bootstrap2.3.2の設定例赤背景が変更箇所

<div class="progress">
	<div class="bar bar-success" style="width:35%"></div>
	<div class="bar bar-warning" style="width:20%"></div>
	<div class="bar bar-danger" style="width:10%"></div>
</div>

Bootstrap3.xの設定例緑背景が変更箇所

<div class="progress">
	<div class="progress-bar progress-bar-success" style="width:35%"></div>
	<div class="progress-bar progress-bar-warning progress-bar-striped" style="width:20%"></div>
	<div class="progress-bar progress-bar-danger" style="width:10%"></div>
</div>

【設定】

div.progressの中に複数の異なる色のdiv.progress-barを追加
一部をストライプやアニメーションにすることも可能

【注意】

widthの合計が100%を超えると、超える部分のdiv.progress-barは表示されない

さまざまなタイプのコンポーネント（ブログのコメント、ツイートなど）を構築するための抽象的なオブジェクトスタイル。テキストコンテンツと一緒に左揃えまたは右揃えの画像を表示。

標準のメディアオブジェクト（Default media）v3.3.2設定変更

デフォルトのメディアは、コンテンツブロックの左側または右側にメディアオブジェクト（画像、ビデオ、オーディオ）を表示。

見本

メディアのヘッダ

メディアのコンテンツメディアのコンテンツメディアのコンテンツメディアのコンテンツメディアのコンテンツメディアのコンテンツ

親メディアのヘッダ

親メディアのコンテンツ親メディアのコンテンツ親メディアのコンテンツ親メディアのコンテンツ親メディアのコンテンツ親メディアのコンテンツ

子メディアのヘッダ

子メディアのコンテンツ子メディアのコンテンツ子メディアのコンテンツ子メディアのコンテンツ子メディアのコンテンツ子メディアのコンテンツ

右メディアのヘッダ

右メディアのコンテンツ右メディアのコンテンツ右メディアのコンテンツ右メディアのコンテンツ右メディアのコンテンツ右メディアのコンテンツ

Bootstrap2.3.2（～3.2.0）の設定例赤背景が変更箇所

<div class="media">
	<a class="pull-left" href="#">
		<img class="media-object" src="..." alt="...">
	</a>
	<div class="media-body">
		<h4 class="media-heading">メディアのヘッダ</h4>
		メディアのコンテンツ...
	</div>
</div>

<div class="media">
	<a class="pull-left" href="#">
		<img class="media-object" src="..." alt="...">
	</a>
	<div class="media-body">
		<h4 class="media-heading">親メディアのヘッダ</h4>
		親メディアのコンテンツ...
		<div class="media">
			<a class="pull-left" href="#">
				<img class="media-object" src="..." alt="...">
			</a>
			<div class="media-body">
				<h4 class="media-heading">子メディアのヘッダ</h4>
			 子メディアのコンテンツ...
			</div>
		</div>
	</div>
</div>

<div class="media">
	<a class="pull-right" href="#">
		<img class="media-object" src="..." alt="...">
	</a>
	<div class="media-body">
		<h4 class="media-heading">右メディアのヘッダ</h4>
		右メディアのコンテンツ...
	</div>
</div>

Bootstrap3.x（3.3.2～）の設定例緑背景が変更箇所

<div class="media">
	<div class="media-left">
		<a href="#">
			<img class="media-object" src="..." alt="...">
		</a>
	</div>
	<div class="media-body">
		<h4 class="media-heading">メディアのヘッダ</h4>
		メディアのコンテンツ...
	</div>
</div>

<div class="media">
	<div class="media-left">
		<a href="#">
			<img class="media-object" src="..." alt="...">
		</a>
	</div>
	<div class="media-body">
		<h4 class="media-heading">親メディアのヘッダ</h4>
		親メディアのコンテンツ...
		<div class="media">
			<div class="media-left">
				<a href="#">
						<img class="media-object" src="..." alt="...">
					</a>
			</div>
			<div class="media-body">
				<h4 class="media-heading">子メディアのヘッダ</h4>
				子メディアのコンテンツ...
			</div>
		</div>
	</div>
</div>

<div class="media">
	<div class="media-body">
		<h4 class="media-heading">右メディアのヘッダ</h4>
		右メディアのコンテンツ...
	</div>
	<div class="media-right">
		<a href="#">
			<img class="media-object" src="..." alt="...">
		</a>
	</div>
</div>

【設定】

メディアを左寄せ：div.media > div.media-left > [<a> > img.media-object]《メディアの表示》 + div.media-body > [div.media-heading《説明のヘッダ》 + 《説明のコンテンツ》]《メディアの説明》
メディアを右寄せ：div.media > div.media-body > [div.media-heading《説明のヘッダ》 + 《説明のコンテンツ》]《メディアの説明》 + div.media-right > [<a> > img.media-object]《メディアの表示》
メディアにリンクをつける：<a> > img.media-object
div.media-body内に入れ子でdiv.media・・・を設定することも可能

【変更履歴】

【3.3.0】
メディアを左寄せ：a.pull-left + div.media-body ⇒ a.media-left + div.media-body
メディアを右寄せ：a.pull-right + div.media-body ⇒ div.media-body + a.media-right（《メディアの説明》⇒《メディアの表示》の順に記載する必要がある）
【3.3.2】
メディアを左寄せ：a.media-left ⇒ div.media-left > <a>
メディアを右寄せ：a.media-right ⇒ div.media-right > <a>

.pull-leftクラスと.pull-rightクラスも存在し、以前はメディアコンポーネントの一部として使用されていたが、v3.3.0以降では使用しなくなった。.media-rightはHTMLで.media-bodyの後に置かれる必要があることを除いて、.media-leftと.media-rightは、（.pull-leftと.pull-rightと）ほぼ同じである。

メディアの配置（Media alignment）v3.3.0新設⇒v3.3.2設定変更

画像または他のメディアは、上、中、または下に整列可能。デフォルトでは一番上に並ぶ。

見本

●上部に配置

上メディアのヘッダ

上メディアのコンテンツ上メディアのコンテンツ上メディアのコンテンツ上メディアのコンテンツ上メディアのコンテンツ上メディアのコンテンツ

●垂直中央に配置

中メディアのヘッダ

中メディアのコンテンツ中メディアのコンテンツ中メディアのコンテンツ中メディアのコンテンツ中メディアのコンテンツ中メディアのコンテンツ

●下部に配置

下メディアのヘッダ

下メディアのコンテンツ下メディアのコンテンツ下メディアのコンテンツ下メディアのコンテンツ下メディアのコンテンツ下メディアのコンテンツ

設定例

<!-- 上部に配置 -->
<div class="media">
	<div class="media-left">
		<a href="#">
			<img class="media-object" src="..." alt="上メディアの画像"">
		</a>
	</div>
	<div class="media-body">
		<h4 class="media-heading">上メディアのヘッダ</h4>
		<p>上メディアのコンテンツ...</p>
		<p>上メディアのコンテンツ...</p>
	</div>
</div>

<!-- 垂直中央に配置 -->
<div class="media">
	<div class="media-left media-middle">
		<a href="#">
			<img class="media-object"	src="..." alt="中メディアの画像">
		</a>
	</div>
	<div class="media-body">
		<h4 class="media-heading">中メディアのヘッダ</h4>
		<p>中メディアのコンテンツ...</p>
		<p>中メディアのコンテンツ...</p>
	</div>
</div>

<!-- 下部に配置 -->
<div class="media">
	<div class="media-left media-bottom">
		<a href="#">
			<img class="media-object" src="..." alt="下メディアの画像">
		</a>
	</div>
	<div class="media-body">
		<h4 class="media-heading">下メディアのヘッダ</h4>
		<p>下メディアのコンテンツ...</p>
		<p>下メディアのコンテンツ...</p>
	</div>
</div>

【設定】

上部に配置：特に設定はない（デフォルト）
垂直中央に配置：div.media-left（またはdiv.media-right）に.media-middleを追加
下部に配置：div.media-left（またはdiv.media-right）に.media-bottomを追加

【変更履歴】

【3.3.2】
垂直中央に配置：a.media-left.media-middle（またはa.media-right.media-middle） ⇒ div.media-left.media-middle（またはdiv.media-right.media-middle） > <a>
下部に配置：a.media-left.media-bottom（またはa.media-right.media-bottom） ⇒ div.media-left.media-bottom（またはdiv.media-right.media-bottom） > <a>

メディアリスト（Media list）v3.3.2設定変更

少し余分にマークアップすれば、リストの中でメディアを使用可能（コメントスレッドや記事リストに便利）。

見本

親メディアのヘッダ
親メディアのコンテンツ親メディアのコンテンツ親メディアのコンテンツ親メディアのコンテンツ親メディアのコンテンツ親メディアのコンテンツ

子メディアのヘッダ
子メディアのコンテンツ子メディアのコンテンツ子メディアのコンテンツ子メディアのコンテンツ子メディアのコンテンツ子メディアのコンテンツ

孫メディアのヘッダ
孫メディアのコンテンツ孫メディアのコンテンツ孫メディアのコンテンツ孫メディアのコンテンツ孫メディアのコンテンツ孫メディアのコンテンツ

子メディアのヘッダ
子メディアのコンテンツ子メディアのコンテンツ子メディアのコンテンツ子メディアのコンテンツ子メディアのコンテンツ子メディアのコンテンツ
右メディアのヘッダ
右メディアのコンテンツ右メディアのコンテンツ右メディアのコンテンツ右メディアのコンテンツ右メディアのコンテンツ右メディアのコンテンツ

Bootstrap2.3.2の設定例赤背景が変更箇所

<ul class="media-list">
	<li class="media">
		<a class="media-left" href="#">
			<img class="media-object" src="..." alt="...">
		</a>
		<div class="media-body">
			<h4 class="media-heading">親メディアのヘッダ</h4>
			親メディアのコンテンツ...
			<div class="media">
				<a class="media-left" href="#">
					<img class="media-object" src="..." alt="...">
				</a>
				<div class="media-body">
					<h4 class="media-heading">子メディアのヘッダ</h4>
					子メディアのコンテンツ...
					<div class="media">
						<a class="media-left" href="#">
							<img class="media-object" src="..." alt="...">
						</a>
						<div class="media-body">
							<h4 class="media-heading">孫メディアのヘッダ</h4>
							孫メディアのコンテンツ...
						</div>
					</div>
				</div>
			</div>
			<div class="media">
				<a class="media-left" href="#">
					<img class="media-object" src="..." alt="...">
				</a>
				<div class="media-body">
					<h4 class="media-heading">子メディアのヘッダ</h4>
					子メディアのコンテンツ...
				</div>
			</div>
		</div>
	</li>
	<li class="media">
		<a class="media-right" href="#">
			<img class="media-object" src="..." alt="...">
		</a>
		<div class="media-body">
			<h4 class="media-heading">右メディアのヘッダ</h4>
			右メディアのコンテンツ...
		</div>
	</li>
</ul>

Bootstrap3.xの設定例緑背景が変更箇所

<ul class="media-list">
	<li class="media">
		<div class="media-left">
			<a href="#">
				<img class="media-object" src="..." alt="...">
			</a>
		</div>
		<div class="media-body">
			<h4 class="media-heading">親メディアのヘッダ</h4>
			親メディアのコンテンツ...
			<div class="media">
				<div class="media-left">
					<a href="#">
						<img class="media-object" src="..." alt="...">
					</a>
				</div>
				<div class="media-body">
					<h4 class="media-heading">子メディアのヘッダ</h4>
					子メディアのコンテンツ...
					<div class="media">
						<div class="media-left">
							<a href="#">
								<img class="media-object" src="..." alt="...">
							</a>
						</div>
						<div class="media-body">
							<h4 class="media-heading">孫メディアのヘッダ</h4>
							孫メディアのコンテンツ...
						</div>
					</div>
				</div>
			</div>
			<div class="media">
				<div class="media-left">
					<a href="#">
						<img class="media-object" src="..." alt="...">
					</a>
				</div>
				<div class="media-body">
					<h4 class="media-heading">子メディアのヘッダ</h4>
					子メディアのコンテンツ...
				</div>
			</div>
		</div>
	</li>
	<li class="media">
		<div class="media-body">
			<h4 class="media-heading">右メディアのヘッダ</h4>
			右メディアのコンテンツ...
		</div>
		<div class="media-right">
			<a href="#">
				<img class="media-object" src="..." alt="...">
			</a>
		</div>
	</li>
</ul>

【設定】

ul.media-list > li.media > 《メディアオブジェクト》
メディアオブジェクト内を入れ子にすることも可能

【変更履歴】

【3.3.0】
メディアを左寄せ：a.pull-left + div.media-body ⇒ a.media-left + div.media-body
メディアを右寄せ：a.pull-right + div.media-body ⇒ div.media-body + a.media-right（《メディアの説明》⇒《メディアの表示》の順に記載する必要がある）
【3.3.2】
メディアを左寄せ：a.media-left ⇒ div.media-left > <a>
メディアを右寄せ：a.media-right ⇒ div.media-right > <a>

リストグループは、要素の単純なリストだけでなく、カスタムコンテンツを持つ複雑なリストを表示するための柔軟で強力なコンポーネント。

注意！　このページの見本で表示されるリストグループは、別途カスタムで max-width: 400px; に設定済み。

基本のリストグループ（Basic example）

最も基本的なリストグループは、単純にリスト項目を持つ順不同リストと適切なクラス。それに続くオプションや必要に応じて独自のCSSを使って構築すること。

見本

リスト1
リスト2
リスト3

設定例

<ul class="list-group">
	<li class="list-group-item">リスト1</li>
	<li class="list-group-item">リスト2</li>
	<li class="list-group-item">リスト3</li>
</ul>

【設定】

ul.list-group > li.list-group-item

バッジつきリストグループ（Badges）

バッジコンポーネントを任意のリストグループアイテムに追加すると、自動的に右側に配置される。

見本

10リスト1
20リスト2
30リスト3

設定例

<ul class="list-group">
	<li class="list-group-item"><span class="badge">10</span>リスト1</li>
	<li class="list-group-item"><span class="badge">20</span>リスト2</li>
	<li class="list-group-item"><span class="badge">30</span>リスト3</li>
</ul>

【設定】

li.list-group-item > span.badge
デフォルトでバッジ部分が右寄せになる

リンクつきリストグループ（Linked items）

リスト項目（これは<ul>の代わりに親要素の<div>を意味する）の代わりにアンカータグを使用してリスト項目をリンク。各リンクの要素をいちいち親要素で囲む必要はない。

Bootstrap2.xの積み重ねタブナビゲーションを継承

見本

ホームプロフィールメッセージ

Bootstrap2.3.2の設定例赤背景が変更箇所

<ul class="nav nav-tabs nav-stacked">
	<li class="active"><a href="#">ホーム</a></li>
	<li><a href="#">プロフィール</a></li>
	<li><a href="#">メッセージ</a></li>
</ul>

Bootstrap3.xの設定例緑背景が変更箇所

<div class="list-group">
	<a href="#" class="list-group-item active">ホーム</a>
	<a href="#" class="list-group-item">プロフィール</a>
	<a href="#" class="list-group-item">メッセージ</a>
</div>

【設定】

div.list-group > a.list-group-item
リンクつきリストグループはリスト形式（<ul> > <li> > <a>）ではなく、<div> > <a>で作成
アクティブ化したいリンクは、a.list-group-itemに.activeを追加
a.list-group-item内にspan.badgeを入れるとバッジが表示

【Bootstrap2.3.2との変更箇所】

ul.nav nav-tabs nav-stacked > <li> > <a>（積み重ねタブナビゲーション）⇒ div.list-group > a.list-group-item

ボタンによるリストグループ（Button items）v3.3.5新設

リストのグループ項目は、リスト項目（これは<ul>の代わりに親要素の<div>を意味する）の代わりにボタンでもかまわない。各ボタンの要素をいちいち親要素で囲む必要はない。ここでの<button>には標準の.btnクラスは使用しないこと

見本

設定例

<div class="list-group">
	<button type="button" class="list-group-item active">ホーム</button>
	<button type="button" class="list-group-item">プロフィール</button>
	<button type="button" class="list-group-item">メッセージ</button>
</div>

【設定】

div.list-group > button.list-group-item
アクティブ化したいボタンは、button.list-group-itemに.activeを追加
button.list-group-item内にspan.badgeを入れるとバッジが表示

リンクの無効（Disabled items）v3.2.0新設

.disabledを.list-group-itemに追加すると、グレーアウトされて無効に見えるようになる。

見本

ホームプロフィールメッセージ

設定例

<div class="list-group">
	<a href="#" class="list-group-item disabled">ホーム</a>
	<a href="#" class="list-group-item">プロフィール</a>
	<a href="#" class="list-group-item">メッセージ</a>
</div>

【設定】

a.list-group-itemに.disabledを追加

リストグループの背景色（Contextual classes）v3.1.0新設

コンテキスト・クラスを使用して、リスト項目のスタイルを設定（デフォルトまたはリンク）。 .active状態も含む。

設定例

<!-- 基本のリストグループの場合 -->
<ul class="list-group">
	<li class="list-group-item list-group-item-{themecolor}">リスト</li>
	...
</ul>

<!-- リンクつきリストグループの場合 -->
<div class="list-group">
	<a href="#" class="list-group-item list-group-item-{themecolor} active">アクティブ化</a>
	<a href="#" class="list-group-item list-group-item-{themecolor}">リスト</a>
	...
</div>

背景色の種類

●基本のリストグループの場合

Success：.list-group-item-success
Info：.list-group-item-info
Warning：.list-group-item-warning
Danger：.list-group-item-danger

●リンクつきリストグループの場合

Successのアクティブ化：.list-group-item-success.active Success：.list-group-item-success Infoのアクティブ化：.list-group-item-info.active Info：.list-group-item-info Warningのアクティブ化：.list-group-item-warning.active Warning：.list-group-item-warning Dangerのアクティブ化：.list-group-item-danger.active Danger：.list-group-item-danger

【設定】

.list-group-itemに.list-group-item-{themecolor}（上記の「背景色の種類」から選択）を追加
さらに.activeを追加するとアクティブ用の背景色になる

ヘッダありリンクつきリストグループ（Custom content）

見本

下のようなリンクリストグループの場合でも、ほぼすべてのHTMLを追加すること。

リスト1のヘッダ

リスト1のコンテンツ

リスト2のヘッダ

リスト2のコンテンツ

リスト3のヘッダ

リスト3のコンテンツ

設定例

<div class="list-group">
	<a href="#" class="list-group-item active">
		<h4 class="list-group-item-heading">リスト1のヘッダ</h4>
		<p class="list-group-item-text">リスト1のコンテンツ</p>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">リスト2のヘッダ</h4>
		<p class="list-group-item-text">リスト2のコンテンツ</p>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">リスト3のヘッダ</h4>
		<p class="list-group-item-text">リスト3のコンテンツ</p>
	</a>
</div>

【設定】

a.list-group-item > [h4.list-group-item-heading《ヘッダ》 + p.list-group-item-text《コンテンツ》]
p.list-group-item-text > span.badgeでバッジが表示

必ずしも必要ではないが、DOM（Document Object Model）をボックスに入れる必要があることがある。そのような場合は、パネルコンポーネントを試すこと。

基本のパネルの設定（Basic example）

デフォルトでは、すべての.panelは、いくつかのコンテンツを格納するためにいくつかの基本的なborderとpaddingを適用。

見本

パネルのコンテンツ

設定例

<div class="panel panel-default">
	<div class="panel-body">
		パネルのコンテンツ
	</div>
</div>

【設定】

div.panel.panel-default > div.panel-body（コンテンツ）

【変更履歴】

.panel-default、div.panel-bodyが新設（v3RC2）

ヘッダつきパネル（Panel with heading）

.panel-headingを使用して、見出しコンテナをパネルに簡単に追加可能。事前にスタイルされた見出しを追加するには、.panel-titleクラスを含む任意の<h1>-<h6>を組み入れることも可能。ただし、<h1>-<h6>のフォントサイズは.panel-headingで再定義される。

適切なリンクの色付けを行うには、.panel-title内の見出しにリンクを配置すること。

見本

●タイトルなしヘッダ

パネルのヘッダ

パネルのコンテンツ

●タイトルありヘッダ

パネルのタイトル

パネルのコンテンツ

設定例

<!-- タイトルなしヘッダ -->
<div class="panel panel-default">
	<div class="panel-heading">パネルのヘッダ</div>
	<div class="panel-body">
		パネルのコンテンツ
	</div>
</div>

<!-- タイトルありヘッダ -->
<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">パネルのタイトル</h3>
	</div>
	<div class="panel-body">
		パネルのコンテンツ
	</div>
</div>

【設定】

div.panel.panel-default > [[div.panel-heading（ヘッダ） > h*.panel-title（タイトル）] + div.panel-body（コンテンツ）]
h*.panel-titleはどの<h*>タグでもサイズは変わらない

フッタつきパネル（Panel with footer）

.panel-footerでボタンや二次テキストを囲む。最前面ではないため、色つきのバリエーションを使用する場合、パネルのフッタは色や枠線を継承しない。

見本

パネルのコンテンツ

パネルのフッタ

設定例

<div class="panel panel-default">
	<div class="panel-body">
		パネルのコンテンツ
	</div>
	<div class="panel-footer">パネルのフッタ</div>
</div>

【設定】

div.panel-body《コンテンツ》 + div.panel-footer《フッタ》

パネルの色（Contextual alternatives）

他のコンポーネントと同様に、コンテキスト状態クラスのいずれかを追加することで、パネルを特定のコンテキストに対してより意味のあるものに簡単にすることが可能。

設定例

<div class="panel panel-{themecolor}">
	<div class="panel-heading">パネルのヘッダ</div>
	<div class="panel-body">
		パネルのコンテンツ
	</div>
	<div class="panel-footer">パネルのフッタ</div>
</div>

パネルの種類

Default：.panel-defaultv3RC2変更

パネルのヘッダ

パネルのコンテンツ

パネルのフッタ

Primary：.panel-primary

パネルのヘッダ

パネルのコンテンツ

パネルのフッタ

Info：.panel-info

パネルのヘッダ

パネルのコンテンツ

パネルのフッタ

Success：.panel-success

パネルのヘッダ

パネルのコンテンツ

パネルのフッタ

Warning：.panel-warning

パネルのヘッダ

パネルのコンテンツ

パネルのフッタ

Danger：.panel-danger

パネルのヘッダ

パネルのコンテンツ

パネルのフッタ

【設定】

.panelに.panel-{themecolor}（上記の「パネルの種類」から選択、.panel単独での使用は不可）を追加
パネルのヘッダにバッジを設置するとヘッダの色に合わせたバッジの色がつく

【注意】

パネルのフッタの文字色、背景色は、色の設定によって変化なし

テーブルつきパネル（With tables）v3RC2の途中新設

継ぎ目のないなデザインのために、パネル内にボーダーのない.tableを追加。.panel-bodyがある場合、分離のためにテーブルの上部に余分に境界線を追加。

見本

パネルのヘッダ

パネルのコンテンツ　パネルのコンテンツ　パネルのコンテンツ　パネルのコンテンツ　パネルのコンテンツ　パネルのコンテンツ　パネルのコンテンツ　パネルのコンテンツ　パネルのコンテンツ　パネルのコンテンツ　パネルのコンテンツ　パネルのコンテンツ

#	見出し	見出し	見出し
1	テーブルセル	テーブルセル	テーブルセル
2	テーブルセル	テーブルセル	テーブルセル
3	テーブルセル	テーブルセル	テーブルセル

設定例

<div class="panel panel-default">
	<div class="panel-heading">パネルのヘッダ</div>
	<div class="panel-body">
		パネルのコンテンツ...
	</div>
	<table class="table">
		...
	</table>
</div>

【設定】

div.panel > [div.panel-heading《ヘッダ》 + div.panel-body《コンテンツ》 + table.table・・・《テーブル》]
パネルのコンテンツ（div.panel-body）はなくても使用可能

リストグループつきパネル（With list groups）

どのパネルにも全幅のリストグループを簡単に組み入れることが可能。

見本

パネルのヘッダ

リスト1
リスト2
リスト3

設定例

<div class="panel panel-default">
	<div class="panel-heading">パネルのヘッダ</div>
	<div class="panel-body">
		パネルのコンテンツ...
	</div>
	<ul class="list-group">
		<li class="list-group-item">リスト1</li>
		...
	</ul>
</div>

【設定】

div.panel > [div.panel-heading《ヘッダ》 + div.panel-body《コンテンツ》 + ul.list-group・・・《リストグループ》]
パネルのコンテンツ（div.panel-body）はなくても使用可能

【変更履歴】

初期v3RC1にあった.list-group-flushは途中で不要に

ブラウザは、任意のデバイスで適切に拡大/縮小される固有の比率を作成することにより、コンテナブロックの幅に基づいてビデオまたはスライドの寸法を決定可能。

ルールは<iframe>, <embed>, <video>, <object>要素に直接適用される。別の属性のスタイルと一致させる場合は、オプションで明示的な子孫クラス.embed-responsive-itemを使用。

アドバイス！：<iframe>にframeborder="0"を含める必要はない。

見本

16:9のアスペクト比

4:3のアスペクト比

設定例

<!-- 16:9のアスペクト比 -->
<div class="embed-responsive embed-responsive-16by9">
	<iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3のアスペクト比 -->
<div class="embed-responsive embed-responsive-4by3">
	<iframe class="embed-responsive-item" src="…"></iframe>
</div>

【設定】

16:9のアスペクト比：.embed-responsive.embed-responsive-16by9 > <iframe>, <embed>, <video>, <object>のいずれかに.embed-responsive-itemを追加
4:3のアスペクト比：.embed-responsive.embed-responsive-4by3 > <iframe>, <embed>, <video>, <object>のいずれかに.embed-responsive-itemを追加

【変更履歴】

【3.3.0】<video>にも対応

囲み枠の設定（Default well）

囲み枠を要素に単純な効果として使用して、挿入効果を与える。

見本

囲み枠のコンテンツ

設定例

<div class="well">
	囲み枠のコンテンツ...
</div>

【設定】

囲み枠を設置したいところを、div.wellで囲む

囲み枠のサイズ（Optional classes）

2つのオプションの修飾子クラスを使用して、空白と角丸を制御。

設定例

<div class="well well-{size}">
	囲み枠のコンテンツ...
</div>

サイズの種類クラス変更

大きめ：.well-lg

小さめ：.well-sm

※標準（参考）

【設定】

.wellに.well-{size}（上記の「サイズの種類」から選択）を追加

【Bootstrap2.3.2との変更箇所】

大きめ：.well-large ⇒ .well-lg（v3RC1の途中）
小さめ：.well-small ⇒ .well-sm（v3RC1の途中）

Components2 (adsbygoogle = window.adsbygoogle || []).push({});

ラベル（Labels）

ラベルの設定（Example）

見本

見出しの例 New