TwitterのBootstrapは、現在最も人気のあるフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。次に、この記事を通して、ブートストラップ折りたたみ（崩壊）プラグインの使用例を紹介します。見てみましょう！
崩壊プラグインを使用すると、ページ領域を簡単に折りたたむことができます。崩壊したナビゲーションまたはコンテンツパネルを作成するために使用するかどうかにかかわらず、多くのコンテンツオプションが可能になります。
プラグインの機能を個別に参照する場合は、collapse.jsを参照する必要があります。同時に、ブートストラップバージョンのトランジションプラグインを参照する必要もあります。または、bootstrapプラグインの概要章で述べたように、bootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照できます。
Collapseプラグインを使用できます。
次のように、折りたたみ可能なグループ化パネルまたは折り畳みパネルを作成します。
<！doctype html> <html> <head> <title> bootstrapインスタンス - 折りたたみパネル</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "styleSheet"> <script src = "/scripts/jquery.min.js"> </script> < src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "arcution"> <div> <h4> <a data-toggle = "collapse" data-parent = "＃auction" href = "＃collapseone"パート1 </a> </h4> </div> <div id = "collapsone"> <div> nihil anim keffiyeh helvetica、クラフトビール労働wes wes cred nesciunt sapiente ea proident。 Ad Veganを除いて、Butcher Vice Lomo。パート2 </a> </h4> </div> <div id = "collapsetwo"> <div> nihil anim keffiyeh helvetica、クラフトビール労働ウェスアンダーソンクレッドネスシュントサピエンテeaのプロデューAd Veganを除くBegan butcher bice lomo。パート3 </a> </h4> </div> <div id = "collapseThree"> <div> nihil anim keffiyeh helvetica、クラフトビール労働ウェスアンダーソン信用nesciunt sapiente ea Proident。 Ad Veganを除くButcher Vice Lomo
結果は次のとおりです。
data-toggle = "崩壊"は、拡張または崩壊するコンポーネントへのリンクに追加されます。
HREFまたはデータターゲットプロパティが親コンポーネントに追加され、その値は子コンポーネントのIDです。
Data-Parentプロパティは、崩壊したパネルのIDをコンポーネントのリンクに追加して、拡張または崩壊させます。
以下に示すように、アコーディオンタグなしで単純な折りたたみ可能なコンポーネントを作成します。
<！doctype html> <html> <head> <title> bootstrapインスタンス - シンプルな折りたたみ式コンポーネント</title> <link href = "/css/bootstrap.min.css" rel = "styleSheet"> <スクリプトsrc = "/script/jquery.min.min.js"> </</script src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <button> <button = "button" data-toggle = "collapse" data-target = "＃demo"> simple折りたたみ式コンポーネント> <div id = "demo"> nihil anim amil beffiyeh helidtica Ad Veganを除くButcher Vice Lomo。</div> </body> </html>
結果は次のとおりです。
インスタンスでわかるように、折り畳まれたパネルとは異なり、折りたたみ可能なコンポーネントを作成しましたが、プロパティData-Parentを追加しませんでした。
使用法
次の表には、重いスケーリングを処理するための崩壊プラグインを示します。
2つの方法で崩壊プラグインを使用できます。
データ属性を介して：data-toggle = "collapse"を追加し、要素にデータターゲットを追加して、折りたたみ可能な要素にコントロールを自動的に割り当てます。データターゲットプロパティはCSSセレクターを受け入れ、崩壊効果を適用します。折りたたみ可能な要素にクラス.collapseを追加してください。デフォルトでオンにしたい場合は、追加のクラスを追加します。
折り畳み式のパネルのようなグループ化管理を折りたたみ可能なコントロールに追加するには、データプロパティDataParent = "＃selector"を追加します。
JavaScriptを介して：以下に示すように、崩壊法はJavaScriptを介してアクティブにすることができます。
$（'。Collapse '）。collapse（）
オプション
データプロパティまたはJavaScriptを介して渡されるいくつかのオプションがあります。次の表には、これらのオプションがリストされています。
方法
崩壊プラグインの有用な方法は次のとおりです。
例
次の例は、方法の使用を示しています。
<！doctype html> <html> <head> <title> bootstrapインスタンス - 崩壊プラグインメソッド</title> <link href = "/css/bootstrap.min.css" rel = "styleSheet"> <スクリプトSRC = "/スクリプトsrc = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "arcution"> <div> <h4> <a data-toggle = "collapse" data-parent = "＃auction" href = "＃collapseone"パート1-ハイド方法</a> </h4> </div> <div id = "collapsone"> <div> nihil anim keffiyeh helvetica、クラフトビール労働ウェスアンダーソンクレッドネシュントサピエンテeaプロデューAd Veganを除いて、Butcher Vice Lomo。パート2 - ショー方法</a> </h4> </div> <div id = "collapsetwo"> <div> nihil anim keffiyeh helvetica、クラフトビール労働wesアンダーソン・アンダーソン・クレッド・ネスシュント・サピエンテea Ad Veganを除くBegan butcher bice lomo。パート3- toggleメソッド</a> </h4> </div> <div id = "collapseThree"> <div> nihil anim keffiyeh helvetica、クラフトビール労働ウェスアンダーソンクレッドネスシュントサピエンテea Ad Veganを除くBegan butcher bice lomo。パート4--オプション方法</a> </h4> </div> <div id = "collapsefour"> <div> nihil anim keffiyeh helvetica、クラフトビール労働ウェスアンダーソンの信用nesciunt sapiente ea Proident。 AD VEGANを除くButcher Vice Lomo。 $（ '＃collapsethree'）
結果は次のとおりです。
イベント
次の表には、崩壊プラグインで使用されるイベントを示します。これらのイベントは、機能のフックとして使用できます。
例
次の例は、イベントの使用を示しています。
<！doctype html> <html> <head> <title> bootstrapインスタンス - 崩壊プラグインイベント</title> <link href = "/css/bootstrap.min.css" rel = "styleSheet"> <スクリプトsrc = "/スクリプトsrc = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "arcution"> <div> <h4> <a data-toggle = "collapse" data-parent = " - ショーンイベント</a> </h4> </div> <div id = "collapsexample"> <div> nihil anim keffiyeh helvetica、クラフトビール労働ウェスアンダーソンクレドネスシュントサピエンテEAプロデイAd Veganを除くBegan butcher bice lomo。
結果は次のとおりです。
上記は、編集者が紹介したブートストラップ折りたたみ（崩壊）プラグインの使用例の詳細な説明です。私はそれが誰にでも役立つことを願っています！