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

プラグインは、個別（Bootstrapの個別*.jsファイルを使用）、または一括（bootstrap.jsまたは圧縮版であるbootstrap.min.jsを使用）で追加することができます。

データ属性（Data attributes）

JavaScriptを一行も書かずに単にマークアップAPIを通じてすべてのBootstrapのプラグインを使用することができます。
これは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')

競合の回避（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() // モーダルの表示を止める
})

シンプルな遷移アニメーション効果を実装できるプラグイン。

シンプルな遷移アニメーションのために、他のJSファイルと一緒にtransition.jsが含まれています。bootstrap.js（またはbootstrap.min.js）を使用している場合、すでにそこに含まれているので、改めてこれを追加する必要はありません。

Transition.jsは、transitionEndイベントならびにCSS遷移アニメーションエミュレーターのための基本的な助けとなります。CSSの遷移アニメーション効果のサポートをチェックし、かつ接続した遷移アニメーションを受け取るために他のプラグインとともに使用します。

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

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

モーダルを実行するためのプラグイン。

モーダルの設定（Default examples） 設定変更

見本

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

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

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

モーダルの大きさ（Optional sizes） 新設（3.1.0）

設定例

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xx">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

大きさの種類

アニメーションの削除（Remove animation）

見本

設定例

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  ...
</div>

使用方法（Usage）

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

データ属性を通じて（Via data attributes）

JavaScriptを記述することなくモーダルを有効にします。
ボタンにコントローラ要素data-toggle="modal"を、切り替える特定のモーダルを対象とするdata-target="#myModal"またはhref="#myModal"と共に設定します。

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

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

JavaScriptを通じて（Via JavaScript）

ID myModalについてのJavaScript1行でモーダルを呼び出します。

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

オプション（Options）

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

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

メソッド（Methods）

.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')

イベント（Events）

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

使用例

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

ドロップダウンメニューを実装するプラグイン。

見本

ボダンドロップダウン

ドロップダウンつきボタンアドオン

ドロップダウンメニューつきナビゲーション

ドロップダウンメニューつきナビゲーションバー

使用方法（Usage）

データ属性やJavaScriptを通じて親リスト項目に追加された.openクラスを切り替えることによって、ドロップダウンプラグインは隠されたコンテンツ（ドロップダウンメニュー）に切り替えます。開いたときにメニューの外側をクリックするとドロップダウンメニューを閉じるためのクリック領域としてプラグインも.dropdown-backdropを追加します。
注：data-toggle="dropdown"属性は、アプリケーションレベルでのドロップダウンメニューを閉じる際に依存しているので常にそれを使用することをお勧めします。

データ属性を通じて（Via data attributes）

ドロップダウンを切り換えるために、リンクまたはボタンにdata-toggle="dropdown"を加えてください。

<div class="dropdown">
  <a data-toggle="dropdown" href="#">ドロップダウンへの切替</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

そのままURLを維持するには、href="#"の代わりにdata-target属性を使用します。

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    ドロップダウン <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

JavaScriptを通じて（Via JavaScript）

JavaScriptでドロップダウンを呼び出します。

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

オプション（Options）

ありません。

メソッド（Methods）

$().dropdown('toggle')

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

イベント（Events） 新設

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

使用例

$('#myDropdown').on('show.bs.dropdown', function () {
  // 何かをする...
})

スクロール位置に応じてナビゲーションのアクティブ状態を切り替えるためのプラグイン。

スクロールスパイの設定（Example in navbar）

見本 下記の設定例とは違う方法で表示しています

設定例

<body style="padding-top:70px;" data-spy="scroll" data-target=".navbar-collapse">
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">ブランド</a>
    </div>
    <div class="navbar-collapse collapse">
      <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>
  <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）

データ属性を通じて（Via data attributes）

簡単にトップバーのナビゲーションにスクロールスパイ動作を追加するために、探りだす要素（最も典型的なのは<body>）にdata-spy="scroll"を追加します。その後、任意のBootstrapの.navコンポーネントの親要素のIDまたはクラスを使用してdata-target属性を追加します。

body {
  position: relative;
}

<body data-spy="scroll" data-target=".navbar-example">
  ...
  <div class="navbar-example">
    <ul class="nav nav-tabs">
      ...
    </ul>
  </div>
  ...
</body>

JavaScriptを通じて（Via JavaScript）

JavaScriptでスクロールスパイを呼び出します。

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

メソッド（Methods）

.scrollspy('refresh')

DOMから要素の追加または除去と併せてスクロールスパイを使用するときは、次のようなリフレッシュ用のメソッドを呼び出す必要があります。

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

オプション（Options）

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

イベント（Events）

使用例

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

ナビゲーションで素早いコンテンツの切り替えを実装できるプラグイン。

タブナビゲーション（Example tabs）

見本

設定例

<ul 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">ドロップダウン <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#message1" data-toggle="tab">代表から</a></li>
      ...
    </ul>
  </li>
</ul>
<div class="tab-content" style="margin-top:10px">
  <div class="tab-pane active" id="home">ホームの文章です。...</div>
  <div class="tab-pane" id="profile">プロフィールの文章です。...</div>
  <div class="tab-pane" id="message1">代表からのメッセージです。...</div>
  ...
</div>

ピルナビゲーション（Example tabs）

見本 フェード効果つき

設定例

<ul class="nav nav-pills">
　<li class="active"><a href="#home2" data-toggle="pill">ホーム</a></li>
　<li><a href="#profile2" data-toggle="pill">プロフィール</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="#message2" data-toggle="pill">代表から</a></li>
      ...
</ul>
<div class="tab-content" style="margin-top:10px">
  <div class="tab-pane fade in active" id="home2">ホームの文章です。...</div>
  <div class="tab-pane fade" id="profile2">プロフィールの文章です。...</div>
  <div class="tab-pane fade" id="messages2">代表からのメッセージです。....</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を記述することなくタブまたはピルのナビゲーションを有効にすることができます。タブulにnavとnav-tabsのクラスを追加するとBootstrapのタブスタイルを適用し、navとnav-pillsクラスを追加するとピルスタイルを適用します。

<!-- タブナビゲーション -->
<ul 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><a href="#messages" data-toggle="tab">メッセージ</a></li>
  <li><a href="#settings" data-toggle="tab">セッティング</a></li>
</ul>

<!-- タブ枠 -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

フェード効果（Fade effect）

タブをフェードインさせるためには.fadeをそれぞれの.tab-paneに追加してください。最初のタブ枠にはきちんと最初の内容をフェードインさせるためには.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のいずれかを持っている必要があります。

●最初のタブにactive設定していても最後のタブがアクティブになる例

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home" data-toggle="tab">ホーム</a></li>
  <li><a href="#profile" data-toggle="tab">プロフィール</a></li>
  <li><a href="#messages" data-toggle="tab">メッセージ</a></li>
  <li><a href="#settings" data-toggle="tab">セッティング</a></li>
</ul>

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

<script>
  $(function () {
    $('#myTab a:last').tab('show')
  })
</script>

イベント（Events）

使用例

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // アクティブなタブ
  e.relatedTarget // その前のタブ
})

ツールチップを実行するためのプラグイン。

ツールチップの設定（Default 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>

ツールチップの方向設定（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>

使用方法（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')

要素のツールチップを表示します。

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

.tooltip('hide')

要素のツールチップを非表示にします。

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

.tooltip('toggle')

要素のツールチップを切り替えます。

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

.tooltip('destroy')

要素のツールチップを非表示にして破棄します。

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

イベント（Events） 新設

使用例

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

ポップオーバーを実行するためのプラグイン。

ポップオーバーの設定（Default examples）

見本

設定例

HTML

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

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

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

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

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

見本

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

使用方法（Usage）

JavaScriptでポップオーバーを有効にします：

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

オプション（Options）

オプションは、データの属性やJavaScriptで渡すことができます。データ属性の場合は、data-animation=""のように、data-にオプション名を追加します。

メソッド（Methods）

$().popover(options)

要素の集合体のためにポップオーバーを初期化します。

.popover('show')

要素のポップオーバーを表示します。

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

.popover('hide')

要素のポップオーバーを非表示にします。

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

.popover('toggle')

要素のポップオーバーを切り替えます。

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

.popover('destroy')

要素のポップオーバーを非表示にして破棄します。

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

イベント（Events） 新設

使用例

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

アラートメッセージを閉じるためのプラグイン。

見本

設定例 （3.2.0変更）

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

<!-- ボタン付き -->
<div class="alert alert-danger alert-dismissible fade in" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">閉じる</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）

JavaScriptでアラートの消去を有効にします。

$(".alert").alert()

マークアップ（Markup）

ただ自動的にアラートを閉じる機能を与えるために閉じるボタンにdata-dismiss="alert"を追加します。

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

メソッド（Methods）

$().alert()

閉じる機能を持つすべてのアラートを囲みます。アラートを閉じるときにアニメーション化させるには、.fadeと.inのクラスを指定してください。

.alert('close')

アラートを閉じます。

$('.alert').alert('close')

イベント（Events）

使用例

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

ボタンに様々な機能を追加するためのプラグイン。

ステートフルボタン（Stateful）

ロード状態を表示するボタン

見本

設定例

HTML

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

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

JSファイルの場合

$('#loading-example-btn').click(function () {
  var btn = $(this)
  btn.button('loading')
  setTimeout(function () {
    btn.button('reset')
  }, 3000)
})

HTMLコードの場合

<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    setTimeout(function () {
      btn.button('reset')
    }, 3000)
  })
</script>

シングルトグルボタン（Single toggle）

単独でON/OFFの切替をするボタン

見本

設定例

<button type="button" data-toggle="button" class="btn btn-primary">ココを押す</button>

チェックボックスボタングループ（Checkbox） 設定変更

チェックボックスのようなボタングループ

見本

<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" checked> オプション1（チェック済）
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> オプション2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> オプション3
  </label>
</div>

ラジオボタングループ（Radio） 設定変更

ラジオボタンのようなボタングループ

見本

<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" checked> オプション1（選択済）
  </label>
  <label class="btn btn-primary">
    <input type="radio"> オプション2
  </label>
  <label class="btn btn-primary">
    <input type="radio"> オプション3
  </label>
</div>

使用方法（Usage）

JavaScriptでボタンを有効にします。

$('.btn').button()

マークアップ（Markup）

データ属性は、ボタンプラグインに必要です。様々なマークアップの種類については下記のコード例をチェックしてください。

オプション（Options）

ありません。

メソッド（Methods）

$().button('toggle')

押すと切り替える状態にします。
data-toggle属性を使用して、ボタンの自動ON/OFF切替を有効にすることができます。

<button type="button" class="btn btn-primary" data-toggle="button">...</button>

$().button('loading')

ボタンのロード状態を設定します - ロードテキストにボタンとスワップテキストを無効にします。ロードするテキストは、データ属性data-loading-textを使用したボタン要素で定義する必要があります。

<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

$().button('reset')

ボタンの状態をリセットします - 元のテキストに戻ります。

$().button(string)

リセットするボタンの状態 - 任意のデータに定義されたテキストに変わります。

<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

アコーディオンのように折り畳めるアイテムを実装できるプラグイン。

パネルによる折り畳みの設定（Example accordion） 設定変更

デザインがナビゲーション風からパネル風に変更（3RC2）

見本

<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">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          アイテム1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        アイテム1のコンテンツ
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          アイテム2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        アイテム2のコンテンツ
      </div>
    </div>
  </div>
  ...
</div>

ボタンによる折り畳みの設定（Example accordion）

見本

設定例

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#btn-demo">
  ココを押すと開閉します
</button>

<div id="btn-demo" class="collapse in" style="margin-top:10px">コンテンツが表示されます。</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')

表示または非表示に折り畳み可能な要素を切り替えます。

.collapse('show')

折り畳み可能な要素を表示します。

.collapse('hide')

折り畳み可能な要素を非表示にします。

イベント（Events）

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

使用例

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

スライドショーを実装できるプラグイン。

カルーセルの設定（Examples） 一部変更

見本

<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="image/1st.jpg" alt="第1スライドイメージ">
    </div>
    <div class="item">
      <img src="image/2nd.jpg" alt="第2スライドイメージ">
    </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">
    <div class="item active">
      <img src="image/1st.jpg" alt="第1スライドイメージ">
    </div>
    <div class="item">
      <img src="image/2nd.jpg" alt="第2スライドイメージ">
    </div>
    ...
  </div>
  <!-- スライドコントロールの設定 -->
  <a class="left carousel-control" href="#carousel-examples" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-examples" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

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

見本

第1スライド見出し

スライドイメージの紹介

第2スライド見出し

スライドイメージの紹介

第3スライド見出し

スライドイメージの紹介

設定例

<div id="carousel-examples" class="carousel slide">
  ...
  <!-- スライドさせる画像の設定 -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="image/1st.jpg" alt="第1スライドイメージ">
       <div class="carousel-caption">
        <h3>第1スライド見出し</h3>
        <p>スライドイメージの紹介</p>
      </div>
    </div>
    <div class="item">
      <img src="image/2nd.jpg" 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="2"のように0から始まる特定のインデックスにスライド位置をシフトしてカルーセルに純粋なスライドのインデックスを渡すためにdata-slide-toを使用します。

data-ride="carousel"属性はページの読み込み時から遷移アニメーションが始まるカルーセルを指定するために使用します。同じカルーセルの（不要で不必要な）明示的なJavaScriptの初期化と組み合わせて使用することはできません。

JavaScriptを通じて（Via JavaScript）

手動でカルーセルを呼び出します。

$('.carousel').carousel()

オプション（Options）

オプションは、データの属性や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つのイベントを公開します。

両方のイベントには、次の追加プロパティがあります 新設（3.2.0）：

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

使用例

$('#myCarousel').on('slide.bs.carousel', function () {
  // 何かをする...
})

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

見本

このサイトのサイドバーを参照してください。

設定例

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></li>
      <li><a href="#transitions">遷移効果</a></li>
      <li><a href="#modals">モーダル</a>
        <ul class="nav">
          <li><a href="#modal-default">モーダルの設定</a></li>
          <li><a href="#modal-size">モーダルの大きさ</a></li>
          <li><a href="#modal-usage">使用方法</a></li>
        </ul>
      </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を提供する必要があります。

CSSを通じて配置（Positioning via CSS）

アフィックスプラグインは特定の状態を表す3つのクラスの切り替えがあります：.affix, .affix-top,.affix-bottom
実際の位置を処理するために自分で（このプラグインに依存せずに）これらのクラスのスタイルを提供する必要があります。

アフィックスプラグインが機能する方法：

1. 始めにプラグインは要素がその一番上の位置にあることを示すために.affix-topを加えます。この時点ではCSS位置決めは必要とされません。
2. スクロールが追従された対象の要素を過ぎると、実際の追従に切り替える必要があります。これは、.affixが.affix-topに代わってposition: fixed;（BootstrapのコードCSSによって提供される）を決めるところです。
3. オフセットの最下部が定義されている場合は、それを過ぎてスクロールすると.affixを.affix-bottomと入れ替えなければなりません。オフセットがオプションであるので、1つをセットすることは適切な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）

イベント（Events）新設

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