個別または一括で（Individual or compiled）

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

データ属性（Data attributes）

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

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

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

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

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

プログラムに基づいた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）v3.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）がアクションの完了時に起動される。

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

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

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

HTMLサニタイザー（Sanitizer） v3.4.1新設

ツールチップとポップオーバーでは、HTMLを受け付けるオプションでサニタイズするためにBootstrap内蔵のサニタイザーを使用。

デフォルトの whiteList 値は以下のとおり：

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

このデフォルトの whiteList に新しい値を追加したい場合は、次のようにする：

設定例

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

DOMPurifyのような専用のライブラリを使用したいという理由でBootstrapのサニタイザーを使わない場合は、次のようにする：

設定例

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

バージョン・ナンバー（Version numbers）

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

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

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

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

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

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

遷移アニメーションについて（About transitions）

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

内部のもの（What's inside）

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

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

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

$.support.transition = false

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

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

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

基本設定（Examples）v3.0設定変更⇒v3.3.5追加変更

静的モーダルの実例（Static example）

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

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

<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 -->

<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経由でモーダルを切り替える。ページの上からスライドしてフェードインする。

見本

<!-- 切り替えボタンの設定 -->
<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 -->

<!-- 切り替えボタンの設定 -->
<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 -->

モーダルの大きさ（Optional sizes）v3.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>

大きさの種類

アニメーションの削除（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>

グリッドシステムの使用（Using the grid system）v3.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>

切替ボタンに基づくモーダルコンテンツの取得（Varying modal content based on trigger button）v3.3.1新設

若干異なる内容で、同じモーダルを起動する複数のボタンが必要な場合、クリックしたボタンに応じてモーダルの内容を変更するには、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-にオプション名を追加すること。

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

メソッド（Methods）v3.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') v3.3.4新設

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

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

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

イベント（Events）v3.1.0一部追加

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

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

使用例

$('#myModal').on('hidden.bs.modal', function (e) {
	// 何かをする...
})

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

基本設定（Examples）

見本

• ボタンドロップダウン
• ドロップダウンつきボタンアドオン
• ドロップダウンメニューつきナビゲーション
• ドロップダウンメニューつきナビゲーションバー

使用方法（Usage）

データ属性または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）v3.0新設

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

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

使用例

$('#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>

使用方法（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-にオプション名を追加。

イベント（Events）

使用例

$('#myScrollspy').on('activate.bs.scrollspy', function () {
	// 何かをする...
})

基本設定（Example tabs）v3.3.1設定変更

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

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

見本

<!-- タブ部分 -->
<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>

<!-- タブ部分 -->
<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 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>

<!-- ピル部分 -->
<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>

使用方法（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を記述することなくタブまたはピルのナビゲーションを有効にすることが可能。navとnav-tabsのクラスをタブulに追加すると、Bootstrapのタブのスタイルが適用され、navとnav-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') v3.3.5表記の分離

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

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

イベント（Events）v3.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.tabとhidden.bs.tabイベントは発動しない。

使用例

$('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>より後に設置）

$("[data-toggle=tooltip]").tooltip()

<script>
	$("[data-toggle=tooltip]").tooltip()
</script>

静的ツールチップ（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>

$(function () {
	$('[data-toggle="tooltip"]').tooltip()
})

使用方法（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-にオプション名を追加すること。

メソッド（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）v3.0新設⇒v3.3.5一部追加

使用例

$('#myTooltip').on('hidden.bs.tooltip', function () {
	// 何かをする...
})

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

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

$(function () {
	$('[data-toggle="popover"]').popover()
})

基本設定（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>より後に設置）

$("[data-toggle=popover]").popover()

<script>
	$("[data-toggle=popover]").popover()
</script>

ポップオーバーの方向設定（Four directions）v3.0設定変更

見本

<!-- 左に出るポップオーバーの設定 -->
<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>

<!-- 左に出るポップオーバーの設定 -->
<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>

次のクリックで閉じる（Dismiss on next click）v3.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-にオプション名を追加する。

メソッド（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）v3.0新設⇒v3.3.5一部追加

使用例

$('#myPopover').on('hidden.bs.popover', function () {
	// 何かをする...
})

基本設定（Example alerts）

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

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

見本

設定例 （v3.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>

使用方法（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アラートプラグインは、アラート機能に接続するためのいくつかのイベントを公開する。

使用例

$('#my-alert').on('closed.bs.alert', function () {
	// 何かをする...
})

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

ステートフルボタン（Stateful）v3.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>

切替ボタン（Single toggle）v3.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>

チェックボックス/ラジオボタン（Checkbox/Radio）v3.0設定変更⇒v3.2.0追加変更

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

チェックボックスの場合

見本

<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>

<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 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>

<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>

メソッド（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>

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

基本設定（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>

アコーディオンの設定例（Accordion example）v3.0設定変更⇒v3.3.0追加変更

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

デザインがv2のナビゲーション風からパネルでの作成に変更。（v3RC2）

見本

<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>

<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>

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

見本

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; //リンクテキストの下線を消す
}

開くパネルコンテンツ部分がリストグループ v3.3.0新設

div.panel-bodyをul.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> 

使用方法（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-にオプション名を追加。

メソッド（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クラスは折り畳みの機能に接続するためにいくつかのイベントを公開する。

使用例

$('#myCollapsible').on('hidden.bs.collapse', function () {
	// 何かをする...
})

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

基本設定（Examples）v3.0一部変更⇒v3.3.0追加変更

見本

前へ 次へ

<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>

<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>

キャプションの設定（Optional captions）

見本

第1スライド見出し

スライドイメージの紹介

第2スライド見出し

スライドイメージの紹介

第3スライド見出し

スライドイメージの紹介

設定例

<!-- スライドさせる画像の設定 -->
<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>

使用方法（Usage）

複数のカルーセル（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()

オプション（Options）v3.3.7一部追加

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

メソッド（Methods）

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

前の項目に循環。

.carousel('next')

次の項目に循環。

イベント（Events）

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

両方のイベントには、次の追加プロパティがある v3.2.0新設：

• direction: カルーセルのスライドされる方向（"left"または"right"のいずれか）
• relatedTarget: アクティブな項目として配置されているDOM要素

使用例

$('#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;
	}
}

使用方法（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-にオプション名を追加する。

メソッド（Methods）v3.3.5新設

.affix(options)

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

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

.affix('checkPosition')

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

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

イベント（Events）v3.0新設

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