JavaScript・ブートストラップ日本語で

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

プラグインは個別に (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
})

消毒剤

ツールチップとポップオーバーは、組み込みのサニタイザーを使用して、HTML を受け入れるオプションをサニタイズします。

デフォルトwhiteList値は次のとおりです。

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

このデフォルトに新しい値を追加する場合whiteListは、次の操作を実行できます。

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

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

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

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

DOMPurifyなどの専用ライブラリを使用するためにサニタイザーをバイパスする場合は、次の手順を実行する必要があります。

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

なしのブラウザ`document.implementation.createHTMLDocument`

Internet Explorer 8 などのをサポートしていないブラウザーの場合document.implementation.createHTMLDocument、組み込みのサニタイズ機能は HTML をそのまま返します。

このような場合にサニタイズを行いたい場合は、DOMPurifysanitizeFnなどの外部ライブラリを指定して使用してください。

バージョン番号

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

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

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

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

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

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

トランジションについて

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

中身は

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

トランジションの無効化

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

$.support.transition = false

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

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

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

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>

オプションサイズ

モーダルには 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" 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" 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 回読み込まれ、 div`load`に挿入されます。`.modal-content`data-api を使用している場合は、代わりに`href`属性を使用してリモートソースを指定することもできます。この例を以下に示します。 `<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>`

メソッド

`.modal(options)`

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

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

`.modal('toggle')`

モーダルを手動で切り替えます。モーダルが実際に表示または非表示になる前 (つまり、orイベントが発生する前)に呼び出し元に戻ります。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 トランジションが完了するのを待ちます)。
ロードされた.bs.モーダル	このイベントは、オプションを使用してモーダルがコンテンツをロードしたときに発生し`remote`ます。

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

例

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

丸薬内

使用法

ドロップダウンプラグインは、データ属性または 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('toggle')`

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

イベント

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

@太い

広告レギンスキーター、ブランチ 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…
})

タブの例

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

おそらく聞いたことのない未加工のデニムジーンズショーツオースティン。ネスカント豆腐スタンプタウンアリクア、レトロシンセマスタークレンズ。口ひげのクリシェテンポ、ウィリアムズバーグカルレスビーガンヘルベチカ。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.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

タブ付きナビゲーションを拡張

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

使用法

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

イベント

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

hide.bs.tab(現在アクティブなタブ上)
show.bs.tab（表示されるタブで）
hidden.bs.tabhide.bs.tab(前のアクティブなタブで、イベントと同じもの)
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
})

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

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

例

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

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

オプション

オプションは、データ属性または 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`コンテキストはツールチップインスタンスに設定されます。
セレクタ	ストリング	間違い	セレクターが提供されている場合、ツールチップオブジェクトは指定されたターゲットに委譲されます。実際には、これは、動的に追加された DOM 要素 (`jQuery.on`サポート) にツールチップを適用するためにも使用されます。これと有益な例を参照してください。
テンプレート	ストリング	`'<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`コンテキストはツールチップインスタンスに設定されます。
消毒する	ブール値	真実	サニタイズを有効または無効にします。有効`'template'`にする`'content'`と、`'title'`オプションがサニタイズされます。
ホワイトリスト	物体	デフォルト値	許可された属性とタグを含むオブジェクト
サニタイズFn	null \| null \| 関数	ヌル	ここでは、独自のサニタイズ関数を指定できます。これは、専用のライブラリを使用してサニタイズを実行したい場合に役立ちます。

メソッド

`$().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…
})

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

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

オプトイン機能

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

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

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

例

上揃え、右揃え、下揃え、左揃えの 4 つのオプションを使用できます。

ライブデモ

<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 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 インスタンスに設定されます。
消毒する	ブール値	真実	サニタイズを有効または無効にします。有効`'template'`にする`'content'`と、`'title'`オプションがサニタイズされます。
ホワイトリスト	物体	デフォルト値	許可された属性とタグを含むオブジェクト
サニタイズFn	null \| null \| 関数	ヌル	ここでは、独自のサニタイズ関数を指定できます。これは、専用のライブラリを使用してサニタイズを実行したい場合に役立ちます。

メソッド

`$().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…
})

アラートの例

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

ボタンを使用する場合.close、それはの最初の子である必要があり.alert-dismissible、マークアップ内でその前にテキストコンテンツがあってはなりません。

聖ワカモレ！自分でチェックするのが一番です、あなたはあまり見栄えがよくありません。

ああスナップ！エラーが発生しました。

あれこれ変えて、やり直してください。Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

使用法

閉じるボタンに追加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…
})

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

クロスブラウザの互換性

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">
  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">
  Single toggle
</button>

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

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

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

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

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

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

チェックボックス 1 (チェック済み) チェックボックス 2 チェックボックス 3

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

ラジオ 1 (事前選択) ラジオ 2 ラジオ 3

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

メソッド

`$().button('toggle')`

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

`$().button('reset')`

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

`$().button(string)`

テキストを任意のデータ定義テキスト状態にスワップします。

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

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

簡単なトグル動作のために少数のクラスを利用する柔軟なプラグイン。

プラグインの依存関係

折りたたみには、Bootstrap のバージョンにトランジションプラグインが含まれている必要があります。

例

下のボタンをクリックして、クラスの変更によって別の要素を表示および非表示にします。

.collapseコンテンツを非表示にします
.collapsing遷移中に適用されます
.collapse.inコンテンツを表示

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

href とのリンク

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>

アコーディオンの例

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

折りたたみ可能なグループアイテム #1

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

折りたたみ可能なグループ ��イテム #2

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.

折りたたみ可能なグループアイテム #3

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 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ます。

折りたたみ可能なリストグループ

Bootply
One itmus ac facilin
Second eros

Footer

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

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…
})

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

例

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

アクセシビリティの問題

通常、カルーセルコンポーネントはアクセシビリティ標準に準拠していません。準拠する必要がある場合は、コンテンツを表示するための他のオプションを検討してください。

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

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

初期アクティブ要素が必要

クラスをスライドの.active1 つに追加する必要があります。そうしないと、カルーセルが表示されません。

グリフアイコンは不要

およびクラスは、コントロールに必ずしも必要ではありません.glyphicon .glyphicon-chevron-left。.glyphicon .glyphicon-chevron-rightBootstrap は.icon-prev、.icon-nextプレーンな Unicode の代替としてとを提供します。

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

.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`、カルーセルにカーソルを合わせても一時停止しません。
包む	ブール値	真実	カルーセルが連続して循環するか、ハードストップを行うか。
キーボード	ブール値	真実	カルーセルがキーボードイベントに反応するかどうか。

メソッド

`.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`このイベントは、インスタンスメソッドが呼び出されるとすぐに発生します。
スライド bs カルーセル	このイベントは、カルーセルがスライド遷移を完了したときに発生します。

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

例

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

使用法

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

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

CSS による配置

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

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

まず、プラグインが追加します.affix-top要素が最上位にあることを示すために追加します。この時点では、CSS の配置は必要ありません。
貼り付けたい要素をスクロールすると、実際の貼り付けがトリガーされます。ここで、.affix置換.affix-topと設定を行いますposition: fixed;(Bootstrap の CSS によって提供されます)。
下部オフセットが定義されている場合、それを超えてスクロールするとに置き換え.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.接辞	このイベントは、要素が固定された後に発生します。

JavaScript

概要

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

コンパイル済み JavaScript の使用

プラグインの依存関係

データ属性

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

プログラム API

デフォルトの設定

競合なし

イベント

消毒剤

なしのブラウザdocument.implementation.createHTMLDocument

バージョン番号

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

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

トランジションtransition.js

トランジションについて

中身は

トランジションの無効化

モーダルmodal.js

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

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

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

例

静的な例

ライブデモ

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

YouTube 動画の埋め込み

オプションサイズ

アニメーションを削除

グリッドシステムの使用

トリガー ボタンに基づいてモーダル コンテンツを変更する

使用法

データ属性経由

JavaScript 経由

オプション

メソッド

.modal(options)

.modal('toggle')

.modal('show')

.modal('hide')

.modal('handleUpdate')

イベント

ドロップダウン dropdown.js

例

ナビゲーションバー内

丸薬内

使用法

データ属性経由

JavaScript 経由

data-toggle="dropdown"まだ必要

オプション

メソッド

$().dropdown('toggle')

イベント

ScrollSpy scrollspy.js

ナビゲーションバーの例

@太い

@mdo

1

2

three

使用法

Bootstrap nav が必要

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

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

相対位置が必要

データ属性経由

JavaScript 経由

メソッド

.scrollspy('refresh')

オプション

イベント

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

タブの例

タブ付きナビゲーションを拡張

使用法

マークアップ

フェード効果

なしのブラウザ`document.implementation.createHTMLDocument`

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

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

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

トリガーボタンに基づいてモーダルコンテンツを変更する

`.modal(options)`

`.modal('toggle')`

`.modal('show')`

`.modal('hide')`

`.modal('handleUpdate')`

`data-toggle="dropdown"`まだ必要

`$().dropdown('toggle')`

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

`.scrollspy('refresh')`

`$().tab`

`.tab('show')`

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

`$().tooltip(options)`

`.tooltip('show')`

`.tooltip('hide')`

`.tooltip('toggle')`

`.tooltip('destroy')`

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

`$().popover(options)`

`.popover('show')`

`.popover('hide')`

`.popover('toggle')`

`.popover('destroy')`

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

`$().alert()`

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