概要

個別か全部

プラグインは( Bootstrap の個別の *.js ファイルを使って)個別にインクルードするか、( bootstrap.js か小さくした bootstrap.min.js を使って)一度に全てをインクルードすることができます。

コンパイル済みの JavaScript を使う

bootstrap.jsbootstrap.min.js は、どちらも全てのプラグインが1つのファイルに収められています。どちらか1つだけをインクルードしてください。

プラグインの依存関係

いくつかのプラグインと CSS コンポーネントは他のプラグインに依存しています。プラグインを個別にインクルードする場合、ドキュメントでこれらの依存関係を確認するようにしてください。全てのプラグインは jQuery に依存していることにも注意してください(これは jQuery がプラグイン・ファイルの前にインクルードされなければならないことを意味します)。bower.json を調べて、どのバージョンの jQuery がサポートされているかを確認してください。

データ属性

全ての Bootstrap プラグインは、純粋にマークアップ API を通して、JavaScript を1行も書くことなく使うことができます。これは Bootstrap の最高級の API で、プラグインを使うときに最初に考慮すべきです。

とは言っても、なんらかの状況では、この機能をオフにしたくなるかも知れません。それゆえ、data-api によってドキュメントの名前空間において全てのイベントを解放することでデータ属性の API を無効にする機能も提供しています。こんな感じになります:

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

あるいは、特定のプラグインを対象にして、data-api の名前空間に沿って名前空間としてプラグインの名前をこんな風にインクルードするだけです:

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

データ属性経由では要素ごとに1つのプラグインだけ

同じ要素に複数のプラグインからデータ属性を使わないでください。例えば、ボタンはツールチップとモーダルのトグルの両方は持てません。これがしたければ、括った要素を使ってください。

プログラム API

全ての Bootstrap プラグインは、純粋に JavaScript API を通して使えるべきです。全ての公式 API は単一で、連結可能なメソッドで、効果のあるコレクションを返します。

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

全てのメソッドは、追加でオプションのオブジェクトや特定のメソッドを対象にした文字列や、(これはひとつのプラグインにデフォルトの挙動をさせるための)引数なし、を受け入れるべきです:

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

それぞれのプラグインはまた、生のコンストラクタを Constructor プロパティで公開します:$.fn.popover.Constructor。 もし特定のプラグインのインスタンスが必要な場合は、要素から直接取り出します:$('[rel="popover"]').data('popover')

デフォルト設定

プラグインの Constructor.DEFAULTS オブジェクトを変更することで、プラグインのデフォルト設定を変更できます:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

衝突の回避

Bootstrap のプラグインを、他の UI フレームワークと一緒に使う必要がある場合もあります。そういう場合、ときおり名前空間の衝突が起きることがあります。もし名前空間の衝突が起きた場合は、値を元に戻したいプラグインの .noConflict を呼んでもかまいません。

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

イベント

Bootstrap は、たいていのプラグインのユニークな動作のために、カスタム・イベントを提供しています。一般に、これらは不定詞で過去分詞形で現れます - 不定詞(例:show )がイベントの開始に起動される箇所では、その過去分詞形(例:shown )が動作の完了時に起動されます。

3.0.0 においては、全ての Bootstrap のイベントは名前空間にあります。

不定詞のイベントは preventDefault 機能を提供します。これは、開始前に動作の実行を止める能力を提供します。

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

バージョン番号

それぞれの Bootstrap の jQuery プラグインのバージョンは、プラグインのコンストラクタの VERSION プロパティを通してアクセスできます。例えば、ツーツチップ・プラグインの場合は:

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

JavaScript が無効な場合、特別なフォールバックはありません

Bootstrap のプラグインは、JavaScript が無効な場合、とりわけ潔くフォールバックしません。この場合のユーザー体験が心配な場合は、ユーザーに状況(と JavaScript を有効にする方法)を説明するために <noscript> を使うか、自分でカスタムのフォールバックを追加します。

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

Bootstrap は、Prototype や jQuery UI のようなサードパーティー製 JavaScript ライブラリを公式にはサポートしません。.noConflict や名前空間でのイベントにかかわらず、互換性の問題は自分で解決する必要があります。

切り替え transition.js

切り替えについて

シンプルな切り替え効果には、他の JS ファイルと一緒に transition.js をインクルードします。コンパイルされた(または最小化された) bootstrap.js を使っている場合は、インクルードする必要はありません-すでにありますから。

内部動作

Transition.js は、CSS の切り替えエミュレータと同様の transitionEnd イベントのための基本的なヘルパーです。CSS の切り替えのサポートをチェックするのと表示している切り替えをとらえるために他のプラグインに使われています。

モーダル modal.js

モーダルは、最小限必要な機能とスマートさをデフォルトに備えた、効率化されてはいても柔軟なダイアログ・プロンプトです。

重複したモーダルはサポートされていません

他のモーダルがまだ見えている間は、新たにモーダルを開かないようにしてください。一度に複数のモーダルを表示するにはカスタム・コードが必要です。

モーダルの記述場所

モーダルの HTML コードは、他のコンポーネントがモ-ダルの見た目や機能に影響するのを避けるために、いつもドキュメントの最上部に配置するようにしてください。

モバイル機器での注意

モバイル機器でモーダルを使うことについてはいくつか注意事項があります。詳しくは、ブラウザ・サポートのドキュメントをご覧ください。

HTML5 がどのような意味に定義するかが原因で、Bootstrap のモーダルでは autofocus HTML 属性は効果がありません。同じ効果を実現するには、なんらかのカスタム JavaScript を使用してください:

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

静的な例

フッターにヘッダー、本文、一連の動作を備えてレンダリングされたモーダル

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

ライブ・デモ

下のボタンをクリクすると JavaScript でモーダルを切り替えます。ページの最上部から降りてきてフェードインします。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<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" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

モーダルをアクセス可能にする

モーダルのタイトル参照のために、role="dialog".modalaria-labelledby="myModalLabel" 属性に追加し、読み上げソフトにモーダルの DOM 要素をスキップするように伝えるために aria-hidden="true" を追加するようにしてください。

追加で、.modalaria-describedby で、モーダルのダイアログに解説をつけてもかまいません。

YouTube 動画の組込み

モーダルの中に YouTube 動画を埋め込むには、自動的に再生を止めたりするために、Bootstrap の外に追加で JavaScript が必要です。もっと情報を得るには、この Stack Overflow の役立つポストをご覧ください。

サイズ・オプション

モーダルには2つのサイズ・オプションがあり、.modal-dialog に配置する修飾クラスで利用可能です。

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

アニメーションの除去

ビューにフェード・インするよりむしろシンプルに現れるモーダルにするには、モーダルのマークアップから .fade を取り除きます。

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

グリッド・システムの使用

モーダルで Bootstrap のグリッド・システムを活用するには、.modal-body の中で .container-fluid をネストして、このコンテナの中でノーマルのグリッド・システム・クラスを使用します。

<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          <div class="container-fluid">
            <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">
                Level 1: .col-sm-9
                <div class="row">
                  <div class="col-xs-8 col-sm-6">
                    Level 2: .col-xs-8 .col-sm-6
                  </div>
                  <div class="col-xs-4 col-sm-6">
                    Level 2: .col-xs-4 .col-sm-6
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

わずかに異なるコンテンツに対して、全てボタンがトリガーになる同じような一連のモーダルです。event.relatedTarget と(可能であれば jQuery 経由で) HTML data-* 属性を使って、ボタンがクリックされることに依存しているモーダルのコンテンツを変化させます。モーダルのイベントの詳細は、relatedTarget をご覧ください。

...more buttons...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</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">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

使い方

モーダル・プラグインはデータ属性や JavaScript 経由で必要に応じて隠れたコンテンツを切り替えます。これはまた、<body>.modal-open を追加することで、デフォルトのスクロールの振る舞いを上書きして、モーダルの外側がクリックされたときに見せていたモーダル閉じるためのクリック領域を提供するために、 .modal-backdrop を生成します。

データ属性経由

JavaScript を書かずにモーダルをアクティブにします。特定のモーダルを切り替えるように指定するために、data-target="#foo"href="#foo" と一緒に、ボタンのようなコントローラー要素に data-toggle="modal" を設定します。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

JavaScript 経由

1行の JavaScript で、id myModal のついたモーダルを呼び出します:

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

オプション

データ属性か JavaScript 経由でオプションを指定します。データ属性には、data-backdrop="" のように、data- にオプション名をつけます。

名称 デフォルト 説明
バックドロップ ブール値か 'static' 文字列 true モーダルのバックドロップをインクルードします。あるいは、クリックでモーダルを閉じないバックドロップには、static を明記します。
キーボード ブール値 true エスケープ・キーが押されたときにモーダルを閉じます。
表示 ブール値 true 初期化時にモーダルを表示します。
リモート パス false

このオプションは v3.3.0 以来不評で、v4 ではなくなります。その代わりにクライアント・サイド・テンプレートかデータ・バインディング・フレームワークを使うか、自分で jQuery.load を呼び出すことを推奨します。

リモート URL がある場合は、jQuery の load メソッドによってコンテンツは一度にロードされ、.modal-content div に送り込まれます。データ API を使っているなら、代わりに href 属性を使ってリモート・ソースを指定してもかまいません。この例を下にお見せします:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

メソッド

.modal(options)

コンテンツをモーダルとして動作させます。オプションとして object を受け付けます。

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

.modal('toggle')

手動でモーダルを切り替えます。モーダルが実際に開いたり閉じたりする前に呼び出し元に帰ります。(例: shown.bs.modalhidden.bs.modal イベントが起きる前)

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

.modal('show')

手動でモーダルを開きます。モーダルが実際に開く前に呼び出し元に帰ります。(例: shown.bs.modal イベントが起きる前)

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

.modal('hide')

手動でモーダルを閉じます。モーダルが実際に閉じる前に呼び出し元に帰ります。(例: hidden.bs.modal イベントが起きる前)

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

.modal('handleUpdate')

モーダルが開くときに、モーダルが左に行くようにスクロール・バーとの位置関係を再調整します。

モーダルが開いているときにモーダルの高さを変える場合にだけ必要になります。

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

イベント

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 このイベントは、モーダルが remote オプションを使っているコンテンツをロードしたときに起動されます。
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

ドロップダウン dropdown.js

このシンプルなプラグインで、ナビ・バーやタブやピルにドロップダウンメニューが追加できます。

ナビバー

ピル

データ属性か JavaScript で、ドロップダウンのプラグインは親リスト・アイテムの .open クラスを切り替えることで、閉じているコンテンツ(ドロップダウン・メニュー)を切り替えます。

モバイル・デバイスでは、開いているドロップダウンは、正しい iOS サポートの必要から、メニューの外側をタップしたときにドロップダウンを閉じるためにタップ領域として .dropdown-backdrop を追加します。このことは、モバイルでは開いているドロップダウンから異なるドロップダウン・メニューに切り替えるには、余分にタップが必要であることを意味します。

注意:data-toggle="dropdown" 属性は、アプリケーションのレベルでドロップダウン・メニューを閉じることに依存しているので、いつも使うことはいいアイデアです。

データ属性

ドロップダウンを切り替えるリンクやボタンに data-toggle="dropdown" を追加します。

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="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" aria-haspopup="true" role="button" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

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

JavaScript

JavaScript 経由でドロップダウンを呼びます:

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

data-toggle="dropdown" は、まだ必要です

ドロップダウンを JavaScript 経由で呼ぼうが代わりにデータ API を使おうが構いませんが、data-toggle="dropdown" はドロップダウンのトリガー要素にいつも列席させる必要があります。

ありません

$().dropdown('toggle')

指定されたナビ・バーやタブのあるナビのドロップダウン・メニューを切り替えます。

全てのドロップダウンのイベントは、.dropdown-menu の親要素に起動されます。

全てのドロップダウンのイベントは、その値がアンカー要素を切り替えている relatedTarget 属性を持っています。

イベントの型 説明
show.bs.dropdown このイベントは、インスタンス・メソッドが呼ばれたときすぐに起動します。
shown.bs.dropdown このイベントは、ドロップダウンが見えるようになったときに( CSS の切り替えが完了するのを待って)起動されます。
hide.bs.dropdown このイベントは、不可視にするインスタンス・メソッドが呼ばれたときにすぐ起動されます。
hidden.bs.dropdown このイベントは、ドロップダウンが見えなくなり終わったときに( CSS の切り替えが完了するのを待って)起動されます。
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

ナビ・バーでの例

ScrollSpy プラグインは、スクロール位置を元にナビの対象を自動的に更新します。下の領域をスクロールして、ナビ・バーとアクティブなクラスが変わるのをご覧ください。ドロップダウンのサブ・アイテムも同様にハイライトになります。

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

使い方

Bootstrap のナビが必要です

Scrollspy は現在、アクティブなリンクを正しくハイライトにするために Bootstrap のナビのコンポーネントの使用を必要とします。

解決可能な ID ターゲットが必要です

ナビ・バーのリンクは解決可能な ID ターゲットを持っていなければなりません。例えば、<a href="#home">home</a><div id="home"></div> のような DOM の中の何かに対応していなければなりません。

:visible なターゲット要素は無視されます

jQuery によって非 :visible になっているターゲット要素は無視され、対応するナビのアイテムがハイライトになることはありません。

相対位置が必要です

実装方法にかかわらず、scrollspy は対象にしている要素に position: relative; を使うことが必要です。たいていの場合、<body> のことです。

データ属性

簡単に scrollspy の動作をトップ・バーのナビゲーションに追加するには、対象にしたい要素(もっとも一般的には <body> でしょう)に data-spy="scroll" を追加します。そして、Bootstrap の .nav コンポーネントの親要素の ID やクラスに data-target 属性を追加します。

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

JavaScript

CSS に position: relative; を追加した後は、JavaScript で scrollspy を呼び出します:

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

メソッド

.scrollspy('refresh')

DOM に要素を追加したり削除したりするのに合わせて scrollspy を使う場合は、こんな風にリフレッシュ・メソッドを呼び出す必要があります:

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

オプション

オプションはデータ属性や JavaScript で渡せます。データ属性であれば、data-offset="" のようにオプション名を data- に追加します。

名称 デフォルト 説明
offset 数値 10 スクロール位置を計算するときのトップからのオフセットのピクセル値

イベント

イベント型 説明
activate.bs.scrollspy This event fires whenever a new item becomes activated by the scrollspy. このイベントは scrollspy によって新しいアイテムがアクティブになったらいつでも起動します。
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

切り替えられるタブ tab.js

タブの例

ドロップ・ダウン・メニューなどのローカル・コンテンツにペーン切り替え機能のあるダイナミックなタブをさっと追加します。

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

タブ・ナビゲーションを拡張します

このプラグインは、タブ可能な領域を追加するためにタブ・ナビゲーション・コンポーネントを拡張します。

使い方

JavaScript でタブ可能なタブができるようにします(それぞれのタブは個々にアクティブになる必要があります):

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

いくつかの方法で、個々のタブをアクティブにできます:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

マークアップ

JavaScript を書くことなく、要素にシンプルに data-toggle="tab"data-toggle="pill" を指定することで、タブやピルのナビゲーションをアクティブにできます。navnav-tabs クラスを ul タブに追加すると、Bootstrap にタブ・スタイルを適用し、navnav-pills クラスを追加すると、ピル・スタイルを適用します。

<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <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>

</div>

フェード効果

タブをフェード・インさせるには、.fade をそれぞれの .tab-pane に追加します。最初のタブ・ペインはまた、最初のコンテンツを正しくフェード・インさせるさせるために .in を指定されていなければなりません。

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

メソッド

$().tab

タブ要素とコンテンツのコンテナをアクティブにします。 タブは、DOM のコンテナ・ノードを対象とする data-targethref を指定されていなければなりません。

<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</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>

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

イベント

新しいタブが表示されるとき、以下の順序でイベントが起動されます:

  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 このイベントは、新しくタブが表示されるとき(そして前のタブが見えなくなるとき)に起動されます。event.targetevent.relatedTarget を使って、現在のアクティブなタブと新しくすぐにアクティブになるタブのそれぞれを対象とします。
hidden.bs.tab このイベントは、新しくタブが表示されているとき(そして前のタブが見えなくなっているとき)に起動されます。event.targetevent.relatedTarget を使って、前にアクティブだったなタブと新しくアクティブになったタブのそれぞれを対象とします。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

ツールチップ tooltip.js

Jason Frame によって書かれた優秀な jQuery.tipsy プラグインにインスパイアされたツールチップは、画像には依存せず、アニメーションには CSS3 を使っていて、ローカルのタイトル・ストレージのためのデータ属性という、更新されたバージョンです。

長さが0のタイトルのツールチップは絶対に表示されません。

ツールチップを見るには、下のリンクにポインターを合わせてください:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

静的なツールチップ

4つのオプションが利用できます:左、上、下、右に表示します。

4方向

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Opt-in な機能性

パフォーマンス上の理由から、ツールチップとポップオーバーのデータ API は Opt-in になっています。これは自分で初期化しなければいけないことを意味します。

1ページの全てのツールチップを初期化する1つの方法は、それらの data-toggle 属性で選択することです:

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

ボタン・グループと入力グループのツールチップは特別な設定が必要

.btn-group.input-group の要素にツールチップを使う場合は、(ツールチップが起動されたときに要素が大きくなりすぎたり角の丸みが失われたりするような)期待しない副作用を避けるために(下に記述した) container: 'body' オプションを明記しなければいけません。

非表示の要素にツールチップを表示しようとしない

対象要素が display: none; の場合に $(...).tooltip('show') を呼び出すと、ツールチップが正しくない位置に表示されます。

不可要素に対するツールチップはラッパー要素が必要

disabled.disabled 要素へツールチップを追加するには、<div> の内側に要素を置いて、代わりにその <div> にツールチップを適用します。

使い方

ツールチップ・プラグインは必要に応じてコンテンツとマークアップを生成し、デフォルトではツールチップはそのトリガーとなる要素の後ろに配置されます。

JavaScript でツールチップを起動します:

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

Markup

ツールチップに必要な記述は、ツールチップを配置したい HTML 要素の data 属性と title です。生成されたツールチップのマークアップは多少シンプルですが、位置(デフォルトではプラグインによって top に設定されます)を必要とします。

複数行リンク

複数行をラップするハイパーリンクにツールチップを追加したくなるかも知れません。ツールチップのプラグインのデフォルトの挙動は水平垂直に中央です。これを避けるためには、アンカーに white-space: nowrap; を追加します。

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

オプション

オプションはデータ属性か JavaScript で渡せます。データ属性の場合は、オプション名を data-animation="" のように data- に付加します。

名前 デフォルト 説明
animation ブール値 true ツールチップに CSS フェード切替を適用する
container 文字列 | false false

特定の要素にツールチップを適用する。例:container: 'body' このオプションは、特に、ウィンドウのリサイズ中にトリガー要素がツールチップから逃げてしまうのを防止して、トリガー要素の近くの一連のドキュメントの中にツールチップを位置させるのに役立ちます。

delay 数値 | オブジェクト 0

ツールチップを表示したり消したりする遅延時間(ms)-手動で起動されるタイプには適用できません。

数値が指定された場合は、遅延は表示するときと消すときの両方に適用されます。

オブジェクトの構造:delay: { "show": 500, "hide": 100 }

html ブール値 false ツールチップに HTML を挿入します。失敗した場合、jQuery の text メソッドが DOM にコンテンツを挿入するのに使われています。XSS 攻撃が心配であれば、テキストを使います。
placement 文字列 | 関数 'top'

ツールチップの一を指定します - top | bottom | left | right | auto。
「auto」が指定されると、動的にツールチップを再配置します。例えば、「auto left」を指定すると、ツールチップは可能であれば左に表示され、無理であれば右に表示されます。

配置の決定に関数が使われると、最初の引数としてツールチップの DOM ノード、2番目の引数として引き金となる要素の DOM ノード、とともに呼び出されます。this コンテキストは、ツールチップのインスタンスにセットされています。

selector 文字列 false selector が与えられると、ツールチップ・オブジェクトは指定された対象に代理されます。実際に、これは動的な HTML コンテンツにツールチップを追加することを可能にするために使われます。これ有益な例をご覧ください。
template 文字列 '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ツールチップが生成されたときに使うベース HTML を指定します。

ツールチップの title.tooltip-inner に注入されます。

.tooltip-arrow はツールチップの矢印になります。

最も外側のラッパー要素は .tooltip クラスを持っていなければなりません。

title 文字列 | 関数 ''

title 属性がない場合のデフォルトの値です。

関数が指定されると、その this はツールチップがアタッチされた要素を参照するように設定されて呼び出されます。

trigger 文字列 'hover focus' ツールチップの引き金を指定します - click | hover | focus | manual。複数の引き金を指定する場合は、スペースで区切ってください。
viewport 文字列 | オブジェクト { selector: 'body', padding: 0 }

この要素の範囲内でツールチップを維持します。例:viewport: '#viewport'{ "selector": "#viewport", "padding": 0 }

個々のツールチップのデータ属性

個々のツールチップのオプションは、上で説明したように、データ属性を使うことでも指定できます。

メソッド

$().tooltip(options)

ツールチップのハンドラーを要素のコレクションにアタッチします。

.tooltip('show')

要素のツールチップを可視化します。ツールチップが実際に表示される前に呼び出し元に戻ります(例:shown.bs.tooltip イベントが起きる前)。これはツールチップの「手動」起動が考慮されています。長さが0のツールチップは決して表示されません。

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

.tooltip('hide')

要素のツールチップを不可視にします。ツールチップが実際に非表示になる前に呼び出し元に戻ります(例:hidden.bs.tooltip イベントが起きる前)。これはツールチップの「手動」起動が考慮されています。

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

.tooltip('toggle')

要素のツールチップを切り替えます。ツールチップが実際に表示/非表示になる前に呼び出し元に戻ります(例:shown.bs.tooltiphidden.bs.tooltip イベントが起きる前)。これはツールチップの「手動」起動が考慮されています。

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

.tooltip('destroy')

要素のツールチップを非表示にして破棄します。(selector オプションを使って生成された)デリゲーションを使うツールチップは、子で引き金になる要素では個別に破棄できません。

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

イベント

イベントの型 説明
show.bs.tooltip このイベントは、show インスタンス・メソッドが呼ばれるとすぐに起動されます。
shown.bs.tooltip このイベントは、ツールチップが( CSS による切り替えが完了するのを待って)ユーザーに見えるようになったときに起動されます。
hide.bs.tooltip このイベントは、hide インスタンス・メソッドが呼ばれるとすぐに起動されます。
hidden.bs.tooltip このイベントは、ツールチップが( CSS による切り替えが完了するのを待って)ユーザーに見えなくなったときに起動されます。
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

ポップオーバー popover.js

iPad のように、コンテンツの小さなオーバーレイを追加して、要素に2次的な情報を提供します。

長さが0のタイトルやコンテンツのあるポップオーバーは決して表示されません。

プラグイン依存

ポップオーバーは、ツールチップのプラグイン が Bootstrap にインクルードされている必要があります。

オプト・イン機能性

パフォーマンス上の理由から、ツールチップとポップオーバーのデータ API はオプト・インになっています。これは、自分で初期化しなければならないことを意味します。

1ページ内の全てのポップオーバーを初期化する一つの方法は、data-toggle 属性でポップオーバーを選択することです:

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

ボタン・グループと入力グループのポップオーバーは特別な設定が必要

ポップオーバーを .btn-group.input-group の要素に使う場合は、(ポップオーバーが起動されたときに要素が大きくなったり角の丸みがなくなったりといった)期待しない副作用を避けるために、container: 'body' オプション(下記参照)を指定しなければなりません。

不可視要素にポップオーバーを表示しようとしない

対象要素が display: none; であるときに $(...).popover('show') を呼び出すと、ポップオーバーが誤った位置に配置されます。

不可要素のポップオーバーはラッパー要素が必要

disabled.disabled 要素にポップオーバーを追加するには、<div> の内側に要素を配置して、<div> にポップオーバーを適用してください。

複数行のリンク

複数行をラップしたハイパーリンクにポップオーバーを追加したくなることもあります。ポップオーバーのプラグインのデフォルトの挙動は、水平垂直に対して中心です。これを避けるためには、アンカーに white-space: nowrap; を追加してください。

静的なポップオーバー

4つのオプションが利用できます:上、右、下、左に配置されます。

ポップオーバー 上

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

ポップオーバー 右

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

ポップオーバー 下

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

ポップオーバー 左

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

ライブ・デモ

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

4方向

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

次のクリックで閉じる

ユーザーの次のクリックでポップオーバーを閉じるために focus トリガーを使います。

次のクリックで閉じるためには特定のマークアップが必要

いろんなブラウザやプラットフォームで正しく動作させるには、<button> タグではなくて <a> タグを使い、また、role="button"tabindex 属性をインクルードしなければなりません。

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

使い方

JavaScript でポップオーバーを可能にします:

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

オプション

オプションはデータ属性や JavaScript で渡せます。データ属性には、data-animation="" のようにオプション名を data- に付加します。

名前 デフォルト 説明
animation ブール値 true ポップオーバーに CSS のフェード切替を適用します
container 文字列 | false false

特定の要素にポップオーバーを付加します。例:container: 'body'。このオプションは、特に、ウィンドウがリサイズされている間にトリガー要素からポップオーバーが流れ去らないように、トリガー要素の近くのドキュメントが流れている中のポップオーバーの位置を決めるのに役立ちます。

content 文字列 | 関数 ''

data-content 属性がないときのデフォルトの content の値です。

関数が与えられた場合は、ポップオーバーが付加された要素に設定された this 参照で呼び出されます。

delay 数値 | オブジェクト 0

ポップオーバーを開いたり閉じたりするときの遅延(ms) - 手動トリガー型には適用されません

数値が与えられると、遅延は開閉の両方に適用されます

オブジェクトの構造:delay: { "show": 500, "hide": 100 }

html ブール値 false ポップオーバーに HTML を挿入します。もし false の場合は、jQuery の text メソッドが DOM にコンテンツを挿入するようになっています。XSS 攻撃を心配するなら、テキストを使います。
placement 文字列 | 関数 'right'

ポップオーバーの位置 - top | bottom | left | right | auto。
"auto"が指定されると、動的にポップオーバーを再配置します。例えば、もし配置が"auto left"であれば、ポップオーバーは可能であれば左に、そうでなければ右に表示されます。

関数が配置を決定することになっている場合、最初の引数にポップオーバーの DOM ノード、2番目の引数にトリガーとなる要素の DOM 要素で呼び出されます。this コンテキストはポップオーバーのインスタンスに設定されています。

selector 文字列 false selector が与えられると、ポップオーバー・オブジェクトは特定の対象に代理されます。実際に、これは動的 HTML コンテンツにポップオーバーを持たせることを可能にします。これ有益な例を見てください。
template 文字列 '<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 クラスを備えている必要があります。

title 文字列 | 関数 ''

title 属性がない場合のデフォルトの title の値です。

関数が指定されると、ポップオーバーが与えられた要素に設定された this 参照で呼び出されます。

trigger 文字列 'click' ポップオーバーの起動方法 - click | hover | focus | manual。スペースで区切って、複数のトリガーを渡せます。
viewport 文字列 | オブジェクト { selector: 'body', padding: 0 }

この要素の範囲内でポップオーバーを維持します。例:viewport: '#viewport' または { "selector": "#viewport", "padding": 0 }

個々のポップオーバーのデータ属性

個々のポップオーバーのオプションは、上で説明したように、データ属性を使うことで指定することもできます。

メソッド

$().popover(options)

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

.popover('show')

要素のポップオーバーを表示します。ポップオーバーが実際に表示される前に呼び出し元に戻ります(例:shown.bs.popover イベントが起きる前)。これはポップオーバーの「手動」起動を考慮しています。タイトルとコンテンツの長さが0のポップオーバーは決して表示されません。

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

.popover('hide')

要素のポップオーバーを非表示にします。ポップオーバーが実際に非表示になる前に呼び出し元に戻ります(例:hidden.bs.popover イベントが起きる前)。これはポップオーバーの「手動」起動を考慮しています。

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

.popover('toggle')

要素のポップオーバーを切り替えます。ポップオーバーが実際に表示されたり非表示になったりする前に呼び出し元に戻ります(例:shown.bs.popoverhidden.bs.popover イベントが起きる前)。これはポップオーバーの「手動」起動を考慮しています。

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

.popover('destroy')

要素のポップオーバーを非表示にして破棄します。( selector オプションを使って生成された)代理を使うポップオーバーは、子のトリガー要素で個別に破棄できません。

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

イベント

イベントの型 説明
show.bs.popover このイベントは、show インスタンス・メソッドが呼ばれたとき、すぐに発生します。
shown.bs.popover このイベントは、( CSS による切り替えが完了するのを待って)ユーザーにポップオーバーが見えるようになったときに発生します。
hide.bs.popover このイベントは、hide インスタンス・メソッドが呼ばれたとき、すぐに発生します。
hidden.bs.popover このイベントは、( CSS による切り替えが完了するのを待って)ユーザーにポップオーバーに見えないようになったときに発生します。
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

アラート・メッセージ alert.js

アラートの例

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

.close ボタンを使うときは、.alert-dismissible の最初の子でなければならず、マークアップの中にこれより前にテキスト・コンテンツがあってはいけません。

使い方

data-dismiss="alert" を閉じるボタンに追加するだけで、自動的にアラートを閉じる機能を実装できます。アラートを閉じるは DOM から取り除かれます。

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

アラートに閉じるアニメーションをさせるには、.fade.in クラスが適用されていることを確認してください。

メソッド

$().alert()

アラートに data-dismiss="alert" 属性のある子要素のクリック・イベントをリッスンさせます。(データ API の自動初期化を使っている場合は必要ありません)

$().alert('close')

DOM から取り除くことでアラートを閉じます。要素に .fade.in クラスがある場合は、アラートは取り除かれる前にフェード・アウトします。

イベント

Bootstrap のアラート・プラグインは、アラート機能をフックするための少数のイベントを公開しています。

イベントの型 説明
close.bs.alert このイベントは、close インスタンス・メソッドが呼ばれたときにすぐに発生します。
closed.bs.alert このイベントは、アラートが閉じるときに( CSS による切り替えが完了するのを待って)すぐに発生します。
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

ボタン button.js

ボタンではより多くの事ができます。ツールバーのようにコンポーネントのためにボタンの状態を制御したり、ボタン・グループを作ったりできます。

ステートフル

ボタンにロード中の状態を使うには data-loading-text="Loading..." を追加します。

どちらでもお好みのステートを使ってください!

このデモンストレーションのために、data-loading-text$().button('loading') を使っていますが、これが使える唯一のステートではありません。この下の $().button(string) ドキュメントの中をご覧ください

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

単独切り替え

1つのボタンをアクティブに切り替えるには、data-toggle="button" を追加します。

事前に切り替えられたボタンには .activearia-pressed="true" が必要

事前に切り替えられたボタンには、.active クラスと aria-pressed="true" 属性を自分で button に追加しなければなりません。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

チェックボックス/ラジオボタン

チェックボックスやラジオボタン入力のある .btn-groupdata-toggle="buttons" を追加すると、それぞれで切り替えることが可能になります。

事前に選択状態になっているオプションには .active が必要

事前に選択状態になっているオプションには、.active クラスをその入力の label に自分で追加しなければなりません。

見た目でチェックされている状態はクリックでのみ更新

チェックボックス・ボタンのチェックされている状態が、ボタンの click イベントの起動を伴わずに更新されている場合(例:<input type="reset"> 経由であったり、入力の checked プロパティの設定を経由する場合)は、自分で入力の label.active クラスを切り替える必要があります。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

メソッド

$().button('toggle')

押されている状態を切り替えます。ボタンをアクティブになったような外観にします。

$().button('reset')

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

$().button(string)

テキストを定義されたテキストの状態に交換します。

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

折り畳み collapse.js

動作を簡単に切り替える少数のクラスを利用する柔軟なプラグイン

プラグイン依存

折り畳みはお使いの Bootstrap に 切り替えプラグインが含まれている必要があります。

下のボタンをクリックして、クラスを変更することで他の要素を表示したり非表示にしたりしてみてください:

  • .collapse は、コンテンツを非表示にします
  • .collapsing は、切り替えの間に適用されます
  • .collapse.in は、コンテンツを表示します

href 属性のあるリンクや data-target 属性のあるボタンが使えます。どちらのケースも、data-toggle="collapse" が必要です。

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

アコーディオンの例

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<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 data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

.list-group.panel-body をスワップ・アウトすることもも可能です。

  • Bootply
  • One itmus ac facilin
  • Second eros

拡げたり折り畳んだりを利用可能にする

コントロール要素に aria-expanded を追加するようにしてください。この属性は、読み上げソフトや同様の支援技術に、折り畳める要素の現在の状態を明示的に宣言します。デフォルトで折り畳める要素が閉じている場合は、aria-expanded="false" という値を持つべきです。in クラスを使ってデフォルトで折り畳める要素を開くように設定している場合は、コントロールに aria-expanded="true" を設定してください。折り畳める要素が開いている場合でも閉じている場合でも、プラグインは自動的にこの属性を切り替えます。

それに加えて、コントロール要素が1つの折り畳める要素を対象にしている場合 - 例えば、data-target 属性が id セレクタを指している場合 - は、折り畳める要素の id を含むコントロール要素に aria-controls 属性を追加してもかまいません。最近の読み上げソフトや同様の支援技術は、この属性を使って折り畳める要素自身を直接ナビゲートするために追加でショートカットを提供しています。

使い方

折り畳みのプラグインはヘビーな仕事をこなすのに少数のクラスを利用します:

  • .collapse コンテンツを隠します
  • .collapse.in コンテンツを表示します
  • .collapsing 切替が始まるときに追加され、切替が終わると取り除かれます

これらのクラスは component-animations.less で見ることができます。

データ属性

data-toggle="collapse"data-target を、自動的に折り畳める要素のコントロールに割り当てるだけです。data-target 属性は、折り畳みを適用する CSS セレクタを引き受けます。collapse クラスを折り畳める要素に追加するようにしてください。デフォルトで開きたい場合は、追加クラス in を追加してください。

折り畳めるコントロールにアコーディオンのようなグループ管理を追加するには、データ属性 data-parent="#selector" を追加します。これは動作中のデモを参照してください。

JavaScript

手動で可能にする:

$('.collapse').collapse()

オプション

オプションは、データ属性か JavaScript で渡せます。データ属性には、data-parent="" のようにオプション名を data- につけてください。

名前 デフォルト値 説明
parent セレクタ false セレクタが与えられた場合、特定の親の下の全ての折り畳める要素は、この折り畳めるアイテムが表示されたときに閉じられます。(伝統的なアコーディオンの挙動に似ています - これは panel クラスに依存しています)
toggle ブール値 true 発動している折り畳み要素を切り替えます

メソッド

.collapse(options)

コンテンツを折り畳める要素としてアクティブにします。オプションで object オプションを受け入れます。

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

.collapse('toggle')

折り畳める要素の表示/非表示を切り替えます。

.collapse('show')

折り畳める要素を表示します。

.collapse('hide')

折り畳める要素を非表示にします。

Events

Bootstrap の折り畳みクラスは、折り畳み機能をフックする少数のイベントを公開しています。

イベントの型 説明
show.bs.collapse このイベントは、show インスタンス・メソッドが呼ばれるとすぐに起動します。
shown.bs.collapse このイベントは、折り畳み要素が可視になったときに( CSS による切り替えが完了するのを待って)起動されます。
hide.bs.collapse このイベントは、hide メソッドが呼ばれるとすぐに起動します。
hidden.bs.collapse このイベントは、折り畳み要素が不可視になったときに( CSS による切り替えが完了するのを待って)起動されます。
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

カルーセル carousel.js

メリーゴーランドのように、要素を循環させるスライドショー・コンポーネントです。ネストしたカルーセルはサポートされていません。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

オプションのキャプション

.item.carousel-caption 要素で、スライドにキャプションを簡単に追加できます。その中にオプションの HTML を配置するだけで、自動的に位置ぞろえされて整形されます。

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

複数のカルーセル

カルーセルは、カルーセルが正しく機能するように制御するために、いちばん外側のコンテナ( .carousel )の id の使用を必要とします。複数のカルーセルを追加する場合やカルーセルの id を変更する場合は、関連するコントロールを更新するようにしてください。

データ属性

データ属性を使えば簡単にカルーセルの位置を制御できます。data-slideprevnext キーワードを受け取って、スライドの位置を現在位置から相対的に変更します。あるいは、data-slide-to を使って、カルーセルに data-slide-to="2" といった値を渡して、スライドの位置を 0 から始まる特定のインデックスにシフトします。

data-ride="carousel" 属性は、ページのロード時のアニメーション開始としてカルーセルをマークするのに使われます。同じカルーセルの(余分で不必要な)明示的な JavaScript による初期化と一緒に使うことはできません。

JavaScript

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

$('.carousel').carousel()

オプションはデータ属性や JavaScript で渡せます。データ属性では、 data-interval="" のように、data- にオプション名を追加します。

名前 デフォルト 説明
interval 数値 5000 アイテムを自動的に循環させる遅延時間。false の場合は、カルーセルは自動的に循環しません。
pause 文字列 "hover" マウスが入ってきたときのカルーセルの循環をポーズして、マウスが去ったときにカルーセルの循環を再開する。
wrap ブール値 true カルーセルを連続して循環させるか、強制停止させるか。
keyboard ブール値 true キーボード・イベントがおきたときにカルーセルが反応すべきかどうか

.carousel(options)

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

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

.carousel('cycle')

カルーセルのアイテムを左から右へ循環させます。

.carousel('pause')

カルーセルのアイテムの循環を停止させます。

.carousel(number)

カルーセルを特定のフレーム(配列のように0から)に循環させます。

.carousel('prev')

ひとつ前のアイテムに循環させます。

.carousel('next')

次のアイテムに循環させます。

Bootstrap カルーセルのクラスは、カルーセルの機能をフックするために2つのイベントを公開しています。

両方のイベントは以下の追加プロパティを持っています:

  • direction: カルーセルがスライドする方向( "left""right" )。
  • relatedTarget: アクティブなアイテムとしてスライドさせられる場所である DOM 要素。

全てのカルーセルのイベントは、カルーセル自身に起動されます(例:<div class="carousel"> で)。

イベントの型 説明
slide.bs.carousel このイベントは、slide インスタンス・メソッドが呼び出されるとすぐに起動されます。
slid.bs.carousel このイベントは、カルーセルがスライドの切り替えを完了すると起動されます。
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

張り付き affix.js

張り付きプラグインは、position: sticky; にあるエフェクトをまねて、position: fixed; のオンとオフを切り替えます。右側のサブ・ナビゲーションは張り付きプラグインのライブ・デモです。


使い方

張り付きプラグインは、データ属性か、自分で JavaScriptによって手動で使います。どちらの場合も、張り付きコンテンツの位置と幅を CSS で指定しなければなりません。

CSS による位置指定

張り付きプラグインは、それぞれが特定の状態を意味する3つのクラスを切り替えます:.affix.affix-top.affix-bottom.affix 上の position: fixed; の例外とともに、自分でこれらのクラスが(このプラグインから独立して)実際の位置を扱えるようにスタイルを規定しなければなりません。

張り付きプラグインがどのように動作するかと言うと:

  1. 最初に、プラグインはその要素が最も上に位置することを示すために .affix-top を付加します。この時点では、CSS による位置設定は必要ありません。
  2. 張り付きたい要素をスクロールして過ぎると実際の張り付きが起動されます。これは、.affix.affix-top に置き換えて、( Bootstrap の CSS によって規定された)position: fixed; を設定します。
  3. 最下部にオフセットが定義されている場合は、スクロールして過ぎると .affix.affix-bottom に置き換わります。オフセットはオプションなので、設定は適切な CSS で設定する必要があります。この場合、必要であれば position: absolute; を付加します。プラグインは、そこからどこに要素を配置させるかを決めるために、データ属性や JavaScript のオプションを使用します。

以下のオプションの使い方のどちらかを CSS に設定して、以上の手順に従ってください。

データ属性

簡単に張り付きの挙動を要素に追加するには、見張りたい要素に data-spy="affix" を追加するだけです。いつ要素の固定を切り替えるかを定義するにはオフセットを使います。

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

JavaScript

JavaScript で張り付きプラグインを呼び出します:

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

オプション

オプションは、データ属性か JavaScript で渡せます。データ属性では、data-offset-top="200" のように data- にオプション名を付加します。

名前 デフォルト値 説明
offset 数値 | 関数 | オブジェクト 10 スクロール位置を算出するときの画面からのオフセットのピクセル値。ひとつだけ値が指定された場合は、オフセットは最上部と最下部の両方向に適用されます。それぞれ指定するには、最上部と最下部のオフセットに、offset: { top: 10 } とか offset: { top: 10, bottom: 5 } のようにオブジェクトを指定するだけです。動的にオフセットを計算する必要がある場合は関数を使います。
target セレクタ | ノード | jQuery 要素 window オブジェクト 張り付く対象要素を特定します。

イベント

Bootstrap の張り付きプラグインは、張り付く機能をフックするためにいくつかのイベントを公開しています。

イベントの型 説明
affix.bs.affix このイベントは、要素が張り付かれる前に、すぐに起動されます。
affixed.bs.affix このイベントは、要素が張り付かれた後に起動されます。
affix-top.bs.affix このイベントは、要素が最上部に張り付かれる前に、すぐに起動されます。
affixed-top.bs.affix このイベントは、要素が最上部に張り付かれた後に起動されます。
affix-bottom.bs.affix このイベントは、要素が最下部に張り付かれる前に、すぐに起動されます。
affixed-bottom.bs.affix このイベントは、要素が最下部に張り付かれた後に起動されます。