メインコンテンツへスキップ

Bootstrap3の使い方をBootstrap2.xからの変更箇所を交えて解説しています。

ラベルの設定(Example)

見本

見出しの例 New

見出しの例 New

見出しの例 New

見出しの例 New

見出しの例 New
見出しの例 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(3RC1の途中)
  • Primary:.label-primaryが新設(3RC2の途中)
  • Danger:.label-important.label-danger
  • Inverse:.label-inverseは廃止

リンク、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のセレクタ経由で)バッジは単に折りたたまれて表示されない。

アクティブ時のバッジ(Adapts to active nav states)新設

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

見本

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


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


設定例

<!-- ピルナビゲーションでの設定 -->
<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を追加するとバッジ部分が右寄せになる

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

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

見本 別タブで表示します

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

幅一杯のジャンボトロン 新設(3.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%;
    }
    

【注意】

ページヘッダの設定

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

見本

設定例

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

【設定】

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

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

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

サムネイルの設定(Default example)設定変更

デフォルトでは、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コンテンツが追加可能。

見本

100%x180

サムネイルのタイトル

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

ボタン ボタン

100%x180

サムネイルのタイトル

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

ボタン ボタン

100%x180

サムネイルのタイトル

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

ボタン ボタン

100%x180

サムネイルのタイトル

ほんの少しの記述の追加で、ヘッダや文章やボタンのような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)のいずれかを囲む。

設定例

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

アラートの種類 一部変更

【設定】

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

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

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

【Bootstrap2.3.2との変更箇所】

  • 長いメッセージ用に使う.alert-blockは不要に(3RC1の途中)
  • Warning:.alert.alert.alert-warning(3RC2の途中)
  • Danger:.alert-error.alert-danger
  • アクセシビリティの設定が追加

アラートメッセージを閉じるボタン(Dismissible alerts)設定変更(3.3.2)

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

見本

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> > &times;]《閉じるボタン》 + 《アラート文》}
  • alert.jsを使ってアラートを閉じるためbutton.closedata-dismiss="alert"を入れる
  • ボタン名の×は、&times;と記述してエスケープ処理をする

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

  • アラートを閉じるボタンとなる<button>に、aria-label="閉じる"属性(アイコンボタンのラベル)を入れる
  • 閉じるボタンアイコンの&times;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の新設(3RC2)⇒ .alert-dismissible(3.2.0)
  • アクセシビリティの設定が追加

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

見本

設定例

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

【設定】

  • .alert > a.alert-link

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

プログレスバーの設定(Basic example)設定変更

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

見本

60%完了

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)新設

プログレスバーの中から.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)新設(3.2.0)⇒設定変更(3.3.2)

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

見本

0%
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)設定変更

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

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

20%完了

Success:.progress-bar-success

40%完了

Warning:.progress-bar-warning

60%完了

Danger:.progress-bar-danger

80%完了

Default:(.progress-barの単独使用)

100%完了

【設定】

  • .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)設定変更(3.2.0)

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

見本

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

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)設定変更(3.2.0)

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

見本

45%完了

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)設定変更(3.3.2)

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

見本

64x64

メディアのヘッダ

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

親メディアのヘッダ

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

子メディアのヘッダ

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

右メディアのヘッダ

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

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-bodya.media-left + div.media-body
    メディアを右寄せ:a.pull-right + div.media-bodydiv.media-body + a.media-right《メディアの説明》⇒《メディアの表示》の順に記載する必要がある)

  • 【3.3.2】

    メディアを左寄せ:a.media-leftdiv.media-left > <a>
    メディアを右寄せ:a.media-rightdiv.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)新設(3.3.0)⇒設定変更(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>
		<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)設定変更(3.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-bodya.media-left + div.media-body
    メディアを右寄せ:a.pull-right + div.media-bodydiv.media-body + a.media-right《メディアの説明》⇒《メディアの表示》の順に記載する必要がある)

  • 【3.3.2】

    メディアを左寄せ:a.media-leftdiv.media-left > <a>
    メディアを右寄せ:a.media-rightdiv.media-right > <a>

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

基本のリストグループ(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)新設(3.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)新設(3.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)新設(3.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>

背景色の種類

【設定】

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

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

見本

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

設定例

<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は、いくつかのコンテンツを格納するためにいくつかの基本的なborderpaddingを適用。

見本

パネルのコンテンツ

設定例

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

【設定】

  • div.panel.panel-default > div.panel-body(コンテンツ)

【変更履歴】

  • .panel-defaultdiv.panel-bodyが新設(3RC2)

ヘッダつきパネル(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-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-default変更(3RC2)

パネルのヘッダ
パネルのコンテンツ

Primary:.panel-primary

パネルのヘッダ
パネルのコンテンツ

Info:.panel-info

パネルのヘッダ
パネルのコンテンツ

Success:.panel-success

パネルのヘッダ
パネルのコンテンツ

Warning:.panel-warning

パネルのヘッダ
パネルのコンテンツ

Danger:.panel-danger

パネルのヘッダ
パネルのコンテンツ

【設定】

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

【注意】

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

テーブルつきパネル(With tables)新設(3RC2の途中)

継ぎ目のないなデザインのために、パネル内にボーダーのない.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)はなくても使用可能

【変更履歴】

  • 初期3RC1にあった.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(3RC1の途中)
  • 小さめ:.well-small.well-sm(3RC1の途中)