ブートストラップの組み込みプラグインとは何ですか?-ブートストラップのチュートリアル-php.cn

ブートストラップの組み込みプラグインとは何ですか?

青灯夜游

リリース： 2021-11-11 11:47:24

オリジナル

4223 人が閲覧しました

ブートストラップの組み込みプラグインには次のものが含まれます: 1. トランジション効果プラグイン; 2. モーダルボックスプラグイン; 3. ドロップダウンメニュープラグイン; 4. スクロールモニタリングプラグイン; 5 . タブプラグイン; 6. プロンプトツールプラグイン; 7. ポップアップボックスプラグイン; 8. アラートボックスプラグイン; 9. ボタンプラグイン; 10. 折りたたみプラグイン; 11. カルーセルプラグイン-in; 12. 追加のナビゲーションプラグイン。

ブートストラップの組み込みプラグインとは何ですか?

このチュートリアルの動作環境: Windows 7 システム、ブートストラップバージョン 3.3.7、DELL G3 コンピューター

ブートストラップビルド済みプラグインには次のものが含まれます:

ブートストラップトランジションエフェクト
##ブートストラップモーダルボックス
#ブートストラップカルーセル
##ブートストラップの追加ナビゲーション

#Bootstrap Transition プラグインブートストラップの組み込みプラグインとは何ですか?

Transition プラグインは、単純なトランジション効果を提供します。このプラグインの機能を個別に参照したい場合は、他の JS ファイルに加えて、transition.js を参照する必要があります。あるいは、bootstrap.js または bootstrap.min.js の縮小バージョンを参照することもできます。

Transition.js は、transitionEnd イベントおよび CSS トランジション効果シミュレーターの基本ヘルパークラスです。これは、CSS トランジションのサポートを確認し、トランジション効果を取得するために、他のプラグインによって使用されます。

Bootstrap モーダルボックス (Modal) プラグイン

モーダルボックス (Modal) は、親フォームを覆う子フォームです。通常、その目的は、親フォームを離れることなく何らかの対話が可能な別のソースからのコンテンツを表示することです。サブフォームは、情報や対話などを提供します。

#プラグインの機能を個別に参照したい場合は、modal.js を参照する必要があります。あるいは、bootstrap.js または bootstrap.min.js の縮小バージョンを参照することもできます。

ブートストラップの組み込みプラグインとは何ですか?

使用方法:

モーダルプラグインの非表示コンテンツを切り替えることができます:

データを渡す属性: コントローラー要素 (ボタンやリンクなど) に属性 data-toggle="modal" を設定し、切り替える特定のモーダルを指定するには data-target="#identifier" または href="#identifier" を設定します。 . ボックス (id="identifier" 付き)。

JavaScript 経由: この手法を使用すると、単純な JavaScript 行で id="identifier" を指定したモーダルを呼び出すことができます:

$(&#39;#identifier&#39;).modal(options)

ログイン後にコピー

ブートストラップドロップダウンメニュー (ドロップダウン) プラグイン

ドロップダウンメニュー (ドロップダウン) プラグインを使用すると、任意のコンポーネント (ナビゲーションなど) にコンテンツを追加できます。バー、タブページ、カプセルナビゲーションメニュー、ボタンなど) を使用してドロップダウンメニューを追加します。このプラグインの機能を個別に参照したい場合は、dropdown.js を参照する必要があります。または、bootstrap.js または bootstrap.min.js の圧縮バージョンを参照してください。

#Bootstrap Scrollspy プラグイン

ブートストラップの組み込みプラグインとは何ですか?

Scrollspy プラグイン (自動的に更新されます) ナビゲーションプラグイン-in は、スクロールバーの位置に応じて、対応するナビゲーションターゲットを自動的に更新します。基本的な実装は、スクロール時のスクロールバーの位置に基づいて、ナビゲーションバーに .active クラスを追加することです。使用方法

スクロールリスニング動作を上部ナビゲーションに追加できます:

data 属性を使用して、リッスンしたい要素 (通常は body ) data-spy="scroll" を追加します。次に、Bootstrap .nav コンポーネントの親要素の ID またはクラスを使用して属性 data-target を追加します。これを機能させるには、リッスンするリンクの ID と一致する要素がページの本文に存在することを確認する必要があります。

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

ログイン後にコピー

JavaScript 経由: JavaScript を通じてスクロール監視を呼び出し、監視する要素を選択して、.scrollspy() 関数を呼び出すことができます:

$(&#39;body&#39;).scrollspy({ target: &#39;.navbar-example&#39; })

ログイン後にコピー

Bootstrap tab (Tab )Plugin

いくつかのデータ属性を組み合わせることで、タブ付きインターフェースを簡単に作成できます。このプラグインを使用すると、タブ、カプセルタブ、さらにはドロップダウンメニュータブにコンテンツを配置できます。

Bootstrap ツールチッププラグイン

ブートストラップの組み込みプラグインとは何ですか?

ツールチップは、リンクを説明するときに非常に便利です。 Tooltip プラグインは、Jason Frame によって作成された jQuery.tipsy からインスピレーションを受けました。 Tooltip プラグインは、画像に依存する必要がなくなり、代わりに CSS を使用してアニメーション効果を実現したり、データ属性を使用してタイトル情報を保存したりするなど、多くの改善が加えられています。

ブートストラップの組み込みプラグインとは何ですか?