ブートストラッププラグイン
1。ブートストラップトランジションプラグイン
遷移プラグインは、単純な遷移効果を提供します。プラグインの機能を個別に参照する場合は、他のJSファイルに加えてTransition.jsを参照する必要もあります。または、bootstrapプラグインの概要章で述べたように、bootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照できます。
Transition.jsは、TransitionEndイベントおよびCSSトランジション効果シミュレーターの基本的なヘルパークラスです。他のプラグインによって使用され、CSS遷移効果のサポートを確認し、遷移効果を取得します。
ユースケース
トランジションプラグインのユースケース：
（1）スライドまたはフェード効果を備えたモーダルダイアログボックス。特定の例については、Bootstrap Modal Box（Modal）プラグインを参照してください。
（2）フェード効果のあるタグページ。特定の例については、ブートストラップタブページ（タブ）プラグインを参照してください。
（3）フェージング効果のある警告ボックス。特定の例については、ブートストラップ警告ボックス（アラート）プラグインを参照してください。
（4）スライド効果を備えたカルーセルボード。特定の例については、Bootstrap Carouselプラグインを参照してください。
2。ブートストラップモーダルボックス（モーダル）プラグイン
モーダルボックス（モーダル）は、親フォームにオーバーレイされる子フォームです。通常、目的は別のソースからコンテンツを表示することです。これは、親フォームを離れることなく相互作用することができます。サブフォームは、情報、相互作用などを提供できます。
プラグインの機能を個別に参照する場合は、modal.jsを参照する必要があります。または、bootstrapプラグインの概要章で述べたように、bootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照できます。
（1）使用
モーダルボックス（モーダル）プラグインの隠された内容を切り替えることができます。
A.データ属性を介して：属性データ-toggle = "Modal"をコントローラー要素（ボタンやリンクなど）に設定し、データ= "＃識別子"またはhref = "＃識別子を設定して、特定のモーダルボックスをスイッチする（ID ="識別子 "）を指定します。
B. JavaScriptを介して：この手法を使用して、JavaScriptの単純なラインを使用してID = "識別子"のモーダルボックスを呼び出すことができます。
$（ '＃識別子'）。modal（options）
<h2>モーダルボックスを作成（モーダル）</h2> <！ - ボタンはモーダルボックスをトリガーします - > <ボタンdata-toggle = "modal" data-target = "＃mymodal">モーダルボックスのデモを開始</ボタン（モーダル） - > <div div = "mymodal" tapindex = "-1" "-1" "-1" "" 1 aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true"> × </button> <h4 id="myModalLabel"> Modal Box (Modal) Title</h4> </div> <div> Add some text here</div> <div> <button type="button" data-dismiss = "modal"> close </button> <button type = "button">変更</button> </div> </div> </div> <！ - /.modal-content-> </div> <！ - /.modal-> </div>
コード説明：
A.モーダルウィンドウを使用すると、何らかのトリガーが必要です。ボタンまたはリンクを使用できます。ここでは、ボタンを使用しています。
B.上記のコードを慎重に見ると、<button>タグに、data-target = "＃mymodal"がページにロードするモーダルボックスのターゲットであることがわかります。ページ上に複数のモーダルボックスを作成し、各モーダルボックスの異なるトリガーを作成できます。これで、複数のモジュールを同時にロードできないことは明らかですが、ページ上に複数を作成して異なる時間にロードできます。
C.モーダルボックスに記載されている2つのポイント：
1つ目は.Modalです。これは、<div>の内容をモーダルボックスとして認識するために使用されます。
2番目は.Fadeクラスです。モーダルボックスが切り替えられると、コンテンツがフェードします。
D. aria-labelledby = "mymodallabel"、このプロパティはモーダルボックスのタイトルを指します。
E.プロパティAria-hidden = "true"は、トリガーがトリガーされるまでモーダルウィンドウを見えなくするために使用されます（関連するボタンをクリックするなど）。
f、<div>、Modal-Headerは、モーダルウィンドウのヘッドのスタイルを定義するクラスです。
g、class = "close"、closeは、モーダルウィンドウのクローズボタンをスタイリングするために使用されるCSSクラスです。
h、data-dismiss = "Modal"は、カスタムHTML5データ属性です。ここでは、モーダルウィンドウを閉じるために使用されます。
I、class = "Modal-body"は、モーダルウィンドウのボディのスタイルに使用されるブートストラップCSSのCSSクラスです。
j、class = "Modal-footer"は、モーダルウィンドウの下部をスタイリングするために使用されるブートストラップCSSのCSSクラスです。
k、data-toggle = "modal"、html5カスタムデータ属性データ-toggleは、モーダルウィンドウを開くために使用されます。
（2）オプション
モーダルウィンドウの外観と感触をカスタマイズするオプションがあります。これは、データプロパティまたはJavaScriptを介して渡されます。次の表には、これらのオプションがリストされています。
（3）メソッド
MODAL（）で使用できる便利な方法を以下に示します。
（4）イベント
次の表には、モーダルボックスで使用するイベントを示します。これらのイベントは、機能のフックとして使用できます。
3.ブートストラップドロップダウンメニュー（ドロップダウン）プラグイン
ブートストラップドロップダウンメニューの章では、ドロップダウンメニューについて説明しますが、相互作用の部分は含まれません。この章では、ドロップダウンメニューの相互作用について詳しく説明します。ドロップダウンプラグインを使用して、ドロップダウンメニューを任意のコンポーネント（ナビゲーションバー、タブ、カプセルナビゲーションメニュー、ボタンなど）に追加できます。
プラグインの機能を個別に参照する場合は、DropDown.jsを参照する必要があります。または、bootstrapプラグインの概要章で述べたように、bootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照できます。
（1）使用
ドロップダウンメニュー（ドロップダウン）プラグインの非表示コンテンツを切り替えることができます。
データ属性を介してドロップダウンメニューを切り替えます。データ-toggle = "ドロップダウン"をリンクまたはボタンに追加します。
A.データ属性を使用します：以下に示すように、Data-Toggle = "Dropdown"をリンクまたはボタンに追加して、ドロップダウンメニューを切り替えます。
<div> <a data-toggle = "dropdown" href = "＃">ドロップダウントリガー</a> <ul role = "menu" aria-labelledby = "dlabel"> </ul> </div>
B.リンクを無傷に保つ必要がある場合（ブラウザがJavaScriptを有効にしない場合に役立つ）、href = "＃"の代わりにデータターゲットプロパティを使用します。
<div> <a id = "dlabel" role = "button" data-toggle = "dropdown" data-target = "＃" href = "/page.html">ドロップダウンメニュー（ドロップダウン）<span> </span> </a> <ul chole = "メニュー" aria-labelledby = "dlabel"
C. JavaScriptを介して：JavaScriptを介してドロップダウンメニューを呼び出します。次の方法を使用してください：$（ '。ドロップダウントグル'）。ドロップダウン（）
（2）メソッド
ドロップダウンメニューを表示または非表示にする簡単な方法があります。 $（）。ドロップダウン（ 'トグル'）
4。BootstrapScrollspyプラグイン
スクロール監視（Scrollspy）プラグイン、つまり、ナビゲーションプラグインの自動更新は、スクロールバーの位置に応じて対応するナビゲーションターゲットを自動的に更新します。その基本的な実装は、スクロール時のスクロールバーの位置に基づいて、ナビゲーションバーにアクティブクラスを追加することです。
（1）使用
スクロールリスニング動作をトップナビゲーションに追加できます。
A.データ属性を介して：Data-Spy = "Scroll"を聴きたい要素（通常はボディ）に追加します。次に、bootstrap .navコンポーネントまたはクラスのプロパティの親要素のIDで属性データターゲットを追加します。適切に機能するためには、聴きたいリンクのIDに一致する要素がページのボディにあることを確認する必要があります。
<body data-spy = "scroll" data-target = "。vavbar-example"> ... <div> <ul> ... </ul> </div> ... </body>
B. JavaScriptを介して：JavaScriptを介してスクロール監視を呼び出し、聴く要素を選択し、.scrollspy（）関数を呼び出すことができます。
$（ 'body'）。scrollspy（{target： '.navbar-example'}）
（2）オプション
データ属性またはJavaScriptを通過しました。次の表には、これらのオプションがリストされています。
（3）メソッド
.scrollspy（ 'REFRESH'）：JavaScriptを使用してScrollSpyメソッドを呼び出すときは、.Refreshメソッドを呼び出してDOMを更新する必要があります。これは、DOMの要素が変更された場合に役立ちます（つまり、いくつかの要素を追加または削除します）。この方法を使用するための構文は次のとおりです。
$（ '[data-spy = "scroll"]'）
（4）イベント
次の表には、スクロールリスニングに使用されるイベントを示します。これらのイベントは、機能のフックとして使用できます。
5。bootstrapタブ（タブ）プラグイン
タブ（タブ）は、ブートストラップナビゲーション要素の章で紹介されています。一部のデータプロパティを組み合わせることで、タブインターフェイスを簡単に作成できます。このプラグインを使用すると、コンテンツをタブページまたはカプセルタブページ、またはドロップダウンメニュータブページに配置できます。
（1）使用
2つの方法でタブページを有効にすることができます。
A.データ属性を介して：data-toggle = "tab"またはdata-toggle = "pill"をアンカーテキストリンクに追加する必要があります。 NAVおよびNAV-TABSクラスをULに追加すると、ブートストラップタグスタイルが適用され、NAVおよびNAVピルクラスをULに追加すると、ブートストラップカプセルスタイルが適用されます。
<ul>
<li> <a href = "＃識別子" data-toggle = "tab"> home </a> </li>
...
</ul>
B. JavaScriptを介して：JavaScriptを使用して、以下に示すようにタブページを有効にすることができます。
$（ '＃mytab a'）。クリック（function（e）{e.preventdefault（）$（this）.tab（ 'show'）}））次の例は、さまざまな方法で個々のタブのアクティブ化を示しています。
//タブページ$（ '＃mytab a [href = "＃profile"]'） a '）。タブ（' show '）
（2）フェード効果
タブにフェードエフェクトを設定する必要がある場合は、各.tab-paneに.fadeを追加します。次の例に示すように、最初のタブを.inクラスでフェードインしてフェードインするために追加する必要があります。
<div> <div id = "home"> ... </div> <div id = "svn"> ... </div> </div>
（3）メソッド
。$（）。タブ：このメソッドは、タブ要素とコンテンツコンテナをアクティブにします。タブページは、DOMのコンテナノードを指すデータターゲットまたはHREFを使用する必要があります。
<ul id = "mytab"> <li> <a href = "＃識別子" data-toggle = "tab"> home </a> ..... </li> </ul> <div> <div id = "home"> ... </div> .... </div> <script> $（function（）{$（ '＃mytab a：last'）。（4）イベント
次の表には、タブ（タブ）プラグインで使用するイベントを示します。これらのイベントは、機能のフックとして使用できます。
6.ブートストラッププロンプトツール（ツールチップ）プラグイン
ツールチップは、リンクを説明したい場合に非常に便利です。 Tooltipプラグインは、Jason Frameが書いたjquery.tipsyに触発されています。ツールチッププラグインは、画像に依存せず、代わりにCSSを使用してアニメーション効果を達成し、データ属性を使用してタイトル情報を保存するなど、多くの改善をもたらしました。
（1）使用
ツールチッププラグインは、ニーズに基づいてコンテンツとタグを生成します。デフォルトでは、ツールチップはトリガー要素の背後に配置されます。プロンプトツール（ツールチップ）を追加できる2つの方法があります。
A.データ属性を介して：プロンプトツール（ToolTip）を追加する必要がある場合は、AnchorタグにData-Toggle = "Tooltip"を追加します。アンカーのタイトルは、プロンプトツールのテキスト（ツールチップ）です。デフォルトでは、プラグインはツールチップを上部に設定します。
<a href = "＃" data-toggle = "tooltip" title = "例のツールチップ">私の上にホバリングしてください</a>
A. JavaScriptを通じて：JavaScriptを介してプロンプトツール（ツールチップ）をトリガー：$（ '＃識別子'）。ツールチップ（オプション）
ツールチッププラグインは、前述のドロップダウンメニューやその他のプラグインのようなものではなく、純粋なCSSプラグインではありません。プラグインを使用するには、jQuery（javascriptを読む）を使用してアクティブ化する必要があります。次のスクリプトを使用して、ページ内のすべてのプロンプトツール（ツールチップ）を有効にします。
$（function（）{$（ "[data-toggle = 'tooltip']"）。tooltip（）;}）;
<a href = "＃" data-toggle = "tooltip" data-clacement = "left">左のツールチップ</a>。 <a href = "＃" data-toggle = "tooltip" data-clacement = "top"> top on。
（2）オプション
Bootstrap Data API（Bootstrap Data API）を介して追加されるか、JavaScriptを介して呼び出されるオプションがいくつかあります。次の表には、これらのオプションがリストされています。
（3）メソッド
ツールチッププラグインのいくつかの有用な方法を次に示します。
（4）イベント
次の表には、ツールチッププラグインで使用するイベントを示します。これらのイベントは、機能のフックとして使用できます。
7。BootstrapPopoverプラグイン
ポップオーバーはツールチップに似ており、拡張ビューを提供します。ポップアップボックスをアクティブにするには、ユーザーは要素の上にホバリングする必要があります。ポップアップボックスの内容は、Bootstrap Data API（Bootstrap Data API）を使用して完全に入力できます。この方法はツールチップに依存しています。プラグインの機能を個別に参照する場合は、ツールチッププラグインに依存するpopover.jsを参照する必要があります。
（1）使用
ポップオーバープラグインは、ニーズに基づいてコンテンツとタグを生成します。デフォルトでは、ポップオーバーはトリガー要素の後ろに配置されます。 2つの方法でポップオーバーを追加できます。
A.データ属性を介して：ポップオーバーを追加する場合は、Anchor/ボタンラベルにData-Toggle = "Popover"を追加します。アンカーのタイトルは、ポップオーバーのテキストです。デフォルトでは、プラグインは上部にポップオーバーを設定します。
<a href = "＃" data-toggle = "Popover" title = "Example Popover">
私の上にホバリングしてください
</a>
B. JavaScriptを介して：JavaScriptを介してPopover（Popover）を有効にします：$（ '＃Identifier'）。ポップオーバー（オプション）
ポップオーバープラグインは、前述のドロップダウンメニューやその他のプラグインのようなものではなく、純粋なCSSプラグインではありません。プラグインを使用するには、jQuery（javascriptを読む）を使用してアクティブ化する必要があります。次のスクリプトを使用して、ページ内のすべてのポップオーバーを有効にします。
$（function（）{$（ "[data-toggle = 'popover']"）。popover（）;}）;
<ボタンタイプ= "ボタン"
data-container = "body" data-toggle = "Popover" data-clacement = "left" data-content = "左側のポップオーバーの一部のコンテンツ" >左のポップオーバー
</button>
（2）オプション
Bootstrap Data API（Bootstrap Data API）を介して追加されるか、JavaScriptを介して呼び出されるオプションがいくつかあります。次の表には、これらのオプションがリストされています。
（3）メソッド
ポップオーバープラグインの便利な方法は次のとおりです。
（4）イベント
次の表には、ポップアップ（ポップオーバー）プラグインで使用されるイベントを示します。これらのイベントは、機能のフックとして使用できます。
8。ブートストラップ警告ボックス（アラート）プラグイン
アラートメッセージは、主にエンドユーザーに警告メッセージや確認メッセージなどの情報を表示することを望みます。アラートプラグインを使用して、すべての警告ボックスメッセージにキャンセル可能な機能を追加できます。
（1）使用
次の2つの方法で、警告ボックスの解雇機能を有効にすることができます。
A.データ属性を介して：データAPI（データAPI）を介してキャンセル可能な関数を追加します。 data-dismiss = "alert"を閉じるボタンに追加するだけで、閉じる機能が自動的に警告ボックスに追加されます。
<a data-dismiss = "alert" href = "＃" aria-hidden = "true">
×
</a>
B. JavaScriptを介して：javascriptを介してキャンセルされた関数を追加：$（ "。alert"）。alert（）
<div> <a href = "＃" data-dismiss = "alert">×</a> <strong>警告！ </strong>ネットワーク接続に問題があります。 </div>
（2）メソッド
アラートプラグインには、いくつかの便利な方法があります。
（3）イベント
次の表には、アラートプラグインで使用するイベントを示します。これらのイベントは、機能のフックとして使用できます。
9。Bootstrapボタンプラグイン
ボタンプラグインを使用すると、ボタンステータスの制御や、ツールバーなどの他のコンポーネントのボタングループの作成など、相互作用を追加できます。
（1）ローディングステータス
ボタンに読み込みステータスを追加するには、属性としてボタン要素にデータロードテキスト= "ロード..."を追加するだけです。
<button id = "fat-btn" data-loading-text = "loading ..." type = "button"> loading status </button> <script> $（function（）{$（ "。btn"）。（2）シングルスイッチ
単一のボタンのスイッチをアクティブにする（つまり、ボタンの通常の状態をプレス状態に変更し、その逆）、その属性としてボタン要素にdata-toggle = "ボタン"を追加するだけです。
<ボタンタイプ= "button" data-toggle = "button">シングルスイッチ</button>
（3）チェックボックス
チェックボックスグループを作成し、データ属性data-toggle = "bottons"をBTN-Groupに追加して、チェックボックスグループにトグルを追加できます。
<divdata-toggle = "bottons"> <label> <入力タイプ= "チェックボックス">オプション1 </label> <label> <入力タイプ= "チェックボックス">オプション3 </label> </div>
（4）ラジオボタン（ラジオ）
同様に、Radio Button Groupを作成し、データ属性data-toggle = "Bottons"をBTN-Groupに追加することにより、ラジオボタングループのトグルを追加できます。
（5）メソッド
ボタンプラグインのいくつかの便利な方法は次のとおりです。
10。BootstrapCollapseプラグイン
崩壊プラグインを使用すると、ページ領域を簡単に折りたたむことができます。崩壊したナビゲーションまたはコンテンツパネルを作成するために使用するかどうかにかかわらず、多くのコンテンツオプションが可能になります。
（1）以下に示すように、折り畳み式のグループ化または折りたたみパネルを作成します。
<div id = "accordion"> <div> <div> <h4> <a data-toggle = "collapse" data-parent = "＃accordion" href = "＃collapsone">私をクリックして展開し、クリックして再び崩壊します。パート1 </a> </h4> </div> <div id = "collapsone"> <div> nihil anim keffiyeh helvetica、クラフトビール労働wes wes cred nesciunt sapiente ea proident。 Ad Veganを除いて、Butcher Vice Lomo。 </div> </div> </div> </div>
A. data-toggle = "崩壊"拡張または崩壊するコンポーネントのリンクに追加します。
B、HREF、またはデータターゲットプロパティが親コンポーネントに追加され、その値は子コンポーネントのIDです。
C. data-parentプロパティは、折り畳まれたパネルのIDをコンポーネントのリンクに追加して、拡張または崩壊させます。
（2）以下に示すように、アコーディオンタグなしで単純な折りたたみ可能なコンポーネントを作成します。
<button type = "button" data-toggle = "collapse" data-target = "＃demo">シンプルな折りたたみ式コンポーネント</button> <div id = "demo"> nihil keffiyeh helvetica、クラフトビール労働wes wes cred nesciunt sapiente ea proident。 Ad Veganを除くButcher Vice Lomo。</div>
（3）使用
次の表には、重いスケーリングを処理するための崩壊プラグインを示します。
2つの方法で崩壊プラグインを使用できます。
A.データ属性を介して：Data-Toggle = "Collapse"を追加し、要素にデータターゲットを追加して、折りたたみ可能な要素にコントロールを自動的に割り当てます。データターゲットプロパティはCSSセレクターを受け入れ、崩壊効果を適用します。折りたたみ可能な要素にクラス.collapseを追加してください。デフォルトでオンにしたい場合は、追加のクラスを追加します。
折り畳み式のパネルのようなグループ化管理を折りたたみ可能なコントロールに追加するには、データプロパティDataParent = "＃selector"を追加します。
B. JavaScriptを介して：以下に示すように、JavaScriptを介して崩壊法をアクティブにすることができます：$（ '。崩壊'）。
11。ブートストラップカルーセルプラグイン
Bootstrap Carouselプラグインは、サイトにスライダーを追加する柔軟で応答性の高い方法です。それに加えて、コンテンツは、画像、埋め込みフレーム、ビデオ、または配置する他のタイプのコンテンツになるのに十分な柔軟性です。
<div id = "mycarousel"> <！ - carousel indicator-> <ol> <li data-target = "＃mycarousel" data-slide-to = "0"> </li> <li date-target = "＃mycarousel" data-slide-to = "1"> </li> <li> </li> </> </> </> </> < <！ - Carousel Project-> <div> <img src = "/wp-content/uploads/2014/07/slide1.png"> <div>タイトル1 </div> </div> <div> <img src = "/wp-content/uploads/2014/07/slide2.png"> src = "/wp-content/uploads/2014/07/slide3.png"> <div>タイトル3 </div> </div> </div> <！ - carousel navigation-> <a href = "＃mycarousel" data-slide = "prev"> ‹</a> <
（1）使用
A.データ属性を介して：データ属性を使用すると、カルーセルの位置を簡単に制御できます。
プロパティデータスライドは、現在の位置に対するスライドの位置を変更するために、前または次のキーワードを受け入れます。
カルーセルベッドの底にある生のスライドインデックスにデータスライドを使用します。 Data-Slide-to = "2"は、スライダーを特定のインデックスに移動し、インデックスは0からカウントされます。
Data-Ride = "Carousel"プロパティは、ページが読み込まれたときにアニメーション再生を開始するカルーセルをマークするために使用されます。
B. JavaScriptを介して：Carouselは、以下に示すように、JavaScriptを介して手動で呼び出すことができます：$（'。Carousel '）。Carousel（）
（2）オプション
データプロパティまたはJavaScriptを介して渡されるいくつかのオプションがあります。次の表には、これらのオプションがリストされています。
（3）メソッド
カルーセルプラグインの有用な方法を次に示します。
（4）イベント
次の表には、Carouselプラグインで使用されるイベントを示します。これらのイベントは、機能のフックとして使用できます。
12。ブートストラップ追加ナビゲーション（Affix）プラグイン
追加のナビゲーション（Affix）プラグインを使用すると、A <div>をページのどこかに固定できます。プラグインを使用してオンまたはオフを切り替えることもできます。一般的な例はソーシャルアイコンです。彼らはどこかで始まりますが、ページがマークをクリックすると、<div>はどこかにロックされ、ページの残りの部分と一緒にスクロールしません。
（1）使用
データプロパティを介して、またはJavaScriptを介して、添付のナビゲーション（Affix）プラグインを使用できます。
データ属性を介して：要素に追加のナビゲーション（fix）動作を追加する必要がある場合、聴く必要がある要素にdata-spy = "fix"を追加する必要があります。オフセットを使用して、要素のロックと動きを切り替えるときに定義します。
（2）JavaScriptを介して：以下に示すように、JavaScriptを介して要素に手動で追加のナビゲーション（Affix）を追加できます。
$（ '＃myaffix'）。
（3）CSSの配置
上記の両方の方法で、Affixプラグインを使用するには、CSSを介してコンテンツを見つける必要があります。追加のナビゲーション（Affix）プラグインは、3つのクラスの間に切り替えられ、それぞれが特定の状態を示します。以下の手順に従って、これら3つの状態に独自のCSSを設定してください（このプラグインに依存していません）。
A.最初は、プラグインは.Affix-Topを追加して、その最上位の位置に要素を示します。現時点では、CSSポジショニングは必要ありません。
B.追加のナビゲーション（fix）を追加する要素をスクロールするときは、トリガーする必要があります。この時点で、.Affixは.Affix-Topを置き換え、位置を設定します。 （BootstrapのCSSコードによって提供）。
C.ボトムオフセットが定義されている場合、スクロールがこの位置に到達したら、.AffixにAffix-bottomを置き換えます。オフセットはオプションであるため、オフセットが設定されている場合、適切なCSSを同時に設定する必要があります。この場合、位置を追加します。絶対;必要に応じて。
（4）オプション
データプロパティまたはJavaScriptを介して渡されるいくつかのオプションがあります。次の表には、これらのオプションがリストされています。
この記事は「Bootstrapプラグイン使用チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。