ブートストラップの崩壊
基本的な折りたたみ可能
折りたたみ式は、大量のコンテンツを非表示にしたり表示したりする場合に便利です。
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
例
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
例の説明
クラスは折りたたみ可能な要素（この.collapse例では<div>）を示します。これは、ボタンをクリックするだけで表示または非表示になるコンテンツです。
折りたたみ可能なコンテンツを制御（表示/非表示）するには、data-toggle="collapse"属性を<a>または<button>要素に追加します。次に、属性を追加してdata-target="#id"、ボタンを折りたたみ可能なコンテンツ（<div id = "demo">）に接続します。
注： <a>要素の場合、href属性の代わりに属性を使用できdata-target
ます。
例
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
デフォルトでは、折りたたみ可能なコンテンツは非表示になっています。.inただし、デフォルトでコンテンツを表示するクラスを追加できます。
例
<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
折りたたみ式パネル
Panel Body
次の例は、折りたたみ可能なパネルを示しています。
例
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
折りたたみ可能なリストグループ
- One
- Two
- Three
以下に、リストグループが内部にある折りたたみ可能なパネルを示します。
例
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
アコーディオン
痛み自体は重要ですが、痛みは脂肪症のプロセスによって強化されますが、私はそれを減らす時間を与えて、私がいくつかの素晴らしい仕事と痛みをするようにします。ほとんどの場合、私たちの誰もが、そこからの目的を利用することを除いて、あらゆる種類の雇用の行使に来るでしょう。
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
次の例は、パネルコンポーネントを拡張した単純なアコーディオンを示しています。
注：この属性を使用してdata-parent、折りたたみ可能なアイテムの1つが表示されたときに、指定された親の下にあるすべての折りたたみ可能な要素が閉じられるようにします。
例
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
完全なブートストラップ折りたたみリファレンス
すべての折りたたみオプション、メソッド、およびイベントの完全なリファレンスについては、 BootstrapJS折りたたみリファレンスにアクセスしてください。