概要

個別またはコンパイル済み

プラグインは個別に (Bootstrap の個々の*.jsファイルを使用して)、または一度に (bootstrap.jsまたは縮小されたを使用して) 含めることができますbootstrap.min.js。

コンパイル済み JavaScript の使用

と の両方bootstrap.jsにbootstrap.min.js、すべてのプラグインが 1 つのファイルに含まれています。1 つだけ含めます。

プラグインの依存関係

一部のプラグインおよび CSS コンポーネントは、他のプラグインに依存しています。プラグインを個別に含める場合は、ドキュメントでこれらの依存関係を確認してください。また、すべてのプラグインは jQuery に依存していることにも注意してください (つまり、プラグイン ファイルの前にjQuery を含める必要があります)。どのバージョンの jQuery がサポートされているかについては、当社までお問い合わせください。bower.json

データ属性

すべての Bootstrap プラグインは、JavaScript を 1 行も記述することなく、マークアップ API を介して純粋に使用できます。これは Bootstrap のファースト クラス API であり、プラグインを使用する際に最初に考慮する必要があります。

とはいえ、状況によっては、この機能をオフにすることが望ましい場合があります。そのため、 で名前空間が付けられたドキュメントのすべてのイベントのバインドを解除することで、データ属性 API を無効にする機能も提供しますdata-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

競合なし

他の UI フレームワークで Bootstrap プラグインを使用する必要がある場合があります。このような状況では、名前空間の競合が発生することがあります。これが発生し.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
})

バージョン番号

VERSIONBootstrap の各 jQuery プラグインのバージョンは、プラグインのコンストラクターのプロパティを介してアクセスできます。たとえば、ツールチップ プラグインの場合:

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

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

JavaScript が無効になっている場合、Bootstrap のプラグインは特に適切にフォールバックしません。この場合のユーザー エクスペリエンスが気になる場合は<noscript>、状況 (および JavaScript を再度有効にする方法) をユーザーに説明するために使用するか、独自のカスタム フォールバックを追加してください。

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

Bootstrap は、Prototype や jQuery UI などのサードパーティの JavaScript ライブラリを公式にはサポートしていません。名前空間付きのイベントにもかかわらず.noConflict、独自に修正する必要がある互換性の問題がある場合があります。

トランジションtransition.js

トランジションについて

シンプルなトランジション エフェクトの場合はtransition.js、他の JS ファイルと一緒に 1 回インクルードします。コンパイル済み (または圧縮済み) を使用している場合はbootstrap.js、これを含める必要はありません。既に存在します。

中身は

Transition.js は、イベントの基本的なヘルパーでtransitionEndあり、CSS トランジション エミュレーターでもあります。他のプラグインが CSS トランジションのサポートをチェックし、ハングしているトランジションをキャッチするために使用されます。

トランジションの無効化

次の JavaScript スニペットを使用して、トランジションをグローバルに無効にすることがtransition.jsできbootstrap.jsますbootstrap.min.js。

$.support.transition = false

モーダルmodal.js

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

複数の開いているモーダルはサポートされていません

別のモーダルがまだ表示されているときにモーダルを開かないでください。一度に複数のモーダルを表示するには、カスタム コードが必要です。

モーダル マークアップの配置

他のコンポーネントがモーダルの外観や機能に影響を与えないように、モーダルの HTML コードは常にドキュメントの最上位に配置するようにしてください。

モバイル デバイスに関する注意事項

モバイル デバイスでモーダルを使用する場合、いくつかの注意事項があります。詳細については、ブラウザのサポート ドキュメントを参照してください。

HTML5 がセマンティクスを定義する方法により、autofocusHTML 属性は Bootstrap モーダルでは効果がありません。同じ効果を得るには、カスタム JavaScript を使用します。

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

例

静的な例

ヘッダー、本文、およびフッターの一連のアクションを含むレンダリングされたモーダル。

<div class="modal fade" tabindex="-1" 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="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">
  <div class="modal-dialog" role="document">
    <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"とに必ず追加してください。aria-labelledby="...".modalrole="document".modal-dialog

さらに、モーダル ダイアログの説明をaria-describedbyon で指定でき.modalます。

YouTube 動画の埋め込み

モーダルに YouTube 動画を埋め込むには、再生を自動的に停止するなど、Bootstrap にはない追加の JavaScript が必要です。詳細については、このスタック オーバーフローの投稿を参照してください。

オプションサイズ

モーダルには 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">
  <div class="modal-dialog modal-lg" role="document">
    <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">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

アニメーションを削除

フェードインして表示するのではなく、単に表示するモーダルの場合.fadeは、モーダル マークアップからクラスを削除します。

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

グリッドシステムの使用

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

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <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="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 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およびHTMLdata-*属性を(おそらくjQuery 経由で)使用して、クリックされたボタンに応じてモーダルの内容を変更します。の詳細については、モーダル イベントのドキュメントを参照してくださいrelatedTarget。

...その他のボタン... 
<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">
  <div class="modal-dialog" role="document">
    <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 を介して、非表示のコンテンツをオンデマンドで切り替えます。また、デフォルトのスクロール動作をオーバーライドする に追加.modal-openし、モーダルの外側をクリックしたときに表示されたモーダルを閉じるためのクリック領域を提供する を生成します。<body>.modal-backdrop

データ属性経由

JavaScript を書かずにモーダルを有効にします。特定のモーダルを切り替え対象にするために、 ordata-toggle="modal"とともに、ボタンなどのコントローラー要素に設定します。data-target="#foo"href="#foo"

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

JavaScript 経由

myModalJavaScript の 1 行でid を使用してモーダルを呼び出します。

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

オプション

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

名前 タイプ デフォルト 説明
背景 ブール値または文字列'static' 真実 モーダル背景要素が含まれています。staticまたは、クリック時にモーダルを閉じない背景を指定します。
キーボード ブール値 真実 エスケープキーが押されたときにモーダルを閉じます
見せる ブール値 真実 初期化時にモーダルを表示します。
リモート 道 間違い

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

リモート URL が指定されている場合、コンテンツはjQuery のメソッドを介して1 回読み込まれ、 divloadに挿入されます。.modal-contentdata-api を使用している場合は、代わりにhref属性を使用してリモート ソースを指定することもできます。この例を以下に示します。

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

メソッド

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

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

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

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

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

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

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

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

スクロールバーが表示された場合に備えて、モーダルの位置を再調整して、モーダルが左にジャンプするようにします。

モーダルが開いている間にモーダルの高さが変わる場合にのみ必要です。

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

ドロップダウン dropdown.js

このシンプルなプラグインを使用して、ナビゲーション バー、タブ、ピルなど、ほぼすべてのものにドロップダウン メニューを追加します。

ナビゲーションバー内

丸薬内

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

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

注: この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" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

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

JavaScript 経由

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

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

data-toggle="dropdown"まだ必要

JavaScript を介してドロップダウンを呼び出すか、代わりに data-api を使用するかに関係なく、data-toggle="dropdown"常にドロップダウンのトリガー要素に存在する必要があります。

なし

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

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

すべてのドロップダウン イベントにはrelatedTargetプロパティがあり、その値はトグル アンカー要素です。

イベントタイプ 説明
show.bs.dropdown このイベントは、show インスタンス メソッドが呼び出されるとすぐに発生します。
shown.bs.dropdown このイベントは、ドロップダウンがユーザーに表示されるようになったときに発生します (CSS トランジションが完了するのを待ちます)。
hide.bs.ドロップダウン このイベントは、hide インスタンス メソッドが呼び出されるとすぐに発生します。
hidden.bs.ドロップダウン このイベントは、ドロップダウンがユーザーから非表示にされたときに発生します (CSS トランジションが完了するのを待ちます)。 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

ナビゲーションバーの例

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

@太い

広告レギンス キーター、ブランチ id アート パーティー ドロア 労働。彼らが売り切れる前に、Pitchfork yr enim lo-fi。Tumblrの農場から食卓への自転車の権利は何でも。アニム・ケフィヤ・カルレスのカーディガン。Velit seitan mcsweeney のフォト ブース 3 ウルフ ムーン イルレ。コスビー セーター ロモ ジーンズ ショートパンツ、ウィリアムズバーグ パーカー ミニム qui あなたはおそらくそれらについて聞いたことがないでしょう. ニヒルは刺青を入れたアキュマス、信頼できる皮肉なバイオディーゼル ケフィーヤの職人ウラムコの結果です。

@mdo

Veniam marfa 口ひげスケート ボード、adipisicing fugiat velit 熊手のひげ。フリーガンのひげアリクア キューピダット マックウィーニーのヴェロ。Cupidatat four loko nisi, ea helvetica nulla carles. タトゥーの入ったコスビー セーターのフード トラック、mcsweeney の quis non freegan ビニール。ローファイ ウェス アンダーソン +1 仕立て屋。カルレスの非審美的な運動は、ジェントリフィケーションです。ブルックリンの adipisicing クラフト ビール vice keytar deserunt.

1

Occaecat コモド aliqua delectus。Fap クラフト ビール deserunt スケート ボード ea。Lomo の自転車の権利は banh mi を adipisicing、velit ea sunt は次のレベルの locavore シングルオリジン コーヒーをマグナ veniam で提供します。ハイライフIDビニール、エコーパークコンセクアットキアリキップバインミーピッチフォーク。Vero VHS est adipisicing. Consectetur nisi DIY ミニムメッセンジャーバッグ。Cred ex in、持続可能な delectus consectetur ファニー パック iPhone。

2

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 ブログ、カルパ メッセンジャー バッグ マーファ エニウェア デレクタス フード トラック。Sapiente のシンセ ID は仮定だ。Locavore sed helvetica cliche 皮肉、あなたがおそらく聞いたことのないサンダーキャットは、グルテンフリーのローファイファップアリクイップを結果としてもたらします. 彼らが売り切れる前に労働者のエリートの場所、テリー・リチャードソンのプロイデント・ブランチ、ネス・コスビー・セーター・パリアトゥール・ケフィーヤ・ウット・ヘルベチカ・アーティザン. カーディガン クラフトビール セイタン レディメイド ヴェリット。VHS シャンブレーラボラリス tempor veniam. アニメーション mollit minim commodo ullamco thundercats.

使用法

Bootstrap nav が必要

現在、Scrollspy では、アクティブなリンクを適切に強調表示するために、 Bootstrap nav コンポーネントを使用する必要があります。

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

Navbar リンクには、解決可能な ID ターゲットが必要です。たとえば、 a<a href="#home">home</a>は DOM のようなものに対応している必要があります<div id="home"></div>。

非:visibleターゲット要素は無視されました

:visiblejQuery に準拠していないターゲット要素は無視され、対応するナビゲーション アイテムが強調表示されることはありません。

相対位置が必要

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

データ属性経由

scrollspy 動作をトップバー ナビゲーションに簡単に追加するdata-spy="scroll"には、スパイしたい要素 (最も一般的には<body>) に追加します。次に、Bootstrapコンポーネントdata-targetの親要素の ID またはクラスを持つ属性を追加します。.nav

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

scrollspy を DOM からの要素の追加または削除と組み合わせて使用​​する場合、次のように refresh メソッドを呼び出す必要があります。

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

オプション

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

名前 タイプ デフォルト 説明
オフセット 番号 10 スクロールの位置を計算するときに上からオフセットするピクセル。

イベント

イベントタイプ 説明
activate.bs.scrollspy このイベントは、スクロールスパイによって新しいアイテムがアクティブになるたびに発生します。 
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

切り替え可能なタブtab.js

タブの例

クイックで動的なタブ機能を追加して、ドロップダウン メニューを介しても、ローカル コンテンツのペイン間を遷移します。ネストされたタブはサポートされていません。

おそらく聞いたことのない未加工のデニム ジーンズショーツ オースティン。ネスカント 豆腐 スタンプタウン アリクア、レトロ シンセ マスター クレンズ。口ひげのクリシェ テンポ、ウィリアムズバーグ カルレス ビーガン ヘルベチカ。Reprehenderit ブッチャー レトロ クーフィーヤ ドリームキャッチャー シンセ。Cosby セーター eu banh mi, qui irure terry Richardson ex squid. アリクイップは、サルビア・チルムのiPhoneに置きます。Seitan aliquip quis カーディガン アメリカン アパレル、ブッチャー 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 を介してタブ可能なタブを有効にします (各タブは個別に有効にする必要があります):

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

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

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

マークアップ

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

<div>

  <!-- 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-targetまたはが必要です。href上記の例では、タブは属性<a>を持つです。data-toggle="tab"

.tab('show')

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

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

イベント

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

  1. hide.bs.tab(現在アクティブなタブ上)
  2. show.bs.tab（表示されるタブで）
  3. hidden.bs.tabhide.bs.tab(前のアクティブなタブで、イベントと同じもの)
  4. shown.bs.tabshow.bs.tab(新しくアクティブになったばかりのタブで、イベントと同じもの)

タブがまだアクティブになっていない場合、hide.bs.tabおよびhidden.bs.tabイベントは発生しません。

イベントタイプ 説明
show.bs.tab このイベントは、タブの表示時に発生しますが、新しいタブが表示される前です。と を使用event.targetしevent.relatedTargetて、それぞれアクティブなタブと以前のアクティブなタブ (利用可能な場合) をターゲットにします。
表示された.bs.tab このイベントは、タブが表示された後にタブ表示で発生します。と を使用event.targetしevent.relatedTargetて、それぞれアクティブなタブと以前のアクティブなタブ (利用可能な場合) をターゲットにします。
hide.bs.tab このイベントは、新しいタブが表示される (したがって、以前のアクティブなタブが非表示になる) ときに発生します。と を使用event.targetしevent.relatedTargetて、それぞれ現在アクティブなタブと新しい間もなくアクティブになるタブをターゲットにします。
hidden.bs.tab このイベントは、新しいタブが表示された後に発生します (したがって、以前のアクティブなタブは非表示になります)。と を使用event.targetしevent.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 を使用し、ローカル タイトル ストレージにデータ属性を使用します。

タイトルの長さがゼロのツールチップは表示されません。

例

以下のリンクにカーソルを合わせると、ツールヒントが表示されます。

タイト パンツ ネクスト レベルのケフィーヤ、おそらく聞いたことがないでしょう。フォトブースヒゲ生デニム活版ヴィーガンメッセンジャーバッグスタンプタウン。農場から食卓までのセイタン、mcsweeney's fixie の持続可能なキノア 8 ビット アメリカン アパレルには、テリー リチャードソンのビニール シャンブレーがあります。ビアード スタンプタウン、カーディガン banh mi lomo サンダーキャッツ。豆腐のバイオディーゼル ウィリアムズバーグ マーファ、フォーロコ マックウィーニーのクレンズ ビーガン シャンブレー。キーターが何であれ、本当に皮肉な職人、シーンスター、農場から食卓までのバンクシー、オースティンのツイッター、フリーガンの信条、生のデニム、シングルオリジンのコーヒーのバイラル。

静的ツールチップ

上揃え、右揃え、下揃え、左揃えの 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>

オプトイン機能

パフォーマンス上の理由から、Tooltip と Popover のデータ API はオプトインです。つまり、自分で初期化する必要があります。

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

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

使用法

ツールチップ プラグインは、オンデマンドでコンテンツとマークアップを生成し、デフォルトではトリガー要素の後にツールチップを配置します。

JavaScript を介してツールチップをトリガーします。

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

マークアップ

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

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

複数行リンク

複数の行を折り返すハイパーリンクにツールチップを追加したい場合があります。ツールチップ プラグインのデフォルトの動作は、水平方向と垂直方向の中央に配置することです。white-space: nowrap;これを回避するには、アンカーに追加してください。

ボタン グループ、入力グループ、テーブルのツールチップには特別な設定が必要です

.btn-groupまたは内の要素.input-group、またはテーブル関連の要素 ( <td>、<th>、<tr>、<thead>、) でツールチップを使用する場合<tbody>、不要な副作用 (要素の幅が広くなる、および/または、ツールチップがトリガーされたときに丸みを帯びた角が失われます)。<tfoot>container: 'body'

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

$(...).tooltip('show')ターゲット要素があるときに呼び出すdisplay: none;と、ツールチップが正しく配置されません。

キーボードおよび支援技術ユーザー向けのアクセス可能なツールチップ

キーボードでナビゲートするユーザー、特に支援技術のユーザーの場合、リンク、フォーム コントロール、または属性を持つ任意の要素など、キーボードでフォーカスできる要素にのみツールヒントを追加する必要がありtabindex="0"ます。

無効な要素のツールチップにはラッパー要素が必要です

disabledor.disabled要素にツールチップを追加するには、要素を a 内に配置し、代わり<div>にツールチップをそれに適用します<div>。

オプション

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

名前 タイプ デフォルト 説明
アニメーション ブール値 真実 ツールチップに CSS フェード トランジションを適用する
容器 文字列 | 間違い 間違い

ツールチップを特定の要素に追加します。例: container: 'body'. このオプションは、トリガー要素の近くのドキュメントの流れにツールヒントを配置できるという点で特に便利です。これにより、ウィンドウのサイズ変更中にトリガー要素からツールヒントが浮かび上がるのを防ぐことができます。
遅れ 数 | 物体 0

ツールチップの表示と非表示の遅延 (ミリ秒) - 手動トリガー タイプには適用されません

数値が指定されている場合、表示/非表示の両方に遅延が適用されます

オブジェクト構造は次のとおりです。delay: { "show": 500, "hide": 100 }
html ブール値 間違い HTML をツールチップに挿入します。false の場合、jQuery のtextメソッドを使用してコンテンツを DOM に挿入します。XSS 攻撃が心配な場合は、テキストを使用してください。
配置 文字列 | 関数 '上'

ツールチップの配置方法 - トップ | ボトム | 左 | 左 | 右 | 自動。
「auto」を指定すると、ツールチップの向きが動的に変更されます。たとえば、配置が「自動左」の場合、ツールチップは可能な場合は左に表示され、そうでない場合は右に表示されます。

関数を使用して配置を決定する場合、ツールチップ DOM ノードを最初の引数として呼び出し、トリガー要素の DOM ノードを 2 番目の引数として呼び出します。thisコンテキストはツールチップ インスタンスに設定されます。
セレクタ ストリング 間違い セレクターが提供されている場合、ツールチップ オブジェクトは指定されたターゲットに委譲されます。実際には、これは動的 HTML コンテンツにツールチップを追加できるようにするために使用されます。これと有益な例を参照してください。
テンプレート ストリング '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ツールチップの作成時に使用するベース HTML。

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

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

最も外側のラッパー要素には.tooltipクラスが必要です。
題名 文字列 | 関数 ''

title属性が存在しない場合のデフォルトのタイトル値。

関数が指定されている場合thisは、ツールチップが添付されている要素に設定された参照で呼び出されます。
引き金 ストリング 「ホバーフォーカス」 ツールチップのトリガー方法 - クリック | ホバー | フォーカス | マニュアル。複数のトリガーを渡すことができます。スペースで区切ります。manual他のトリガーと組み合わせることはできません。
ビューポート 文字列 | オブジェクト | 関数 { セレクター: '本体', パディング: 0 }

この要素の境界内にツールチップを保持します。例:viewport: '#viewport'または{ "selector": "#viewport", "padding": 0 }

関数が指定されている場合、その関数は、トリガー要素の DOM ノードを唯一の引数として呼び出されます。thisコンテキストはツールチップ インスタンスに設定されます。

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

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

メソッド

$().tooltip(options)

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

.tooltip('show')

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

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

.tooltip('hide')

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

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

.tooltip('toggle')

要素のツールチップを切り替えます。ツールチップが実際に表示または非表示になる前 (つまり、orイベントが発生する前)に呼び出し元に戻ります。これは、ツールチップの「手動」トリガーと見なされます。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 トランジションが完了するのを待ちます)。
挿入された.bs.tooltip このイベントはshow.bs.tooltip、ツールヒント テンプレートが DOM に追加されたときに、イベントの後に発生します。 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

ポップオーバーpopover.js

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

タイトルとコンテンツの両方が長さ 0 のポップオーバーは表示されません。

プラグインの依存関係

ポップオーバーには、お使いのバージョンの Bootstrap にツールチップ プラグインが含まれている必要があります。

オプトイン機能

パフォーマンス上の理由から、Tooltip と Popover のデータ API はオプトインです。つまり、自分で初期化する必要があります。

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

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

ボタン グループ、入力グループ、テーブルのポップオーバーには特別な設定が必要です

.btn-groupまたは内の要素.input-group、またはテーブル関連の要素 ( <td>、<th>、<tr>、<thead>、 )<tbody>でポップオーバーを使用する<tfoot>場合は、オプションcontainer: 'body'(以下に記載) を指定して、不要な副作用 (要素の幅が広がるなど) を回避する必要があります。または、ポップオーバーがトリガーされると丸みを帯びた角が失われます)。

非表示の要素にポップオーバーを表示しようとしないでください

$(...).popover('show')ターゲット要素があるときに呼び出すdisplay: none;と、ポップオーバーが正しく配置されません。

無効な要素のポップオーバーにはラッパー要素が必要です

disabledor.disabled要素にポップオーバーを追加するには、要素を a 内に配置<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>

四方

<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トリガーを使用して、ユーザーが次にクリックしたときにポップオーバーを閉じます。

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

クロスブラウザーおよびクロスプラットフォームで適切に動作させるには、 タグではなく タグを使用する必要<a>があります。また、および属性<button>も含める必要があります。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-データ属性の場合、オプション名をのようにに追加しますdata-animation=""。

名前 タイプ デフォルト 説明
アニメーション ブール値 真実 ポップオーバーに CSS フェード トランジションを適用する
容器 文字列 | 間違い 間違い

ポップオーバーを特定の要素に追加します。例: container: 'body'. このオプションは、ドキュメントのフロー内でトリガー要素の近くにポップオーバーを配置できるという点で特に便利です。これにより、ウィンドウのサイズ変更中にポップオーバーがトリガー要素から離れてしまうのを防ぐことができます。
コンテンツ 文字列 | 関数 ''

data-content属性が存在しない場合のデフォルトのコンテンツ値。

関数が指定されている場合this、ポップオーバーがアタッチされている要素に設定された参照で呼び出されます。
遅れ 数 | 物体 0

ポップオーバーの表示と非表示の遅延 (ミリ秒) - 手動トリガー タイプには適用されません

数値が指定されている場合、表示/非表示の両方に遅延が適用されます

オブジェクト構造は次のとおりです。delay: { "show": 500, "hide": 100 }
html ブール値 間違い ポップオーバーに HTML を挿入します。false の場合、jQuery のtextメソッドを使用してコンテンツを DOM に挿入します。XSS 攻撃が心配な場合は、テキストを使用してください。
配置 文字列 | 関数 '右'

ポップオーバーの配置方法 - トップ | ボトム | 左 | 左 | 右 | 自動。
「auto」を指定すると、ポップオーバーの向きが動的に変更されます。たとえば、配置が「自動左」の場合、ポップオーバーは可能な場合は左に表示され、そうでない場合は右に表示されます。

配置を決定するために関数が使用される場合、最初の引数として popover DOM ノード、2 番目の引数としてトリガー要素 DOM ノードで関数が呼び出されます。thisコンテキストは popover インスタンスに設定されます。
セレクタ ストリング 間違い セレクターが提供されている場合、ポップオーバー オブジェクトは指定されたターゲットに委譲されます。実際には、これは動的 HTML コンテンツにポップオーバーを追加できるようにするために使用されます。これと有益な例を参照してください。
テンプレート ストリング '<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属性が存在しない場合のデフォルトのタイトル値。

関数が指定されている場合this、ポップオーバーがアタッチされている要素に設定された参照で呼び出されます。
引き金 ストリング 'クリック' ポップオーバーのトリガー方法 - クリック | ホバー | フォーカス | マニュアル。複数のトリガーを渡すことができます。スペースで区切ります。manual他のトリガーと組み合わせることはできません。
ビューポート 文字列 | オブジェクト | 関数 { セレクター: '本体', パディング: 0 }

この要素の境界内にポップオーバーを保持します。例:viewport: '#viewport'または{ "selector": "#viewport", "padding": 0 }

関数が指定されている場合、その関数は、トリガー要素の DOM ノードを唯一の引数として呼び出されます。thisコンテキストは popover インスタンスに設定されます。

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

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

メソッド

$().popover(options)

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

.popover('show')

要素のポップオーバーを表示します。ポップオーバーが実際に表示される前 (つまり、イベントが発生する前)に呼び出し元に戻ります。shown.bs.popoverこれは、ポップオーバーの「手動」トリガーと見なされます。タイトルとコンテンツの両方が長さ 0 のポップオーバーは表示されません。

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

.popover('hide')

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

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

.popover('toggle')

要素のポップオーバーを切り替えます。ポップオーバーが実際に表示または非表示になる前 (つまり、orイベントが発生する前)に呼び出し元に戻ります。これは、ポップオーバーの「手動」トリガーと見なされます。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 トランジションが完了するのを待ちます)。
挿入された.bs.popover このイベントはshow.bs.popover、ポップオーバー テンプレートが DOM に追加されたときに、イベントの後に発生します。 
$('#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"属性を持つ子孫要素のクリック イベントをリッスンするアラートを作成します。(data-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

ボタンをもっと活用しましょう。ボタンの状態を制御したり、ツールバーなどのその他のコンポーネント用にボタンのグループを作成したりします。

クロスブラウザの互換性

Firefox は、ページを読み込んでもフォーム コントロールの状態 (無効化とチェック状態) を維持します。これを回避するには、 を使用しますautocomplete="off"。Mozilla バグ #654072を参照してください。

ステートフル

data-loading-text="Loading..."ボタンの読み込み状態を使用するために追加します。

この機能は v3.3.5 から廃止され、v4 で削除されました。

お好きな状態でご利用ください！

このデモンストレーションのために、 と を使用して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>

シングルトグル

data-toggle="button"単一のボタンでトグルを有効にするために追加します。

事前に切り替えられたボタンが必要であり.active、aria-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>

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

含まれているチェックボックスまたはラジオ入力に追加data-toggle="buttons"して.btn-group、それぞれのスタイルでの切り替えを有効にします。

事前に選択されたオプションが必要.active

.active事前に選択されたオプションの場合、クラスを入力自身に追加する必要がありlabelます。

視覚的にチェックされた状態は、クリック時にのみ更新されます

チェックボックス ボタンのチェック状態が、ボタンでclickイベントを発生させずに更新された場合 (入力<input type="reset">のプロパティを設定することによって)、入力のクラスを自分でchecked切り替える必要があります。.activelabel

<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" role="button" 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>

アコーディオンの例

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

アニムパリチュルクリシェreprehenderit、エニムeiusmodハイライフアキュマステリーリチャードソンとイカ。3 ウルフ ムーン オフィシア オーテ、ノン キューピダット スケートボード ドロール ブランチ。フード トラック キノア nesciunt labourum eiusmod。ブランチ 3 オオカミの月の一時、サント アリクア、鳥を乗せたイカ、シングルオリジンのコーヒー ヌラ、アセンダ、ショアディッチなど。Nihil anim keffiyeh helvetica, クラフト ビール労働者 wes anderson cred nesciunt sapiente ea proident. Adveganexcepteurブッチャーバイスロモ。レギンスは、農場から食卓までのクラフトビール、生のデニムの美的シンセ、おそらく聞いたことがないかもしれません。
アニムパリチュルクリシェreprehenderit、エニムeiusmodハイライフアキュマステリーリチャードソンとイカ。3 ウルフ ムーン オフィシア オーテ、ノン キューピダット スケートボード ドロール ブランチ。フード トラック キノア nesciunt labourum eiusmod。ブランチ 3 オオカミの月の一時、サント アリクア、鳥を乗せたイカ、シングルオリジンのコーヒー ヌラ、アセンダ、ショアディッチなど。Nihil anim keffiyeh helvetica, クラフト ビール労働者 wes anderson cred nesciunt sapiente ea proident. Adveganexcepteurブッチャーバイスロモ。レギンスは、農場から食卓までのクラフトビール、生のデニムの美的シンセ、おそらく聞いたことがないかもしれません。
アニムパリチュルクリシェreprehenderit、エニムeiusmodハイライフアキュマステリーリチャードソンとイカ。3 ウルフ ムーン オフィシア オーテ、ノン キューピダット スケートボード ドロール ブランチ。フード トラック キノア nesciunt labourum eiusmod。ブランチ 3 オオカミの月の一時、サント アリクア、鳥を乗せたイカ、シングルオリジンのコーヒー ヌラ、アセンダ、ショアディッチなど。Nihil anim keffiyeh helvetica, クラフト ビール労働者 wes anderson cred nesciunt sapiente ea proident. Adveganexcepteurブッチャーバイスロモ。レギンスは、農場から食卓までのクラフトビール、生のデニムの美的シンセ、おそらく聞いたことがないかもしれません。 
<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">
          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" role="button" 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" role="button" 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>

.panel-bodys をsに交換することもでき.list-groupます。

  • ブートプライ
  • itmus ac ファシリン 1 個
  • セカンドエロス
フッター

展開/折りたたみコントロールにアクセスできるようにする

aria-expanded必ずコントロール要素に追加してください。この属性は、折りたたみ可能な要素の現在の状態をスクリーン リーダーや同様の支援技術に対して明示的に定義します。折りたたみ可能な要素がデフォルトで閉じている場合、値はaria-expanded="false"です。inクラスを使用して折りたたみ可能な要素をデフォルトで開くように設定した場合はaria-expanded="true"、代わりにコントロールに設定します。プラグインは、折りたたみ可能な要素が開いているか閉じているかに基づいて、この属性を自動的に切り替えます。

さらに、コントロール要素が単一の折りたたみ可能な要素をターゲットにしている場合 (つまり、data-target属性がセレクターを指しているid場合)、折りたたみ可能な要素の を含む追加のaria-controls属性をコントロール要素に追加できますid。最新のスクリーン リーダーや同様の支援技術は、この属性を利用して、折りたたみ可能な要素自体に直接移動するための追加のショートカットをユーザーに提供します。

使用法

崩壊プラグインは、いくつかのクラスを利用して、重労働を処理します。

  • .collapseコンテンツを非表示にします
  • .collapse.in内容を示します
  • .collapsingトランジションの開始時に追加され、終了時に削除されます

これらのクラスは にありますcomponent-animations.less。

データ属性経由

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

折りたたみ可能なコントロールにアコーディオンのようなグループ管理を追加するには、 data 属性を追加しますdata-parent="#selector"。実際の動作については、デモを参照してください。

JavaScript 経由

次を使用して手動で有効にします。

$('.collapse').collapse()

オプション

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

名前 タイプ デフォルト 説明
親 セレクタ 間違い セレクターが提供されている場合、この折りたたみ可能なアイテムが表示されると、指定された親の下にあるすべての折りたたみ可能な要素が閉じられます。(従来のアコーディオンの動作と同様 - これはクラスに依存しますpanel)
トグル ブール値 真実 呼び出し時に折りたたみ可能な要素を切り替えます

メソッド

.collapse(options)

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

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

.collapse('toggle')

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

.collapse('show')

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

.collapse('hide')

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

イベント

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

イベントタイプ 説明
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>

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

.carousel-captionany 内の要素を使用して、スライドにキャプションを簡単に追加します.item。そこに任意の HTML を配置すると、自動的に整列およびフォーマットされます。

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

複数のカルーセル

カルーセルコントロールが適切に機能するidには、最も外側のコンテナー ( ) で を使用する必要があります。.carousel複数のカルーセルを追加する場合、またはカルーセルの を変更する場合idは、関連するコントロールを必ず更新してください。

データ属性経由

データ属性を使用して、カルーセルの位置を簡単に制御します。現在の位置に相対的なスライド位置を変更するdata-slideキーワードprevまたはを受け入れます。または、未加工のスライド インデックスをカルーセルに渡すためnextに使用します。これにより、スライドの位置が で始まる特定のインデックスに移動します。data-slide-todata-slide-to="2"0

このdata-ride="carousel"属性は、カルーセルをページの読み込みからアニメーション化するようにマークするために使用されます。同じカルーセルの (冗長で不要な) 明示的な JavaScript 初期化と組み合わせて使用​​することはできません。

JavaScript 経由

次のように手動でカルーセルを呼び出します。

$('.carousel').carousel()

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

名前 タイプ デフォルト 説明
間隔 番号 5000 アイテムを自動的に循環させるまでの遅延時間。false の場合、カルーセルは自動的に循環しません。
一時停止 文字列 | ヌル 「ホバー」 に設定すると"hover"、 でカルーセルの循環を一時停止し、 でカルーセルmouseenterの循環を再開しmouseleaveます。に設定するとnull、カルーセルにカーソルを合わせても一時停止しません。
包む ブール値 真実 カルーセルが連続して循環するか、ハードストップを行うか。
キーボード ブール値 真実 カルーセルがキーボード イベントに反応するかどうか。

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

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

カルーセル アイテムを左から右に循環します。

カルーセルがアイテムを循環するのを止めます。

カルーセルを特定のフレーム (0 ベース、配列と同様) に切り替えます。

前のアイテムに循環します。

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

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

両方のイベントには、次の追加のプロパティがあります。

  • direction: カルーセルがスライドする方向 ("left"または"right")。
  • relatedTarget: アクティブなアイテムとして配置される DOM 要素。

すべてのカルーセル イベントは、カルーセル自体 (つまり<div class="carousel">) で発生します。

イベントタイプ 説明
slide.bs.carousel slideこのイベントは、インスタンス メソッドが呼び出されるとすぐに発生します。
スライド bs カルーセル このイベントは、カルーセルがスライド遷移を完了したときに発生します。 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

接辞affix.js

例

接辞プラグインposition: fixed;はオンとオフを切り替え、で見つかった効果をエミュレートしposition: sticky;ます。右側のサブナビゲーションは接辞プラグインのライブ デモです。

使用法

データ属性を介して接辞プラグインを使用するか、独自の JavaScript を使用して手動で使用します。どちらの場合も、添付コンテンツの位置と幅に CSS を提供する必要があります。

注: Safari のレンダリング バグのため、プルまたはプッシュされた列など、相対的に配置された要素に含まれる要素には接辞プラグインを使用しないでください。

CSS による配置

接辞プラグインは、それぞれが特定の状態を表す.affix、.affix-top、およびの 3 つのクラスを切り替え.affix-bottomます。position: fixed;実際の位置を処理するには、 on.affixを除いて、これらのクラスを (このプラグインとは別に) 自分でスタイルを提供する必要があります。

接辞プラグインの仕組みは次のとおりです。

  1. まず、プラグインは.affix-top要素が最上位にあることを示すために追加します。この時点では、CSS の配置は必要ありません。
  2. 貼り付けたい要素をスクロールすると、実際の貼り付けがトリガーされます。これは、(Bootstrap の CSS によって提供される) を.affix置換.affix-topおよび設定する場所です。position: fixed;
  3. 下部オフセットが定義されている場合、それを超えてスクロールすると に置き換え.affixられ.affix-bottomます。オフセットはオプションであるため、オフセットを設定するには適切な CSS を設定する必要があります。この場合、position: absolute;必要に応じて追加してください。プラグインは data 属性または 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-データ属性の場合、オプション名をのようにに追加しますdata-offset-top="200"。

名前 タイプ デフォルト 説明
オフセット 数 | 関数 | 物体 10 スクロールの位置を計算するときに画面からオフセットするピクセル。単一の数値が指定された場合、オフセットは上方向と下方向の両方に適用されます。一意の上下オフセットを提供するには、オブジェクトoffset: { top: 10 }またはを提供するだけoffset: { top: 10, bottom: 5 }です。オフセットを動的に計算する必要がある場合は、関数を使用します。
目標 セレクター | ノード | jQuery要素 windowオブジェクト_ 接辞のターゲット要素を指定します。

メソッド

.affix(options)

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

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

.affix('checkPosition')

関連要素の寸法、位置、およびスクロール位置に基づいて接辞の状態を再計算します。、.affix、.affix-top、および.affix-bottomクラスは、新しい状態に応じて、添付されたコンテンツに追加または削除されます。このメソッドは、添付されたコンテンツまたはターゲット要素のサイズが変更されるたびに呼び出され、添付されたコンテンツが正しく配置されるようにする必要があります。

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

イベント

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

イベントタイプ 説明
接辞.bs.接辞 このイベントは、要素が固定される直前に発生します。
貼り付け.bs.貼り付け このイベントは、要素が固定された後に発生します。
接辞トップ.bs.接辞 このイベントは、要素が上に固定される直前に発生します。
貼付トップ.bs.接辞 このイベントは、要素が上部に固定された後に発生します。
接辞-bottom.bs.affix このイベントは、要素が底に固定される直前に発生します。
添付-底.bs.接辞 このイベントは、要素が固定された後に発生します。