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

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

個別または一括で(Individual or compiled)

プラグインは、個別(Bootstrapの個別*.jsファイルを使用)、または一括(bootstrap.jsまたはその軽量版であるbootstrap.min.jsを使用)で追加可能。

一括にされたJavaScriptを使用

bootstrap.jsbootstrap.min.jsは、両方ともすべてのプラグインが一つのファイルに組み込まれている。どちらか1つだけを導入すること。

プラグインの依存関係

いくつかのプラグインとCSSコンポーネントは、他のプラグインに依存する。個別にプラグインを組み込んでいる場合は、これらの依存関係を解説の中で確認すること。また、すべてのプラグインはjQueryに依存していることに注意(これはjQueryがプラグインファイルの前に含まれていなければならないことを意味する)。jQueryのどのバージョンがサポートしているかを確認するにはBootstrapのbower.jsonを参照すること(最新版のBootstrap3.3.7時点でjQuery1.9.1~3に対応)。

データ属性(Data attributes)

1行のJavaScriptを記述することなく、すべてのBootstrapプラグインをマークアップAPIだけで使用可能。これはBootstrapの最上級のAPIであり、プラグインを使用する際の最初に考慮すべき点。

つまり、この機能をオフにすることが望ましい場合がある。従って、data-apiで名前空間(ネームスペース)されたドキュメントのすべてのイベントをバインド解除することによって、データ属性APIを無効にする機能も提供。これは次のとおり:

$(document).off('.data-api')

別の方法として、特定のプラグインをターゲットにするには、プラグインの名前を名前空間としてdata-api名前空間と一緒に次のように組み込む:

$(document).off('.alert.data-api')

データ属性を使用して要素ごとに1つのプラグインのみ

同じ要素に複数のプラグインのデータ属性を使用しないこと。例えば、一つのボタンでツールチップとモーダルの両方で使用することはできない。それを実現するためには、ラッピング要素(要素を新たな要素で囲む)を使用するように。

プログラムに基づいたAPI(Programmatic API)

単純にJavaScript API経由で、すべてのBootstrapのプラグインの使用が可能のはず。すべての公開APIは、単独または連鎖が可能な方法で実行結果を返す。

$('.btn.danger').button('toggle').addClass('fat')

すべてのメソッドは、オプションのオプションオブジェクト、特定のメソッドを対象とした文字列、または何も指定しないこと(デフォルトの動作でプラグインを開始):

$('#myModal'.modal()											// デフォルトで初期化
$('#myModal').modal({ keyboard: false })	 // キーボードなしで初期化
$('#myModal').modal('show')								 // 初期化して直ちに表示を呼び出す

各プラグインには、Constructorプロパティでその未加工のコンストラクタを公開:$ fn.popover.Constructor。特定のプラグインの事例を取得する場合は、要素から直接取得:$('[rel=popover]').data('popover')

デフォルトの設定(Default settings)新設(3.3.0)

プラグインのConstructor.DEFAULTSオブジェクトを変更することによって、プラグインのデフォルト設定が変更可能:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // モーダルプラグインの `keyboard`オプションのデフォルトをfalseに変更

競合の回避(No conflict)

場合によっては、他のUIフレームワークとBootstrapプラグインを使用する必要がある。このような状況では、名前空間の衝突が発動する可能性がある。このような場合は、値を元に戻したいプラグインで.noConflictを呼び出すことが可能。

var bootstrapButton = $.fn.button.noConflict() // 以前$.fn.buttonに割り当てられた値に戻す
$.fn.bootstrapBtn = bootstrapButton						 // $().bootstrapBtnにBootstrapの機能を与える

イベント(Events)

Bootstrapは、ほとんどのプラグインの独自の動作のためのカスタムイベントを提供。一般的に、これらは動詞、過去分詞の形態になる-動詞形(例:show)がイベントの開始時に起動され、その過去分詞形(例:shown)がアクションの完了時に起動される。

3.0.0以降、すべてのBootstrapのイベントは名前空間になる。

すべての動詞形のイベントでpreventDefault機能を提供。これにより、アクション開始前にそのアクションの実行を停止することが可能。

$('#myModal').on('show.bs.modal', function (e) {
	if (!data) return e.preventDefault() // モーダルの表示を止める
})

【Bootstrap2.3.2との変更箇所】

  • イベントタイプ名がxxxxxx.bs.******はプラグイン名)に変更(例:showshow.bs.modal

バージョン・ナンバー(Version numbers)

BootstrapのjQueryのプラグインのバージョンには、プラグインのConstructorのVERSIONプロパティ経由でアクセス可能。例えばツールチッププラグインの場合:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

 

JavaScript無効時の特別なフォールバック(No special fallbacks when JavaScript is disabled)

JavaScriptが無効になっていると、Bootstrapのプラグインは特に率直にフォールバックしない。この場合のユーザーの体験することが気になるなら、<noscript>を使ってユーザーに状況(JavaScriptを再度有効にする方法)を説明するか、または独自のカスタムフォールバックを追加すること。

サードパーティ製のライブラリ

Bootstrapは、PrototypeやjQueryのUIのようなサードパーティのJavaScriptライブラリを正式にサポートしていない.noConflictや名前空間のイベントにもかかわらず自分で修正する必要のある互換性の問題があるかもしれない。

※遷移アニメーションプラグインのいくつかの例

  • モーダルの開閉時のスライドやフェードアウト
  • タブ切替時のフェードアウト
  • アラートを閉じる際のフェードアウト
  • カルーセルのスライド

遷移アニメーションについて(About transitions)

シンプルな遷移アニメーション効果が必要な場合は、transition.jsを他のJSファイルと一度組み込む。一括版(または圧縮版)のbootstrap.jsを使用している場合は、すでにそこに組み込まれているので、改めてこれを組み込む必要はない。

内部のもの(What's inside)

transition.jsは、transitionEndイベントの基本ヘルパーであり、CSS遷移アニメーションのエミュレーターである。これは他のプラグインでCSS遷移アニメーションのサポートをチェックし、遷移アニメーションを受け取るために使用される。

遷移アニメーションを無効にする(Disabling transitions)

以下のJavaScriptスニペットを使用して、遷移アニメーションをグローバルに無効にすることが可能。これは、transition.js(または場合によってはbootstrap.jsbootstrap.min.js)が読み込まれた後に行わなければならない。

$.support.transition = false

モーダルは合理化されているが、最小限の機能とスマートなデフォルトを備えた柔軟なダイアログプロンプト。

HTML5がその文字列をどのように定義するかによって、autofocusHTML属性はBootstrapのモーダルに影響を与えない。同じ効果を得るには、カスタムJavaScriptを使用。

$('#myModal').on('shown.bs.modal', function () {
	$('#myInput').focus()
})

基本設定(Examples)設定変更⇒追加変更(3.3.5)

静的モーダルの実例(Static example)

ヘッダ、ボディ、フッタのアクションのセットを持つレンダリングされたモーダル。

見本 モーダルを開いた状態で表示

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

<div class="modal" role="dialog">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h3>モーダルのタイトル</h3>
	</div>
	<div class="modal-body">
		<p>モーダルボディの本文。</p>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn" data-dismiss="modal">閉じる</button>
		<button type="button" class="btn btn-primary">変更を保存</button>
	</div>
</div><!-- /.modal -->

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

<div class="modal" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="閉じる"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">モーダルのタイトル</h4>
			</div>
			<div class="modal-body">
				<p>モーダルボディの本文。</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
				<button type="button" class="btn btn-primary">変更を保存</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

モーダルの設定(Live demo)

下のボタンをクリックして、JavaScript経由でモーダルを切り替える。ページの上からスライドしてフェードインする。

見本

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

<!-- 切り替えボタンの設定 -->
<a class="btn btn-primary" data-toggle="modal" href="#myModal">ココを押すと表示</a>

<!-- モーダルの設定 -->
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h3 id="myModalLabel">モーダルのタイトル</h3>
	</div>
	<div class="modal-body">
		...
	</div>
	<div class="modal-footer">
		...
	</div>
</div><!-- /.modal -->

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

<!-- 切り替えボタンの設定 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">ココを押すと表示</button>

<!-- モーダルの設定 -->
<div class="modal fade" role="dialog" id="myModal" tabindex="-1" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="閉じる"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">モーダルのタイトル</h4>
			</div>
			<div class="modal-body">
				...
			</div>
			<div class="modal-footer">
				...
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

【設定】

  • button.btn《切り替えボタン》 + 〔div.modal.fade > div.modal-dialog > div.modal-content > {div.modal-header > [button.close > <span> > &times;]《閉じるボタン》 + h4.modal-title《タイトル》}《ヘッダ》 + div.modal-body《本文》 + div.modal-footer〕《モーダル部分》
  • モーダルをフェードインで閉じるために、.modal.fadeを追加
  • アイコンとなる × は、&times;と記述してエスケープ処理をする
  • モーダルのプラグインを使用するため、
    • 切り替えボタンには、data-toggle="modal"(プラグインを有効にする)と、data-target="#モーダルのID"(またはhref="#モーダルのID"
    • div.modal(ボタンのリンク先)には、id="ID名"tabindex="-1"(escキーを押すとモーダルが閉じるようにする)
    をそれぞれ入れる
  • プラグインを使ってモーダルを閉じるため、閉じるアイコンや閉じるボタン部分にはbutton.closedata-dismiss="modal"を入れる

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

  • div.modalに、role="dialog"属性(支援技術にモーダルダイアログの役割を伝える)を入れる
  • div.modal-dialogに、role="document"属性(支援技術にドキュメントの役割を伝える)を入れる
  • モーダルを閉じるボタンとなる<button>に、aria-label="閉じる"属性(アイコンボタンのラベル)を入れる
  • 閉じるボタンアイコンの&times;span[aria-hidden="true"](スクリーンリーダー等での読み上げをスキップさせる)で囲むこと
  • h4.modal-titleid="ID名"を入れ、div.modalaria-labelledby="タイトルのID"属性(タイトルをモーダルのラベルとして関連付ける)を入れる

【変更履歴】

  • 【3.0.1】切替ボタンの設定が<a>から<button>に変更
  • 【3.2.0】閉じるボタンアイコンの設定:aria-hidden="true"<button>内より独立した<span>内に移動し、<span class="sr-only">閉じる</span>を追加
  • 【3.3.2】閉じるボタンアイコンの設定:<button>aria-label="閉じる"を追加して、<span class="sr-only">閉じる</span>は不要に
  • 【3.3.5】

    div.modal-dialogに、role="document"属性を入れる
    div.modalaria-hidden="true"は不要に

【Bootstrap2.3.2との変更箇所】

  • div.modal.hide.fadediv.modal.fade.hideは不要に)
  • div.modal-dialogdiv.modal-contentの追加
  • モーダルのタイトル部分:.modal-titleの追加(タイトルの大きさは<h3><h4>
  • <button>aria-label="閉じる"を追加し、aria-hidden="true"は独立した<span>内に移動

モーダルの大きさ(Optional sizes)新設(3.1.0)

モーダルには2つのオプションのサイズがあり、修飾子クラスを使用して.modal-dialogに配置可能。

設定例

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog modal-{size}" role="document">
		<div class="modal-content">
			...
		</div>
	</div>
</div>

大きさの種類

●大きめ:.modal-lg


 

●小さめ:.modal-sm


 

※参考:標準

【設定】

  • .modal-dialog.modal-{size}(上記の「大きさの種類」から選択)を追加

アニメーションの削除(Remove animation)

見本

設定例

<!-- アニメーションあり -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	...
</div>

<!-- アニメーションなし -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	...
</div>

【設定】

  • フェードインで表示されるのではなく、単純に表示するモーダルを設置する場合は、.modalから.fadeを削除

グリッドシステムの使用(Using the grid system)新設(3.3.4)

モーダル内でBootstrapグリッドシステムを利用するには、.modal-body内に.rowsを入れ子にし、通常のグリッドシステムクラスを使用。

見本

設定例

<div class="modal-body">
	<div class="container-fluid">
		<p>モーダルのコンテンツ</p>
		<div class="row">
			<div class="col-md-4">.col-md-4</div>
			<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
		</div>
		<div class="row">
			<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
			<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
		</div>
		<div class="row">
			<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
		</div>
		<div class="row">
			<div class="col-sm-9">
				レベル 1: .col-sm-9
				<div class="row">
					<div class="col-xs-8 col-sm-6">
						レベル 2: .col-xs-8 .col-sm-6
					</div>
					<div class="col-xs-4 col-sm-6">
						レベル 2: .col-xs-4 .col-sm-6
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

【設定】

  • div.modal-body (> div.container-fluid) > div.row > div.col-{breakpoint}-*.col-{breakpoint}-offset-*

若干異なる内容で、同じモーダルを起動する複数のボタンが必要な場合、クリックしたボタンに応じてモーダルの内容を変更するには、event.relatedTarget 属性とHTML data-*属性(おそらくjQuery経由)を使用。relatedTarget の詳細は、モーダルのイベントの解説に記載。

見本

設定例

HTML
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@president">社長向けモーダルを開く</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@vice-president">副社長向けモーダルを開く</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@officer">重役向けモーダルを開く</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="exampleModalLabel">新メッセージ</h4>
			</div>
			<div class="modal-body">
				<form>
					<div class="form-group">
						<label for="recipient-name" class="form-control-label">受信者:</label>
						<input type="text" class="form-control" id="recipient-name">
					</div>
					<div class="form-group">
						<label for="message-text" class="form-control-label">メッセージ:</label>
						<textarea class="form-control" id="message-text"></textarea>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
				<button type="button" class="btn btn-primary">送信</button>
			</div>
		</div>
	</div>
</div>
JavaScript
$('#exampleModal').on('show.bs.modal', function (event) {
	var button = $(event.relatedTarget) // モーダル切替えボタン
	var recipient = button.data('whatever') // data-* 属性から情報を抽出
	// 必要に応じて、ここでAJAXリクエストを開始可能(コールバックで更新することも可能)
	// モーダルの内容を更新。ここではjQueryを使用するが、代わりにデータ・バインディング・ライブラリまたは他のメソッドを使用することも可能
	var modal = $(this)
	modal.find('.modal-title').text(recipient + 'にメッセージを送信')
	modal.find('.modal-body input').val(recipient)
})

使用方法(Usage)

モーダルプラグインは、必要に応じて、データ属性やJavaScriptを使用して、非表示のコンテンツを切り替える。また、<body>.modal-openを追加してデフォルトのスクロール動作を再定義し、モーダルの外側をクリックしたときに表示されたモーダルを閉じるためのクリック領域を提供する.modal-backdropを生成する。

データ属性経由で(Via data attributes)

JavaScriptを書かずにモーダルを有効にする。特定のモーダルを起動させるためには、data-target="#foo"またはhref="#foo"とともに、ボタンのようなコントローラー要素にdata-toggle = "modal"を設定すること。

<button data-toggle="modal" data-target="#myModal">モーダルを起動</button>

<a data-toggle="modal" href="#myModal">モーダルを起動</a>

JavaScript経由で(Via JavaScript)

JavaScriptの1行でIDmyModalのモーダルを呼び出す:

$('#myModal').modal(options)

オプション(Options)

オプションは、データ属性またはJavaScriptを使用して渡すことが可能。データ属性の場合、data-backdrop=""のようにdata-にオプション名を追加すること。

名前 タイプ デフォルト 説明
backdrop
一部追加(3.0.1)
boolean or the string 'static' true モーダルの背景をオーバーレイ表示
true:有効/false:無効
または、背景のクリックでモーダルを閉じないようにするにはstaticを指定
keyboard boolean true escキーを押すとモーダルを閉じる
true:有効/false:無効
show boolean true 初期化時にモーダルを表示
true:有効/false:無効
remote
廃止(3.3.0)
path false

このオプションはv3.3.0以降廃止され、v4では削除。 クライアント側のテンプレートまたはデータバインディングフレームワークを使用するか、jQuery.loadを自分で呼び出すことを推奨。

リモートURLが提供されている場合、コンテンツはjQueryのloadメソッド経由で1度ロードされ.modal-contentのdiv内に挿入される。data-apiを使用している場合は、href属性を使用してリモートソースを指定することも可能。その一例を以下に示す:

<a data-toggle="modal" href="remote.html" data-target="#modal">ココをクリック</a>

【変更履歴】

  • 【3.0.1】backdropのタイプにstring 'static'が追加
  • 【3.3.0】remoteの廃止

メソッド(Methods)一部追加(3.3.4)

.modal(options)

コンテンツをモーダルとしてアクティブ化する。オプションのオプションでobjectを受け入れる。

$('#myModal').modal({
	keyboard: false
})

.modal('toggle')

モーダルを手動で切り替える。モーダルが実際に表示または非表示になる前(つまり、shown.bs.modal または hidden.bs.modal イベント発動前)に呼び出し元に戻る

$('#myModal').modal('toggle')

.modal('show')

モーダルを手動で開く。モーダルが実際に表示される前(つまり、shown.bs.modal イベント発動前)に呼び出し元に戻る

$('#myModal').modal('show')

.modal('hide')

モーダルを手動で非表示にする。モーダルが実際に非表示になる前(つまり、hidden.bs.modal イベントが発動する前)に呼び出し元に戻る

$('#myModal').modal('hide')

.modal('handleUpdate') 新設(3.3.4)

モーダルの位置を再調整して、スクロールバーが現れる場合にはスクロールバーに対抗。モーダルが左に移動。開いている間にモーダルの高さが変化した場合にのみ必要。

※一般的な例として、JavaScriptを使用してモーダル内の非表示要素を表示したり、アクティベーション後にAjaxを使用してモーダル内のコンテンツを更新したりする場合に使用。

$('#myModal').modal('handleUpdate')

イベント(Events)一部追加(3.1.0)

Bootstrapのモーダルのクラスは、モーダル機能に接続するためにいくつかのイベントを公開している。

すべてのモーダルイベントはモーダル自体(つまり、<div class="modal">)で発動。

イベントタイプ 説明
show.bs.modal このイベントは、showのインスタンス・メソッドが呼び出されると直ちに発動。クリックによって発動した場合、クリックされた要素はイベントのrelatedTargetプロパティとして使用可能。
shown.bs.modal このイベントは、モーダルがユーザーに表示されたときに発動(完全にCSS遷移が完了するまで待機)。クリックによって発動した場合、クリックされた要素はイベントのrelatedTargetプロパティとして使用可能。
hide.bs.modal このイベントは、hideのインスタンス・メソッドが呼び出されると直ちに発動。
hidden.bs.modal このイベントは、モーダルがユーザーから非表示になったときに発動(完全にCSS遷移が完了するまで待機)。
loaded.bs.modal
新設(3.1.0)
このイベントは、モーダルがリモートオプションを使用してコンテンツをロードしたときに発動。
使用例
$('#myModal').on('hidden.bs.modal', function (e) {
	// 何かをする...
})

ナビゲーションバー、タブ、ピルを含むこの単純なプラグインで、ほとんど何でもドロップダウンメニューを追加。

見本

【設定】

  • [.dropdown-toggle[data-toggle="dropdown"] > span.caret](ドロップダウンボタン) + [ul.dropdown-menu > li](ドロップダウンメニュー)

データ属性またはJavaScript経由で、ドロップダウンプラグインは、親リスト項目の.openクラスを切り替えることによって、非表示のコンテンツ(ドロップダウンメニュー)を切り替える。

モバイルデバイスでは、ドロップダウンを開くとドロップアウトメニューを閉じるためのタップ領域として.dropdown-backdropが追加されるが、これは適切なiOSサポートの要件である。つまり、開いているドロップダウンメニューから別のドロップダウンメニューに切り替えるには、モバイル上で余分にタップが必要。

注:data-toggle="dropdown"属性は、アプリケーションレベルのドロップダウンメニューを閉じるために使用されるため、常に使用することを推奨。

データ属性経由で(Via data attributes)

data-toggle="dropdown"をリンクまたはボタンに追加すると、ドロップダウンが切り替わる。

<div class="dropdown">
	<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		ドロップダウンの切替
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" aria-labelledby="dLabel">
		...
	</ul>
</div>

URLをリンクボタンでそのまま保持するには、href="#"の代わりにdata-target属性を使用。

<div class="dropdown">
	<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
		ドロップダウンの切替
		<span class="caret"></span>
	</a>

	<ul class="dropdown-menu" aria-labelledby="dLabel">
		...
	</ul>
</div>

JavaScript経由で(Via JavaScript)

JavaScriptを使用してドロップダウンを呼び出す。

$('.dropdown-toggle').dropdown()

オプション(Options)

なし。

メソッド(Methods)

$().dropdown('toggle')

指定されたナビゲーションバーやタブ付きナビゲーションのドロップダウンメニューを切り替える。

イベント(Events)新設

すべてのドロップダウンイベントは、.dropdown-menuの親要素で発動する。

すべてのドロップダウンイベントは、値が切替アンカー要素であるrelatedTargetプロパティを持つ。

イベントタイプ 説明
show.bs.dropdown このイベントは、表示のインスタンス・メソッドが呼び出されると直ちに発動。
shown.bs.dropdown このイベントは、ユーザーにドロップダウンが表示されたときに発動(完全にCSS遷移が完了するまで待機)。
hide.bs.dropdown このイベントは、非表示のインスタンス・メソッドが呼び出されると直ちに発動。
hidden.bs.dropdown このイベントは、ドロップダウンがユーザーから非表示になったときに発動(完全にCSS遷移が完了するまで待機)。
使用例
$('#myDropdown').on('show.bs.dropdown', function () {
	// 何かをする...
})

基本設定(Example in navbar)

スクロールスパイプラグインは、スクロール位置に基づいてナビゲーションのターゲットを自動的に更新するプラグイン。ナビゲーションバーの下の領域をスクロールして、アクティブなクラスの変更を確認する。ドロップダウンのサブ項目も強調表示される。

見本 別タブで表示します

設定例

<body style="padding-top:70px;" data-spy="scroll" data-target="#Navbar">
	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navbar" aria-expanded="false">
					<span class="sr-only">ナビゲーションの切替</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">ブランド</a>
			</div>
			<div class="navbar-collapse collapse" id="Navbar">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#page1">ページ1</a></li>
					<li><a href="#page2">ページ2</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">ドロップダウン <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#menu1">メニュー1</a></li>
							...
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</nav>

	<div class="container">
		<div id="page1">
			<h3 class="page-header">ページ1</h3>
			<p>スクロールしてみて下さい。</p>
			...
		</div>
		<div id="page2">
			<h3 class="page-header">ページ2</h3>
			<p>サイトがページ2になると上部のナビゲーションバーのアクティブの部分がページ2に変わります。</p>
			...
		</div>
		<div id="menu1">
			<h3 class="page-header">メニュー1</h3>
			<p>サイトがメニュー1になると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップダウンメニューのメニュー1がアクティブになります。</p>
			...
		</div>
		...
	</div>
</body>

【設定】

  • body[data-spy="scroll"][data-target="ナビゲーションの親要素のID"] > 《ナビゲーションの設定》

使用方法(Usage)

相対的な位置決めが必要(Requires relative positioning)

実装方法に関係なく、スクロールスパイは追従している要素にposition: relative;を使用する必要がある。これは、ほとんどの場合、<body>になるので、<body>以外の要素をスクロールするときは、必ずheightを設定し、overflow-y:scrollが適用される。

データ属性経由で(Via data attributes)

スクロールバーの動作をトップバーのナビゲーションに簡単に追加するには、追従する要素(通常は<body>)にdata-spy="scroll"を追加。次に、任意のBootstrap.navコンポーネントの親要素のIDかクラス名をdata-target属性に追加。

CSS
body {
	position: relative;
}
HTML
<body data-spy="scroll" data-target="#navbar-example">
	...
	<div id="navbar-example">
		<ul class="nav nav-tabs" role="tablist">
			...
		</ul>
	</div>
	...
</body>

JavaScript経由で(Via JavaScript)

CSSにposition: relative;を追加した後、JavaScriptでスクロールスパイを呼び出す:

$('body').scrollspy({ target: '#navbar-example' })

メソッド(Methods)

.scrollspy('refresh')

スクロールスパイをDOMの要素の追加または削除と組み合わせて使用する場合は、refreshメソッドを次のように呼び出す必要がある:

$('[data-spy="scroll"]').each(function () {
	var $spy = $(this).scrollspy('refresh')
})

オプション(Options)

オプションは、データ属性またはJavaScriptを使用して渡すことが可能。データ属性の場合は、data-offset=""のようにdata-にオプション名を追加。

名前 タイプ デフォルト 説明
offset number 10 追従を開始するトップからのスクロール位置(ピクセル単位)

イベント(Events)

イベントタイプ 説明
activate.bs.scrollspy このイベントは、新しい項目がスクロールスパイによってアクティブ化されるたびに発動。
使用例
$('#myScrollspy').on('activate.bs.scrollspy', function () {
	// 何かをする...
})

基本設定(Example tabs)設定変更(3.3.1)

ドロップダウンメニューを使用して、ローカルコンテンツの区画経由で遷移するための、迅速でダイナミックなタブ機能を追加。入れ子になったタブはサポートしていない。

タブナビゲーションの場合

見本

ホームの文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
プロフィールの文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

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

<!-- タブ部分 -->
<ul id="myTab" class="nav nav-tabs">
	<li class="active">
		<a href="#home" data-toggle="tab">ホーム</a>
	</li>
	<li>
		<a href="#profile" data-toggle="tab">プロフィール</a>
	</li>
	<li class="dropdown">
		<a href="#" class="dropdown-toggle" data-toggle="dropdown">ドロップダウン <b class="caret"></b></a>
		<ul class="dropdown-menu">
			<li>
				<a href="#dropdown1" data-toggle="tab">メニュー1</a>
			</li>
			...
		</ul>
	</li>
</ul>

<!-- パネル部分 -->
<div id="myTabContent" class="tab-content" style="margin-top:15px">
	<div class="tab-pane active" id="home">ホームの文章です。...</div>
	<div class="tab-pane" id="profile">プロフィールの文章です。...</div>
	<div class="tab-pane" id="dropdown1">メニュー1の文章です。...</div>
	...
</div>

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

<!-- タブ部分 -->
<ul id="myTab" class="nav nav-tabs" role="tablist">
	<li role="presentation" class="active">
		<a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">ホーム</a>
	</li>
	<li role="presentation">
		<a href="#profile" id="profile-tab" role="tab" data-toggle="tab" aria-controls="profile">プロフィール</a>
	</li>
	<li role="presentation" class="dropdown">
		<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">ドロップダウン <span class="caret"></span></a>
		<ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
			<li>
				<a href="#dropdown1" id="dropdown1-tab" role="tab" data-toggle="tab" aria-controls="dropdown1">メニュー1</a>
			</li>
			...
		</ul>
	</li>
</ul>

<!-- パネル部分 -->
<div id="myTabContent" class="tab-content" style="margin-top:15px">
	<div class="tab-pane active" id="home" role="tabpanel" aria-labelledBy="home-tab">ホームの文章です。...</div>
	<div class="tab-pane" id="profile" role="tabpanel" aria-labelledBy="profile-tab">プロフィールの文章です。...</div>
	<div class="tab-pane" id="dropdown1" role="tabpanel" aria-labelledBy="dropdown1-tab">メニュー1の文章です。...</div>
	...
</div>

【設定】

  • [ul.nav.nav-tabs > li[role="presentation"] > a[data-toggle="tab"]]《タブ部分》 + [.tab-content > .tab-pane]《パネル部分》
  • (タブと同様に)最初に表示するパネルには、あらかじめ .tab-pane.active を追加しておく

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

  • ul.nav.nav-tabsに、role="tablist"属性(支援技術にタブリストの役割を伝える)を入れる
  • タブリンク(またはドロップダウンメニューのアンカーリンク)の<a>に、
    • role="tab"属性(支援技術にタブ部分の役割を伝える)
    • aria-controls="パネルのID"属性(タブパネルのタブ部分とパネル部分を関連付ける)
    • 最初に表示するタブにaria-expanded="true"属性(支援技術に要素の開閉の状態を伝える)
    を入れる
  • div.tab-paneに、
    • role="tabpanel"属性(支援技術にパネル部分の役割を伝える)
    • aria-labelledby="タブのID"属性(タブパネルのタブ部分とパネル部分を関連付ける)
    を入れる

【注意】

  • ドロップダウンのアンカーリンク(a.dropdown-toggle)には data-toggle="tab" でなく data-toggle="dropdown" を入れ、ドロップダウンメニューのアンカーリンク(<a>)には data-toggle="tab" を入れる
  • ナビゲーションと文章との間が狭いので、別途.nav-tabsmargin-bottomのスタイルか.tab-contentmargin-topのスタイルを指定

【変更履歴】

  • 【3.2.0】ul.nav.nav-tabsrole="tablist"と、タブリンク(またはドロップダウンメニューのアンカーリンク)の<a>role="tab"を入れる
  • 【3.3.0】タブリンク(またはドロップダウンメニューのアンカーリンク)の<a>aria-controls="パネルのID"と最初に表示するパネルにaria-expanded="true"属性、div.tab-panerole="tabpanel"と>aria-labelledby="タブのID"属性をそれぞれ入れる

【Bootstrap2.3.2との変更箇所】

  • アクセシビリティの設定が追加

ピルナビゲーションの場合

見本 フェード効果つき

ホームの文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
プロフィールの文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

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

<!-- ピル部分 -->
<ul id="myPill" class="nav nav-pills">
	<li class="active">
		<a href="#home" data-toggle="pill">ホーム</a>
	</li>
	<li>
		<a href="#profile" data-toggle="pill">プロフィール</a>
	</li>
	<li class="dropdown">
		<a href="#" class="dropdown-toggle" data-toggle="dropdown">ドロップダウン <b class="caret"></b></a>
		<ul class="dropdown-menu">
			<li>
				<a href="#dropdown1" data-toggle="pill">メニュー1</a>
			</li>
			...
		</ul>
	</li>
</ul>

<!-- パネル部分 -->
<div id="myPillContent" class="pill-content" style="margin-top:15px">
	<div class="pill-pane fade in active" id="home">ホームの文章です。...</div>
	<div class="pill-pane fade" id="profile">プロフィールの文章です。...</div>
	<div class="pill-pane fade" id="dropdown1">メニュー1の文章です。...</div>
	...
</div>

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

<!-- ピル部分 -->
<ul id="myPill" class="nav nav-pills" role="tablist">
	<li role="presentation" class="active">
		<a href="#home" id="home-pill" role="tab" data-toggle="pill" aria-controls="home" aria-expanded="true">ホーム</a>
	</li>
	<li role="presentation">
		<a href="#profile" id="profile-pill" role="tab" data-toggle="pill" aria-controls="profile">プロフィール</a>
	</li>
	<li role="presentation" class="dropdown">
		<a href="#" id="myPillDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myPillDrop1-contents">ドロップダウン <span class="caret"></span></a>
		<ul class="dropdown-menu" aria-labelledby="myPillDrop1" id="myPillDrop1-contents">
			<li>
				<a href="#dropdown1" id="dropdown1-pill" role="tab" data-toggle="pill" aria-controls="dropdown1">メニュー1</a>
			</li>
			...
		</ul>
	</li>
</ul>

<!-- パネル部分 -->
<div id="myPillContent" class="tab-content" style="margin-top:15px">
	<div class="tab-pane fade in active" id="home" role="tabpanel" aria-labelledBy="home-pill">ホームの文章です。...</div>
	<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledBy="profile-pill">プロフィールの文章です。...</div>
	<div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledBy="dropdown1-pill">メニュー1の文章です。...</div>
	...
</div>

【設定】

  • [ul.nav.nav-pills > li[role="presentation"] > a[data-toggle="pill"]]《ピル部分》 + [.tab-content > .tab-pane]《パネル部分》
  • (ピルと同様に)最初に表示するパネルには、あらかじめ .tab-pane.active を追加しておく

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

  • ul.nav.nav-pillsに、role="tablist"属性(支援技術にタブリストの役割を伝える)を入れる
  • ピルリンク(またはドロップダウンメニューのアンカーリンク)の<a>に、
    • role="tab"属性(支援技術にタブ部分の役割を伝える)
    • aria-controls="パネルのID"属性(タブパネルのタブ部分とパネル部分の関連付け)
    • 最初に表示するピルにaria-expanded="true"属性(支援技術に要素の開閉の状態を伝える)
    を入れる
  • div.tab-paneに、
    • role="tabpanel"属性(支援技術にパネル部分の役割を伝える)
    • aria-labelledby="ピルのID"属性(タブパネルのタブ部分とパネル部分を関連付ける)
    を入れる

【注意】

  • ドロップダウンのアンカーリンク(a.dropdown-toggle)には data-toggle="pill" でなく data-toggle="dropdown" を入れ、ドロップダウンメニューのアンカーリンク(<a>)には data-toggle="pill" を入れる
  • ナビゲーションと文章との間が狭いので、.nav-pillsmargin-bottomのスタイルか.tab-contentmargin-topのスタイルを指定

【変更履歴】

  • 【3.2.0】ul.nav.nav-pillsrole="tablist"と、ピルリンク(またはドロップダウンメニューのアンカーリンク)の<a>role="tab"を入れる
  • 【3.3.0】ピルリンク(またはドロップダウンメニューのアンカーリンク)の<a>aria-controls="パネルのID"と最初に表示するパネルにaria-expanded="true"属性、div.tab-panerole="tabpanel"と>aria-labelledby="ピルのID"属性をそれぞれ入れる

【Bootstrap2.3.2との変更箇所】

  • パネル部分:.pill-content > .pill-pane.tab-content > .tab-pane
  • アクセシビリティの設定が追加

使用方法(Usage)

JavaScriptを使用してタブ可能なタブを有効にする(各タブは個別に有効にする必要がある):

$('#myTab a').click(function (e) {
	e.preventDefault()
	$(this).tab('show')
})

様々な方法で個々のタブをアクティブにすることが可能:

$('#myTab a[href="#profile"]').tab('show') // タブ名で選択
$('#myTab a:first').tab('show') // 最初のタブを選択
$('#myTab a:last').tab('show') // 最後のタブを選択
$('#myTab li:eq(2) a').tab('show') // (0から数えて)3番目のタブを選択

【注意】

  • 上記の設定でタブは設定どおりに選択されるが、選択されたタブに該当するパネルが表示されない

マークアップ(Markup)

要素にdata-toggle="tab"またはdata-toggle="pill"と指定するだけで、JavaScriptを記述することなくタブまたはピルのナビゲーションを有効にすることが可能。navnav-tabsのクラスをタブulに追加すると、Bootstrapのタブのスタイルが適用され、navnav-pillsクラスを追加するとピルのスタイルが適用される。

<!-- タブナビゲーション -->
<ul class="nav nav-tabs" role="tablist">
	<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">ホーム</a></li>
	<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">プロフィール</a></li>
	<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">メッセージ</a></li>
	<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">セッティング</a></li>
</ul>

<!-- パネル枠 -->
<div class="tab-content">
	<div role="tabpanel" class="tab-pane active" id="home">...</div>
	<div role="tabpanel" class="tab-pane" id="profile">...</div>
	<div role="tabpanel" class="tab-pane" id="messages">...</div>
	<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>

フェード効果(Fade effect)

タブをフェードインさせるには、各.tab-pane.fadeを追加。最初のタブパネル区画には、初期のコンテンツを表示させるために.inが必要。

<div class="tab-content">
	<div class="tab-pane fade in active" id="home">...</div>
	<div class="tab-pane fade" id="profile">...</div>
	<div class="tab-pane fade" id="messages">...</div>
	<div class="tab-pane fade" id="settings">...</div>
</div>

メソッド(Methods)

$().tab

タブ要素とコンテンツコンテナをアクティブにする。タブには、DOM内のコンテナ接点をターゲットとするdata-targetまたはhrefが必要。 上のマークアップの例では、タブはdata-toggle="tab"属性を持つ<a>となる。

.tab('show') 表記の分離(3.3.5)

指定されたタブを選択し、関連するコンテンツを表示。以前に選択された他のタブは選択解除され、関連するコンテンツは非表示になる。タブパネル区画が実際に表示される前(つまり、shown.bs.tab イベント発動前)に呼び出し元に戻る

$('#someTab').tab('show')

イベント(Events)一部追加(3.3.0)

新しいタブを表示すると、イベントは次の順序で発動:

  1. hide.bs.tab(現在のアクティブなタブに)
  2. show.bs.tab(次に表示されるタブに)
  3. hidden.bs.tab(以前のアクティブなタブではhide.bs.tabイベントと同じもの)
  4. shown.bs.tab(新しくアクティブになって表示されるタブではshow.bs.tabイベントと同じもの)

既にアクティブなタブがない場合、hide.bs.tabhidden.bs.tabイベントは発動しない。

イベントタイプ 説明
show.bs.tab このイベントは、タブが表示された後、タブの表示で発動。アクティブなタブとアクティブなタブ(使用可能な場合)をそれぞれターゲットにするにはevent.targetevent.relatedTargetを使用
shown.bs.tab このイベントは、タブが表示された後、タブの表示で発動。アクティブなタブと以前のアクティブなタブ(使用可能な場合)をそれぞれターゲットにするにはevent.targetevent.relatedTargetを使用
hide.bs.tab
新設(3.3.0)
このイベントは、新しいタブが表示されるときに発動(従って、以前のアクティブなタブは非表示になる)。event.targetevent.relatedTargetを使用して、現在のアクティブなタブと新しいアクティブになる新しいタブをそれぞれターゲットにする
hidden.bs.tab
新設(3.3.0)
このイベントは、新しいタブが表示された後に発動(従って、以前のアクティブなタブは非表示になる)。event.targetevent.relatedTargetを使用して、以前のアクティブなタブと新しいアクティブなタブをそれぞれターゲットにする
使用例
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
	e.target // アクティブなタブ
	e.relatedTarget // その前のタブ
})

Jason Frameが書いた優れたjQuery.tipsyプラグインに触発されている。ツールチップは、イメージに依存しない、アニメーションにCSS3を使用する更新されたバージョン、およびローカルタイトルストレージ用のデータ属性。

タイトルの長さがゼロのツールチップは決して表示されない。

基本設定(Examples)

ツールチップを表示するには、以下のリンクにカーソルを合わせる:

見本

リンクの上にカーソルを合わせるかタッチして下さい。

設定例

HTML

<p><a href="#" data-toggle="tooltip" title="これがツールチップです">リンク</a>の上にカーソルを合わせるかタッチして下さい。</p>

実行コード(<script src="js/bootstrap.min.js"></script>より後に設置)

JSファイルの場合
$("[data-toggle=tooltip]").tooltip()
HTMLコードの場合
<script>
	$("[data-toggle=tooltip]").tooltip()
</script>

【設定】

  • a[data-toggle="tooltip"][title="ツールチップ文"]

【注意】

  • ツールチップをdisabledまたは.disabledの要素に追加するためには、<div>タグの中に要素を置いて、その代わりにツールチップをその<div>タグに適用させる

静的ツールチップ(Static tooltip)

上、右、下、左揃えの4つのオプションがある。

見本 ツールチップを開いた状態で表示

ツールチップの方向設定(Four directions)

見本

設定例

HTML

<!-- 左に出るツールチップの設定 -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左に出るツールチップ">ツールチップ(左)</button>

<!-- 上に出るツールチップの設定 -->
<button type="button" class="btn class="btn btn-default" data-toggle="tooltip" data-placement="top" title="上に出るツールチップ">ツールチップ(上)</button>

<!-- 下に出るツールチップの設定 -->
<button type="button" class="btn class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="下に出るツールチップ">ツールチップ(下)</button>

<!-- 右に出るツールチップの設定 -->
<button type="button" class="btn class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右に出るツールチップ">ツールチップ(右)</button>

【設定】

  • data-toggle="tooltip"と同じ要素にdata-placement="xxx"xxxleft(左)、top(上)、bottom(下)、right(右)の中から選択)を入れる

使用方法(Usage)

ツールチッププラグインは、要求に応じてコンテンツとマークアップを生成し、デフォルトではツールチップをその切替要素の後に置く。

JavaScript経由でツールチップを起動:

$('#example').tooltip(options)

マークアップ(Markup)

ツールチップに必要なマークアップは、ツールチップを表示したいHTML要素にdata属性とtitleをつけるだけ。生成されたマークアップのツールチップはかなりシンプルだが、位置は必要(デフォルトでは、プラグインによってtopに設定されている)。

<!--HTMLコード -->
<a href="#" data-toggle="tooltip" title="いくつかのツールチップテキスト!">この上にマウスポインターを移動</a>

<!-- プラグインによる一般的なマークアップ -->
<div class="tooltip top" role="tooltip">
	<div class="tooltip-arrow"></div>
	<div class="tooltip-inner">
		いくつかのツールチップテキスト!
	</div>
</div>

オプション(Options)

オプションは、データ属性またはJavaScriptを使用して渡すことが可能。データ属性の場合、data-animation=""のように、data-にオプション名を追加すること。

名前 タイプ デフォルト 説明
animation boolean true ツールチップにCSSのフェード遷移を適用
true:有効/false:無効
container string | false false ツールチップを特定の要素に追加。例:container: 'body'
このオプションは、ウィンドウのサイズ変更中にツールチップが起動要素から浮かないようにし、起動要素の近くのドキュメントのフローにツールチップを配置できる点で特に便利。
delay number | object 0 ツールチップの表示および非表示を遅延する時間(1000分の1秒単位) - triggerでmanualを指定した場合は適用されない。

数字が指定された場合、遅延はhide/showの両方に適用。

オブジェクト構造は次のとおり:delay: { show: 500, hide: 100 }
html boolean false ツールチップに表示されているHTMLを挿入。falseの場合、jQueryのtextメソッドがDOMにコンテンツを挿入するために使用される。XSS攻撃が心配な場合はtextを使用すること。
true:有効/false:無効
placement string | function 'top' ツールチップを配置する方法 - top | bottom | left | right | auto
"auto"を指定すると、動的にツールチップの方向を変更。例えば配置が"auto left"の場合、ツールチップは可能な限り左に表示され、それ以外の場合は右に表示される。

function配置を決定するために使用されるとき、ツールチップDOMノードを第1引数として、起動要素DOMノードを第2引数として呼び出す。this コンテキストは、ツールチップヒントインスタンスに設定される。
selector string false selectorが提供されている場合、ツールチップオブジェクトが指定されたターゲットに付与される。実際には動的HTMLコンテンツにツールチップを追加可能にするために使用。ココ有益な実例を参照。
template
新設(3.2.0)
string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' ツールチップを作成するときに使用するベースHTML。

ツールチップのtitle.tooltip-innerに挿入。

.tooltip-arrowは、ツールチップの矢印になる。

一番外側を囲む要素が.tooltipクラスを持つ必要がある。
title string | function '' title属性が存在しない場合のデフォルトのタイトル値。

functionが与えられている場合、this参照セットをツールチップが接続されている要素にセットして呼び出される。
trigger string 'hover focus' ツールチップを起動する方法 - click | hover | focus | manual
複数の起動方法を指定;スペースで区切る。"manual"は他と組み合わせ不可。
viewport
新設(3.2.0)
string | object { selector: 'body', padding: 0 } この要素の境界内でツールチップを保持。例:viewport: '#viewport'または{ selector: '#viewport', padding: 0 }

functionが指定されている場合、起動要素のDOMノードを唯一の引数として呼び出される。thisコンテキストはツールヒントインスタンスに設定される。

メソッド(Methods)

$().tooltip(options)

要素コレクションにツールチップのハンドラーを付ける。

.tooltip('show')

要素のツールチップを表示。実際にツールチップが表示される前(つまりshown.bs.tooltipイベント発動前)に呼び出し元に戻る。これは、ツールチップの"manual"トリガーとみなされる。タイトルが長さゼロのツールチップは表示されない。

$('#element').tooltip('show')

.tooltip('hide')

要素のツールチップを非表示にする。ツールチップが実際に非表示になる前(つまりhidden.bs.tooltipイベント発動前)に呼び出し元に戻る。これは、ツールチップの"manual"トリガーとみなされる。

$('#element').tooltip('hide')

.tooltip('toggle')

要素のツールチップを切り替える。ツールチップが実際に表示または非表示になる前(つまり shown.bs.tooltip または hidden.bs.tooltip イベント発動前)に呼び出し元に戻る。これは、ツールチップの"manual"トリガーとみなされる。

$('#element').tooltip('toggle')

.tooltip('destroy')

要素のツールチップを非表示にしたり破棄したりする。(selector オプションを使用して作成される)デリゲートを使用するツールチップは、子孫トリガー要素で個別に破棄できない。

$('#element').tooltip('destroy')

イベント(Events)新設⇒一部追加(3.3.5)

イベントタイプ 説明
show.bs.tooltip このイベントは、showのインスタンス・メソッドが呼び出されると直ちに発動。
shown.bs.tooltip このイベントは、ユーザーにツールチップが表示されたときに発動(完全にCSS遷移が完了するまで待機)。
hide.bs.tooltip このイベントは、hideのインスタンス・メソッドが呼び出されると直ちに発動。
hidden.bs.tooltip このイベントは、ツールチップがユーザーから非表示になったときに発動(完全にCSS遷移が完了するまで待機)。
inserted.bs.tooltip
新設(3.3.5)
このイベントは、ツールチップテンプレートがDOMに追加されたときにshow.bs.tooltipイベントの後に発動。
使用例
$('#myTooltip').on('hidden.bs.tooltip', function () {
	// 何かをする...
})

iPadのようなコンテンツの小さなオーバーレイを、二次情報を格納する要素に追加。

タイトルと内容の両方が長さゼロのポップオーバーは決して表示されない。

基本設定(Examples)

静的ポップオーバー(Static popover)

上、右、下、左揃えの4つのオプションがある。

見本 ポップオーバーを開いた状態で表示

上に出るポップオーバー

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

右に出るポップオーバー

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

下に出るポップオーバー

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

左に出るポップオーバー

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

ポップオーバーの設定(Live demo)

見本

設定例

HTML

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="ポップオーバーのタイトル" data-content="ポップオーバーの説明。もう一度ボタンを押すと閉じます。">ココを押して下さい</button>

実行コード(<script src="js/bootstrap.min.js"></script>より後に設置)

JSファイルの場合
$("[data-toggle=popover]").popover()
HTMLコードの場合
<script>
	$("[data-toggle=popover]").popover()
</script>

【設定】

  • a[data-toggle="popover"][title="ポップオーバーのタイトル"][data-content="ポップオーバーの説明"]

【注意】

  • ポップオーバーは、同じBootstrapのバージョンに含まれているツールチッププラグイン(tooltip.js)を必要とする
  • パフォーマンス上の理由からツールチップとポップオーバーのdata-apiはオプトインされており、自分で初期化する必要がある(そのため実行コードが必要)
  • .btn-groupまたは.input-group内の要素でポップオーバーを使用するときは、不必要な副作用(例えば:要素がより広がる/ポップオーバーの起動時に角丸がなくなる)を回避するため、オプションでcontainer: 'body'を指定する必要がある
  • 隠されている要素(display: none;を指定)でポップオーバーを表示しようとするのは不可
  • ポップオーバーをdisabledまたは.disabledの要素に追加するためには、<div>タグの中に要素を置いて、その代わりにポップオーバーをその<div>タグに適用させる

ポップオーバーの方向設定(Four directions)設定変更

見本

※もう一度ボタンを押すと閉じます。

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

<!-- 左に出るポップオーバーの設定 -->
<button type="button" class="btn" data-toggle="popover" data-placement="left" data-content="左に出るポップオーバー">ポップオーバー(左)</button>

<!-- 上に出るポップオーバーの設定 -->
<button type="button" class="btn" data-toggle="popover" data-placement="top" data-content="上に出るポップオーバー">ポップオーバー(上)</button>

<!-- 下に出るポップオーバーの設定 -->
<button type="button" class="btn" data-toggle="popover" data-placement="bottom" data-content="下に出るポップオーバー">ポップオーバー(下)</button>

<!-- 右に出るポップオーバーの設定 -->
<button type="button" class="btn" data-toggle="popover" data-placement="right" data-content="右に出るポップオーバー">ポップオーバー(右)</button>

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

<!-- 左に出るポップオーバーの設定 -->
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="左に出るポップオーバー">ポップオーバー(左)</button>

<!-- 上に出るポップオーバーの設定 -->
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="上に出るポップオーバー">ポップオーバー(上)</button>

<!-- 下に出るポップオーバーの設定 -->
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="下に出るポップオーバー">ポップオーバー(下)</button>

<!-- 右に出るポップオーバーの設定 -->
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="右に出るポップオーバー">ポップオーバー(右)</button>

【設定】

  • data-toggle="popover"と同じ要素にdata-placement="xxx"xxxleft(左)、top(上)、bottom(下)、right(右)の中から選択)を入れる

【Bootstrap2.3.2との変更箇所】

  • data-container="body"を追加

次のクリックで閉じる(Dismiss on next click)新設(3.2.0)

triggerにfocusを使用して、ユーザーが次にクリックするときにポップオーバーを閉じる。

見本

設定例

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="却下するポップアップ" data-content="ボタンを押しても閉じません。それ以外のところを押して閉じて下さい。">ココを押して下さい</a>

使用方法(Usage)

JavaScriptによるポップオーバーを有効にする:

$('#example').popover(options)

オプション(Options)

オプションは、データ属性またはJavaScriptを使用して渡すことが可能。データ属性の場合、data-animation=""のように、data-にオプション名を追加する。

名前 タイプ デフォルト 説明
animation boolean true ポップオーバーのCSSのフェード遷移を適用
true:有効/false:無効
container string | false false 特定の要素にポップオーバーを追加。例:container: 'body'
このオプションは、ウィンドウのサイズ変更中にポップオーバーがトリガー要素から浮かないようにし、トリガー要素の近くのドキュメントのフローにポップオーバーを配置できる点で特に便利。
content string | function '' data-content属性が存在しない場合のデフォルトのコンテンツ。

functionが指定された場合、this 参照セットをポップオーバーと接続されている要素にセットして呼び出される。
delay number | object 0 ポップオーバーの表示と非表示の遅延時間(1000分の1秒単位) - triggerでmanualを指定した場合は適用されない。

数字が指定された場合、hide/showの両方に遅延が適用。

オブジェクト構造は次のとおり:delay: { "show": 500, "hide": 100 }
html boolean false ポップオーバーにHTMLを挿入。falseの場合、jQueryの text メソッドがコンテンツをDOMに挿入するために使用される。
XSS攻撃が心配な場合はtextを使用すること。
true:有効/false:無効
placement string | function 'right' ポップオーバーを配置する方法 - top | bottom | left | right | auto
"auto"を指定した場合には、動的にポップオーバーの方向を変更。例えば配置が"auto left"なら、ポップオーバーは可能な限り左に表示され、それ以外の場合は右に表示。

functionを使用して配置決定する場合は、ポップオーバーDOMノードが第1引数として、トリガー要素DOMノードが第2引数として呼び出される。this コンテキストは、ポップオーバーインスタンスに設定される。
selector string false selectorが提供されている場合、ポップオーバーオブジェクトが指定されたターゲットに付与される。実際には動的HTMLコンテンツにポップオーバーを追加可能にするために使用。ココ有益な実例を参照
template
新設(3.2.0)
string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' ポップオーバーを作成するときに使用するベースのHTML。

ポップオーバーの title.popover-title に挿入される。

ポップオーバーの content.popover-content に挿入される。

.arrow は、ポップオーバーの矢印になる。

一番外側の包括要素には、.popover クラスを入れる必要がある。

配置方向を設定する場合は、.popover.top, .bottom, .left, .rightのいずれかを追加する。
title string | function '' title 属性が存在しない場合のデフォルトのタイトル値

functionを設定した場合、this 参照セットをポップオーバーが接続されている要素にセットして呼び出される。
trigger string 'click' ポップオーバーの起動方法 - click | hover | focus | manual
複数の起動方法を指定;スペースで区切る。"manual"は他と組み合わせ不可。
viewport
新設(3.2.0)
string | object { selector: 'body', padding: 0 } ツールチップをこの要素の境界内に保持。例:viewport: '#viewport'または{ selector: '#viewport', padding: 0 }

functionが指定されている場合、起動要素のDOMノードを唯一の引数として呼び出される。thisコンテキストはツールヒントインスタンスに設定される。

メソッド(Methods)

$().popover(options)

要素コレクションのポップオーバーを初期化。

.popover('show')

要素のポップオーバーを表示。実際にポップオーバーが表示される前(つまり、show.bs.popover イベント発動前)に呼び出し元に戻る。これは、ポップオーバーの"manual"トリガーとみなされる。タイトルとコンテンツの両方が長さゼロのポップオーバーは決して表示されない。

$('#element').popover('show')

.popover('hide')

要素のポップオーバーを非表示にする。ポップオーバーが実際に非表示になる前(つまり、hidden.bs.popover イベント発動前)に呼び出し元に戻る。これは、ポップオーバーの"manual"トリガーとみなされる。

$('#element').popover('hide')

.popover('toggle')

要素のポップオーバーを切り替える。ポップオーバーが実際に表示または非表示になる前(つまり、shown.bs.popover または hidden.bs.popover イベント発動前)に呼び出し元に戻る。これは、ポップオーバーの"manual"トリガーとみなされる。

$('#element').popover('toggle')

.popover('destroy')

要素のポップオーバーを非表示にしたり破棄したりする。(selector オプションを使用して作成される)デリゲートを使用するポップオーバーは、子孫トリガー要素で個別に破棄できない。

$('#element').popover('destroy')

イベント(Events)新設⇒一部追加(3.3.5)

イベントタイプ 説明
show.bs.popover このイベントは、showのインスタンスメソッドが呼び出されたときに直ちに起動。
shown.bs.popover このイベントは、ポップオーバーが(CSS遷移の完了を待って)ユーザーに表示されたときに起動。
hide.bs.popover このイベントは、hideのインスタンスメソッドが呼び出されたときに直ちに起動。
hidden.bs.popover このイベントは、ポップオーバーが(CSS遷移の完了を待って)ユーザーに非表示になったときに起動。
inserted.bs.popover
新設(3.3.5)
このイベントは、ポップオーバーテンプレートがDOMに追加されたときにshow.bs.popoverイベントの後に発動。
使用例
$('#myPopover').on('hidden.bs.popover', function () {
	// 何かをする...
})

基本設定(Example alerts)

このプラグインを使用して、すべてのアラートメッセージに閉じる機能を追加。

.closeボタンを使用する場合、それは.alert-dismissibleの最初の子要素でなければならず、マークアップの前にテキストコンテンツが来ないことがある。

見本

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

●ボタン付き

設定例 (3.3.2閉じるボタンの設定変更)

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

<!-- ボタン付き -->
<div class="alert alert-danger alert-dismissible fade in" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="閉じる"><span aria-hidden="true">&times;</span></button>
	<h4>エラーが発動しました!</h4>
	<p>次のように変更してもう一度試して下さい。</p>
	<p>
		<button type="button" class="btn btn-danger">操作を実行</button>
		<button type="button" class="btn btn-default">キャンセル</button>
	</p>
</div>

【設定】

  • .alert.alert-dismissible[role="alert"] > {[button.close > span[aria-hidden="true"] > &times;]《閉じるボタン》 + 《アラート文》}
  • プラグインを使ってアラートを閉じるためbutton.closedata-dismiss="alert"を入れる
  • 閉じるボタンをフェードインで閉じるためには.alert.alert-dismissible.fade.inを追加

使用方法(Usage)

閉じるボタンにdata-dismiss="alert"を追加するだけで自動的にアラート終了機能が提供される。アラートを閉じると、アラートがDOMから削除される。

<button type="button" class="close" data-dismiss="alert" aria-label="閉じる">
	<span aria-hidden="true">&times;</span>
</button>

終了時にアラートでアニメーションを使用するには、.fadeおよび.inクラスが既に適用されていることを確認するように。

メソッド(Methods)

$().alert()

data-dismiss="alert"属性を持つ子孫要素のclickイベントをアラートで待ち受ける。(data-apiの自動初期化を使用する場合は不要)

.alert('close')

DOMからそれを削除してアラートを閉じる。.fade.inクラスが要素上に存在する場合は、アラートは削除される前にフェードアウトする。

イベント(Events)

Bootstrapアラートプラグインは、アラート機能に接続するためのいくつかのイベントを公開する。

イベントタイプ 説明
close.bs.alert このイベントは、closeのインスタンス・メソッドが呼び出されると直ちに発動。
closed.bs.alert このイベントは、アラートが閉じられると発動(完全にCSS遷移が完了するまで待機)。
使用例
$('#my-alert').on('closed.bs.alert', function () {
	// 何かをする...
})

ボタンをもっと活用しよう。コントロールボタンで、ツールバーのような多くのコンポーネントのボタンの状態を示したり、ボタンのグループが作成可能。

ステートフルボタン(Stateful)廃止(3.3.5)

data-loading-text ="ロード中..."を追加すると、ボタンにロード状態が使用可能。

この機能はv3.3.5以降で廃止され、v4では削除される。

見本

※自動的に元に戻ります。

設定例

HTML

<button type="button" id="myButton" data-loading-text="ロード中..." class="btn btn-primary" autocomplete="off">ココを押す</button>

実行コード(<script src="js/bootstrap.min.js"></script>より後に設置)

JSファイルの場合

$('#myButton').on('click', function () {
	var $btn = $(this).button('loading')
	// ビジネスロジック...
	$btn.button('reset')
})

HTMLコードの場合

<script>
	$('#myButton').on('click', function () {
		var $btn = $(this).button('loading')
		// ビジネスロジック...
		$btn.button('reset')
	})
</script>

【設定】

  • .btndata-loading-text="ロード中..."を入れる

切替ボタン(Single toggle)設定変更(3.3.0)

単独の切替ボタンを有効にするには、data-toggle="button"を追加する。

見本

設定例

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">ココを押す</button>

<button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true" autocomplete="off">プッシュ状態</button>

【設定】

  • button.btndata-toggle="button"を入れる
  • ボタンをあらかじめプッシュ状態にする場合は、button.btn.activeを追加する必要がある

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

  • button.btnに、aria-pressed="false"属性(支援技術にボタンが押されていない状態であることを伝える)を入れる
  • あらかじめプッシュ状態にする場合は、aria-pressed="true"属性(支援技術にボタンが押された状態であることを伝える)も入れる

【変更履歴】

  • 【3.3.0】aria-pressed属性の設定が追加

チェックボックス/ラジオボタン(Checkbox/Radio)設定変更⇒追加変更(3.2.0)

チェックボックスやラジオボタンのinputを含む.btn-groupdata-toggle="buttons"を追加すると、それぞれのスタイルで切替可能になる。

チェックボックスの場合

見本

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

<div class="btn-group" data-toggle="buttons-checkbox">
	<button type="button" class="btn btn-primary active">オプション1(チェック済)</button>
	<button type="button" class="btn btn-primary">オプション2</button>
	<button type="button" class="btn btn-primary">オプション3</button>
</div>

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

<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-primary active">
		<input type="checkbox" autocomplete="off" checked> オプション1(チェック済)
	</label>
	<label class="btn btn-primary">
		<input type="checkbox" autocomplete="off"> オプション2
	</label>
	<label class="btn btn-primary">
		<input type="checkbox" autocomplete="off"> オプション3
	</label>
</div>

【設定】

  • div.btn-group[data-toggle="buttons"] > label.btn > input[type="checkbox"]
  • label.active > input[type="checkbox"][checked]でチェック済み状態になる
  • Firefoxはページのロード全体でフォームコントロール状態を持続するので、これを回避するためautocomplete="off"を追加

【変更履歴】

  • 【3.2.0】チェック済み状態の際、input[type="checkbox"]checked属性を入れることに

【Bootstrap2.3.2との変更箇所】

  • data-toggle="buttons-checkbox"data-toggle="buttons"
  • ボタン部分:button.btnlabel.btn > input[type="checkbox"]
  • チェック済み:button.activelabel.active > input[type="checkbox"][checked]

ラジオボタンの場合

見本

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

<div class="btn-group" data-toggle="buttons-radio">
	<button type="button" class="btn btn-primary active">オプション1(選択済)</button>
	<button type="button" class="btn btn-primary">オプション2</button>
	<button type="button" class="btn btn-primary">オプション3</button>
</div>

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

<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-primary active">
		<input type="radio" name="options" id="option1" autocomplete="off" checked> オプション1(選択済)
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="options" id="option2" autocomplete="off"> オプション2
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="options" id="option3" autocomplete="off"> オプション3
	</label>
</div>

【設定】

  • div.btn-group[data-toggle="buttons"] > label.btn > input[type="radio"]
  • label.active > input[type="radio"][checked]で選択済み状態になる
  • Firefoxはページのロード全体でフォームコントロール状態を持続するので、これを回避するためautocomplete="off"を追加

【変更履歴】

  • 【3.2.0】選択済み状態の際、input[type="radio"]checked属性を入れる

【Bootstrap2.3.2との変更箇所】

  • data-toggle="buttons-radio"data-toggle="buttons"
  • ボタン部分:button.btnlabel.btn > input[type="radio"]
  • 選択済み:button.activelabel.active > input[type="radio"][checked]

メソッド(Methods)

$().button('toggle')

プッシュ状態を切り替える。ボタンに、アクティブ化された外観を与える。

$().button('reset')

ボタンの状態をリセットする - 元のテキストにテキストを交換する。このメソッドは非同期であり、リセットが実際に完了する前に戻る。

$().button(string)

テキストを任意のデータ定義テキスト状態に交換する。data-{xx}-textの形式で設定。

<button type="button" class="btn btn-primary" data-complete-text="完了!" >...</button>
<script>
	$('.btn').button('complete') // ボタンのテキストは"完了!"と表示される
</script>

【変更履歴】

  • 【3.3.5】$().button('loading') は廃止($().button(string)の一環で動作する模様)

簡単な切替動作で少数のクラスを使用する柔軟なプラグイン。

基本設定(Example)

クラスの変更経由で別の要素を表示したり非表示にするには、以下のボタンをクリック:

  • .collapseはコンテンツを隠す
  • 遷移中に.collapsing が適用される
  • .collapse.inはコンテンツを表示

href 属性を持つリンク、または data-target 属性を持つボタンが使用可能。どちらの場合も、data-toggle="collapse" が必要。

見本

コンテンツが表示されます。

設定例

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
	href 属性を持つリンク
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
	data-target 属性を持つボタン
</button>
<div class="collapse" id="collapseExample" style="margin-top:10px">
	<div class="well">
		コンテンツが表示されます。
	</div>
</div>

【設定】

  • アンカーリンクによるボタン:a.btn[data-toggle="collapse"][href="#ID名"]
  • ボタンタグによるボタン:button.btn[data-toggle="collapse"][data-target="#ID名"]
  • 折り畳まれたコンテンツ:div.collapse[id="ID名"]( > div.well

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

  • .btn(ボタン要素)に、
    • aria-expanded="false"属性(支援技術に要素の開閉の状態を伝える)
    • aria-controls="コンテンツのID"属性(ボタンとコンテンツの関連付け)
    を入れる
  • さらにa.btnには、role="button"属性(支援技術にボタンの役割を伝える)も入れる

【注意】

  • ボタンとコンテンツとの間が狭いので、.btnmargin-bottomのスタイルか.collapsemargin-topのスタイルを指定する

アコーディオンの設定例(Accordion example)設定変更⇒追加変更(3.3.0)

デフォルトの折り畳み動作を拡張して、パネルコンポーネントでアコーディオンを作成。

デザインがv2のナビゲーション風からパネルでの作成に変更。(3RC2)

見本

アイテム1のコンテンツ
アイテム2のコンテンツ
アイテム3のコンテンツ

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

<div class="accordion" id="accordion">
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
				アイテム1
			</a>
		</div>
		<div id="collapseOne" class="accordion-body collapse in">
			<div class="accordion-inner">
				アイテム1のコンテンツ
			</div>
		</div>
	</div>
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
				アイテム2
			</a>
		</div>
		<div id="collapseTwo" class="accordion-body collapse">
			<div class="accordion-inner">
				アイテム2のコンテンツ
			</div>
		</div>
	</div>
	...
</div>

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

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingOne">
			<h4 class="panel-title">
				<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
					アイテム1
				</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
			<div class="panel-body">
				アイテム1のコンテンツ
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingTwo">
			<h4 class="panel-title">
				<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
					アイテム2
				</a>
			</h4>
		</div>
		<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
			<div class="panel-body">
				アイテム2のコンテンツ
			</div>
		</div>
	</div>
	...
</div>

パネルヘッダのどこをクリックしても開閉可能

見本

アイテム1のコンテンツ
アイテム2のコンテンツ
アイテム3のコンテンツ

CSSの設定例

.panel > .panel-heading > .panel-title > a[data-toggle="collapse"] {
	display: block;
	padding: 10px 15px;
	margin: -10px -15px;
}
.panel > .panel-heading > .panel-title > a[data-toggle="collapse"]:active,
.panel > .panel-heading > .panel-title > a[data-toggle="collapse"]:hover,
.panel > .panel-heading > .panel-title > a[data-toggle="collapse"]:focus {
	text-decoration: none; //リンクテキストの下線を消す
}

開くパネルコンテンツ部分がリストグループ 新設(3.3.0)

div.panel-bodyul.list-groupに置き換え可能。

見本

設定例

<div class="panel panel-default">
	<div class="panel-heading" role="tab" id="collapseListGroupHeading1">
		<h4 class="panel-title">
			<a href="#collapseListGroup1" class="collapsed" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseListGroup1"> 折り畳みリストグループ </a>
		</h4>
	</div>
	<div class="panel-collapse collapse" role="tabpanel" id="collapseListGroup1" aria-labelledby="collapseListGroupHeading1" aria-expanded="false" style="height: 0px;">
		<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>
		<div class="panel-footer">フッタ</div>
	</div>
</div> 

【設定】

  • div.panel-group[id="accordion"] > {div.panel.panel-{contextual} > [div.panel-heading > .panel-title > a.collapsed[data-toggle="collapse"][data-parent="#accordion"][href="#ID名"]]《パネルヘッダ》 + [div.panel-collapse.collapse[id="ID名"] > div.panel-body]《パネルコンテンツ》}・・・
  • 最初からパネルが開いた状態にする場合は、
    • a.collapsed[data-toggle="collapse"]から.collapsedを外し
    • .panel-collapse.collapse.inを追加
  • div.panel-bodyの代わりにul.list-group > li.list-group-itemでも可
  • data-parent 属性を設定すれば、別のパネルを開くと開いていたパネルを閉じるようになる

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

  • div.panel-groupに、
    • role="tablist"属性(支援技術にタブリストの役割を伝える)
    • aria-multiselectable="true"属性(支援技術に複数選択可能な選択項目があることを伝える)
    を入れる
  • .panel-headingに、role="tab"属性(支援技術にタブの役割を伝える)を入れる
  • a[data-toggle="collapse"]に、
    • aria-expanded="false"属性(支援技術に要素の開閉の状態を伝える)
      最初からパネルが開いた状態にする場合は、aria-expanded属性は、falseではなくtrueにする
    • aria-controls="パネルコンテンツのID"属性(パネルヘッダのリンクとパネルコンテンツを関連付ける)
    を入れる
  • div.panel-collapse.collapseに、
    • role="tabpanel"属性(支援技術にパネルの役割を伝える)
    • aria-labelledby="パネルヘッダのID"属性(パネルヘッダとパネルコンテンツを関連付ける)
    を入れる

【変更履歴】

  • 【3.0.1】a.accordion-toggleから.accordion-toggleが外れる
  • 【3.3.0】

    <a>.collapsedを追加
    アクセシビリティの設定が追加
    パネルコンテンツでリストグループでの設定が可能に

【Bootstrap2.3.2との変更箇所】

  • .accordion.panel-group(3RC2)
  • .accordion-group.panel.panel-default(3RC2)
  • .accordion-headingpanel-heading(3RC2)
  • a.accordion-toggle[data-toggle="collapse"]a[data-toggle="collapse"](3.0.1) ⇒ a.collapsed[data-toggle="collapse"](3.3.0)
  • .accordion-body.panel-collapse(3RC2)
  • .accordion-inner.panel-body(3RC2)

使用方法(Usage)

折り畳みプラグインは、上げ下げによる開閉を取り扱うために、いくつかのクラスを利用する:

  • .collapse:コンテンツを非表示にする
  • .collapse.in:コンテンツを表示する
  • .collapsing:遷移が開始されると追加され、終了すると削除される

これらのクラスは、component-animations.lessに記載されている。

データ属性経由で(Via data attributes)

data-toggle="collapse"data-targetを要素に追加するだけで、折りたたみ可能な要素のコントロールが自動的に割り当てられる。data-target属性は、折り畳みを適用するCSSセレクタを受け入れる。折り畳み可能な要素には必ず.collapseを追加すること。デフォルトのままにしたい場合は、.inを追加すること。

折りたたみ可能なコントロールにアコーディオンのようなグループ管理を追加するには、データ属性data-parent="#selector"を追加する。これを実践するには、デモを参照するように。

JavaScript経由で(Via JavaScript)

手動で有効にする:

$('.collapse').collapse()

オプション(Options)

オプションは、データ属性またはJavaScriptを使用して渡すことが可能。データ属性の場合、data-parent=""のようにdata-にオプション名を追加。

名前 タイプ デフォルト 説明
parent selector false セレクタが提供されている場合、指定された親要素の下にある折りたたみ可能な要素は、この折りたたみ可能な項目が表示されているときに閉じられる。(従来のアコーディオンの動作に似ている - これはpanelクラスに依存)
toggle boolean true 呼び出し時に折り畳み可能な要素を切り替える。
true:有効/false:無効

メソッド(Methods)

.collapse(options)

折り畳み可能な要素としてコンテンツをアクティブ化する。オプションのオプション object を受け入れる。

$('#myCollapsible').collapse({
	toggle: false
})

.collapse('toggle')

折り畳み可能な要素を表示または非表示に切り替える。折り畳み要素が実際に表示されたり非表示にされる前(つまり、shown.bs.collapseまたはhidden.bs.collapseイベントが発動する前)に呼び出し元に戻る。

.collapse('show')

折り畳み可能な要素を表示する。折り畳み可能要素が実際に表示される前(つまり、show.bs.collapseイベントが発動する前)に呼び出し元に戻る。

.collapse('hide')

折り畳み可能な要素を非表示にする。折り畳み要素が実際に隠される前(つまり、hidden.bs.collapseイベントが発動する前)に呼び出し元に戻る。

イベント(Events)

Bootstrapのcollapseクラスは折り畳みの機能に接続するためにいくつかのイベントを公開する。

イベントタイプ 説明
show.bs.collapse このイベントは、show のインスタンス・メソッドが呼び出されると直ちに発動。
shown.bs.collapse このイベントは、ユーザーに折り畳み要素が表示されたときに発動(完全にCSS遷移が完了するまで待機)。
hide.bs.collapse このイベントは、hide のメソッドが呼び出されると直ちに発動。
hidden.bs.collapse このイベントは、折り畳み要素がユーザーから非表示になったときに発動(完全にCSS遷移が完了するまで待機)。
使用例
$('#myCollapsible').on('hidden.bs.collapse', function () {
	// 何かをする...
})

カルーセルのような要素を循環するためのスライドショーコンポーネント。入れ子になったカルーセルはサポートされていない。

見本

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

<div id="carousel-examples" class="carousel slide" data-ride="carousel">
	<!-- インジケータの設定 -->
	<ol class="carousel-indicators">
		<li data-target="#carousel-examples" data-slide-to="0" class="active"></li>
		<li data-target="#carousel-examples" data-slide-to="1"></li>
		<li data-target="#carousel-examples" data-slide-to="2"></li>
	</ol>
	<!-- スライドさせる画像の設定 -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="..." alt="...">
		</div>
		<div class="item">
			<img src="..." alt="...">
		</div>
		...
	</div>
	<!-- スライドコントロールの設定 -->
	<a class="left carousel-control" href="#carousel-examples" data-slide="prev">&lsaquo;</a>
	<a class="right carousel-control" href="#carousel-examples" data-slide="next">&rsaquo;</a>
</div>

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

<div id="carousel-examples" class="carousel slide" data-ride="carousel">
	<!-- インジケータの設定 -->
	<ol class="carousel-indicators">
		<li data-target="#carousel-examples" data-slide-to="0" class="active"></li>
		<li data-target="#carousel-examples" data-slide-to="1"></li>
		<li data-target="#carousel-examples" data-slide-to="2"></li>
	</ol>
	<!-- スライドさせる画像の設定 -->
	<div class="carousel-inner" role="listbox">
		<div class="item active">
			<img src="..." alt="...">
		</div>
		<div class="item">
			<img src="..." alt="...">
		</div>
		...
	</div>
	<!-- スライドコントロールの設定 -->
	<a class="left carousel-control" href="#carousel-examples" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">前へ</span>
	</a>
	<a class="right carousel-control" href="#carousel-examples" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">次へ</span>
		 </a>
</div>

【設定】

  • div.carousel.slide[id="ID名"] > {ol.carousel-indicators" > [li.active[data-target="#ID名"][data-slide-to="0"] + li[data-target="#ID名"][data-slide-to="1"]・・・]}《インジケータ》 + {div.carousel-inner > [div.item.active > <img>] + [div.item > <img>]・・・}《スライド画像》 + {[a.left.carousel-control[href="#ID名"][data-slide="prev"] > span.glyphicon.glyphicon-chevron-left]《前へ》 + [a.right.carousel-control[href="#ID名"][data-slide="next"] > span.glyphicon.glyphicon-chevron-right]《次へ》}《スライドコントロール》
  • lidiv.item.activeを入れるとその部分が最初に表示される
  • data-slide-to="*"0から順につける
  • .carouseldata-ride="carousel"を入れると読み込み時から循環が開始
  • スライドコントロール用のアイコンは、
    • span.glyphicon.glyphicon-chevron-leftspan.icon-prev
    • span.glyphicon.glyphicon-chevron-rightspan.icon-next
    しても可

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

  • .carousel-innerに、role="listbox"属性(支援技術にリストボックスの役割を伝える)を入れる
  • a.carousel-control(2ヶ所)に、
    • role="button"属性(支援技術にボタンの役割を伝える)
    • "前へ"と"次へ"を意味する span.sr-only(スクリーンリーダー等での読み上げをスキップさせる)
    を入れる

【変更履歴】

  • 【3.3.0】アクセシビリティの設定が追加
  • 【3.3.6】スライドコントロール用のアイコンはグリフアイコンでなく、span.icon-prev, span.icon-nextでも設定可能に

【Bootstrap2.3.2との変更箇所】

  • スライドコントロールアイコン(前へ):&lsaquo;(‹) ⇒ span.glyphicon.glyphicon-chevron-left() またはspan.icon-prev
  • スライドコントロールアイコン(次へ):&rsaquo;(›) ⇒ span.glyphicon.glyphicon-chevron-right() またはspan.icon-next

遷移アニメーションはInternet Explorer 8&9ではサポートされていない

Bootstrapは、アニメーションにCSS3のみを使用するが、Internet Explorer 8および9は必要なCSSプロパティをサポートしていない。従って、これらのブラウザを使用している場合は、スライドの遷移アニメーションはない。Bootstrapでは意図的に遷移のjQueryベースのフォールバックを組み入れないことに決めている。

見本

設定例

<!-- スライドさせる画像の設定 -->
<div class="carousel-inner" role="listbox">
	<div class="item active">
		<img src="..." alt="第1スライド">
		<div class="carousel-caption">
			<h3>第1スライド見出し</h3>
			<p>スライドイメージの紹介</p>
		</div>
	</div>
	<div class="item">
		<img src="..." alt="第2スライド">
		<div class="carousel-caption">
			<h3>第2スライド見出し</h3>
			<p>スライドイメージの紹介</p>
		 </div>
	</div>
	...
</div>

【設定】

  • div.item > 〔<img>《画像》 + {.carousel-caption > [<h3>《タイトル》 + <p>《コンテンツ》]}《キャプション》〕《スライド項目》

複数のカルーセル(Multiple carousels)

カルーセルは、カルーセルコントロールが正しく機能するために、最も外側のコンテナ(.carousel)上にidを使用する必要がある。複数のカルーセルを追加する場合、またはカルーセルのidを変更する場合は、関連するコントロールも更新すること。

データ属性経由で(Via data attributes)

データ属性を使用して、カルーセルの位置を簡単に制御。data-slideは、prevまたはnextというキーワードを受け取り、スライドの現在の位置からの相対的な位置が変更される。あるいは、data-slide-toを使用して、スライドの位置を 0から始まる特定のインデックスにシフトして、カルーセルの未処理のスライドインデックスをdata-slide-to="2"に渡す。

data-ride="carousel"属性は、ページの読み込み時にカルーセルをアニメーションとしてマークするために使用。同じカルーセルの(余分で不要な)明示的なJavaScriptの初期化と組み合わせて使用することは不可。

JavaScript経由で(Via JavaScript)

手動でカルーセルを呼び出す:

$('.carousel').carousel()

オプションは、データの属性やJavaScriptを使用して渡すことが可能。データ属性の場合は、data-interval="" のように、data- にオプション名を追加する。

名前 タイプ デフォルト 説明
interval number 5000 アイテムを自動的に循環させる時間の間隔(1000分の1秒単位)。falseの場合カルーセルは自動的に循環しない。
pause
一部追加(3.3.7)
string | null "hover" "hover" に設定されている場合は、mouseenter でカルーセルの循環を一時停止し、mouseleave でカルーセルの循環を再開。null に設定した場合、カルーセルの上にカーソルを置いても一時停止しない。
wrap
新設
boolean true カルーセルは、連続的に循環すべきか停止すべきか指定
true:有効/false:無効
keyboard
新設(3.3.0)
boolean true カルーセルが、キーボードのイベントに反応すべきかどうか指定
true:有効/false:無効

【変更履歴】

  • 【3.3.0】keyboardが追加
  • 【3.3.7】pauseのタイプにnullが追加(それより前は無効にする場合はfalseを使用)

.carousel(options)

オプションのオプション object を使用してカルーセルを初期化し、アイテムの循環を開始。

$('.carousel').carousel({
	interval: 2000
})

.carousel('cycle')

左から右にカルーセルの項目が循環。

.carousel('pause')

カルーセルの項目の循環を停止。

.carousel(number)

カルーセルを特定のフレームに循環させる(配列と同様に0から数える)。

.carousel('prev')

前の項目に循環。

.carousel('next')

次の項目に循環。

Bootstrapのカルーセルクラスは、カルーセルの機能に接続するために2つのイベントを公開。

両方のイベントには、次の追加プロパティがある 新設(3.2.0)

  • direction: カルーセルのスライドされる方向("left"または"right"のいずれか)
  • relatedTarget: アクティブな項目として配置されているDOM要素
イベントタイプ 説明
slide.bs.carousel このイベントは、slide のインスタンス・メソッドが呼び出されると直ちに発動。
slid.bs.carousel このイベントは、カルーセルのスライド遷移が完了すると直ちに発動。
使用例
$('#myCarousel').on('slide.bs.carousel', function () {
	// 何かをする...
})

スクロールに追従するメニューや要素を実装できるプラグイン。

基本設定(Example)

アフィックスプラグインは、position: fixed;をオン/オフで切り替える。position:sticky;で見つかった効果を代替的に使用する。

見本

このサイトのサイドバーを参照。

設定例

HTML
<body data-spy="scroll" data-target="#sidebar">
	...
	<div id="sidebar" data-spy="affix" data-offset-top="200">
		<ul class="nav">
			<li><a href="#overview">概要</a>
				<ul class="nav">
					<li><a href="#js-individual-compiled">個別または一括で</a></li>
					<li><a href="#js-data-attrs">データ属性</a></li>
					<li><a href="#js-programmatic-api">プログラムに基づいたAPI</a></li>
					<li><a href="#js-noconflict">競合の回避</a></li>
					<li><a href="#js-events">イベント</a></li>
					<li><a href="#js-version-nums">バージョン・ナンバー</a></li>
					<li><a href="#js-disabled">JavaScript無効時</a></li>
				</ul>
			</li>
			<li><a href="#transitions">遷移アニメーション</a></li>
			...
		</ul>
	</div>
	...
</body>
css
/* サイドバー */
#sidebar.affix {
	position: static;
}
@media screen and (min-width: 992px) {
	#sidebar.affix,
	#sidebar.affix-bottom {
		width: 213px;
	}
	#sidebar.affix {
		position: fixed;
		top: 60px;
	}
	#sidebar.affix-bottom {
		position: absolute;
	}
}
@media screen and (min-width: 1200px) {
	#sidebar.affix-bottom,
	#sidebar.affix {
		width: 263px;
	}
}

【設定】

  • div[data-spy="affix"][data-offset-top="***"][data-offset-bottom="***"]
  • data-offset-top="***"には追従を開始する最上部からのスクロール位置(px)を入れる
  • data-offset-bottom="***"には追従を終了する最下部からのスクロール位置(px)を入れる
  • プラグインに内蔵されている.affix.affix-bottomの位置を決めるために別途CSSを指定する必要がある
  • スクロールに追従するページ内ナビゲーションを作成するにはスクロールスパイと併用

使用方法(Usage)

データ属性を使用してアフィックスプラグインを使用するか、独自のJavaScriptを使用して手動で設定する。どちらの場合も、添付したコンテンツの位置と幅にCSSを指定する必要がある。

注意:Safariのレンダリングのバグにより、順序変更した列など、相対的に配置された要素に含まれる要素にアフィックスプラグインを使用しないこと。

CSS経由で配置(Positioning via CSS)

アフィックプラグインは、それぞれが特定の状態を表す3つのクラスを切り替える:.affix, .affix-top,.affix-bottom。実際の位置を扱うために、.affixでのposition: fixed;を除いて(このプラグインに依存せずに)手動でこれらのクラスのスタイルを指定する必要がある。

アフィックスプラグインの仕組みは次のとおり:

  1. まず、.affix-topが追加され、要素が一番上にあることを示す。この時点ではCSSの配置は必要ない。
  2. 追従したい対象の要素をスクロールすると、実際の追従に切り替えられる。これは、.affix.affix-topに代わってposition: fixed;を設定する(BootstrapのCSSによって提供される)。
  3. offsetの最下部が定義されている場合は、それをスクロールして.affix.affix-bottomに置き換える必要がある。offsetはオプションなので、適切なCSSを設定する必要がある。この場合は、position: absolute;を追加する。必要に応じてプラグインはデータ属性またはJavaScriptオプションを使用して、そこから要素を配置する場所を決定する。

上記の手順に従って、以下のいずれかの使用方法のCSSを設定する。

データ属性経由で(Via data attributes)

任意の要素にアフィックスプラグインの動作を簡単に追加するには、追従したい要素data-spy="affix"をに追加する。offsetを使用して要素の固定を切り替えるタイミングを定義する。

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
	...
</div>

JavaScript経由で(Via JavaScript)

JavaScript経由でアフィックスプラグインを呼び出す:

$('#my-affix').affix({
	offset: {
		top: 100
	, bottom: function () {
			return (this.bottom = $('.footer').outerHeight(true))
		}
	}
})

オプション(Options)

オプションは、データ属性またはJavaScriptを使用して渡すことが可能。データ属性の場合、data-offset-top="200"のように、data-にオプション名を追加する。

名前 タイプ デフォルト 説明
offset number | function | object 10 スクロール位置を計算するときに画面からオフセットするピクセル。単一のnumberを指定した場合はtopとbottomの両方で適用。特殊なbottomとtopのオフセットを提供するには、objectのoffsetをoffset: { top: 10 }またはoffset: { top: 10, bottom: 5 }のように設定する。動的にoffsetを計算する必要がある場合はfunctionを使用。
target
新設(3.2.0)
selector | node | jQuery element the window object 追従のターゲット要素を指定。

メソッド(Methods)新設(3.3.5)

.affix(options)

コンテンツを添付されたコンテンツとしてアクティブにする。オプションのオプションobjectを受け入れる。

$('#myAffix').affix({
	offset: 15
})

.affix('checkPosition')

関連要素の大きさ、位置、スクロール位置に基づいて追従の状態を再計算する。.affix, .affix-top,.affix-bottomクラスは、新しい状態に従って、追従されたコンテンツに追加または削除される。このメソッドは、追従されたコンテンツの正確な位置を保証するために、追従されたコンテンツまたはターゲット要素の大きさが変更されるたびに呼び出される必要がある。

$('#myAffix').affix('checkPosition')

イベント(Events)新設

Bootstrapのアフィックスクラスは、追従の機能に接続するためにいくつかのイベントを公開する。

イベントタイプ 説明
affix.bs.affix このイベントは、要素が追従される直前に発動。
affixed.bs.affix このイベントは、要素が追従された後に発動。
affix-top.bs.affix このイベントは、要素が最上部に追従される直前に発動。
affixed-top.bs.affix このイベントは、要素が最上部に追従された後に発動。
affix-bottom.bs.affix このイベントは、要素が最下部に追従される直前に発動。
affixed-bottom.bs.affix このイベントは、要素が最下部に追従された後に発動。

【Bootstrap2.3.2との変更箇所】

  • bootstrap-typeahead.jsは廃止、別途typeahead.jsを導入すること