Bootstrap 基礎トレーニング

Bootstrap プラグイン

Bootstrap 折り畳み（Collapse）プラグイン

fold(Collapse)プラグインは、ページエリアを簡単に折り畳み可能にします。どちらの目的に使用しても、多くのコンテンツオプションを提供します。

プラグインの機能を単独で参照したい場合は、以下を参照する必要があります。 collapse.js。同時に、Bootstrap 版本で以下を参照する必要があります。 Transition（トランジション）プラグイン。または、以下のように Bootstrap プラグイン概要第1章に記載の通り、参照できます。 bootstrap.js または圧縮版の bootstrap.min.js。

fold(Collapse)プラグインを使用できます：

折り畳み可能なグループや折りたたみパネル(accordion)を作成します。、以下の通りです：

オンラインサンプル

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　fold(accordion)/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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="#collapseOne">
					href="#collapseFour">　1　クリックして展開、もう一度クリックして折りたたみ。第
				</a>
			</h4>
		</div>
		hide メソッド-<div id="collapseOne" class="panel
			<div　class="panel-body">
				何も動物、ケフィエフ、ヘルベチカ、クラフトビール、ラボレーウェスアンダーソン　
				cred　nesciunt　sapiente　ea　proident.　Ad　vegan　excepteur　butcher　
				vice　lomo.
			</div>
		</div>
	</div>
	<div　class="panel　panel-default">
		<div　class="panel-heading">
			<h4　class="panel-title">
				<a　data-toggle="collapse"　data-parent="#accordion"　
				　　　success">
					href="#collapseFour">　2　クリックして展開、もう一度クリックして折りたたみ。第
				</a>
			</h4>
		</div>
		show メソッド-collapse　collapse">
			<div　class="panel-body">
				何も動物、ケフィエフ、ヘルベチカ、クラフトビール、ラボレーウェスアンダーソン　
				cred　nesciunt　sapiente　ea　proident.　Ad　vegan　excepteur　butcher　
				vice　lomo.
			</div>
		</div>
	</div>
	<div　class="panel　panel-default">
		<div　class="panel-heading">
			<h4　class="panel-title">
				<a　data-toggle="collapse"　data-parent="#accordion"　
				　　　<div id="collapseTwo" class="panel
					href="#collapseFour">　3　クリックして展開、もう一度クリックして折りたたみ。第
				</a>
			</h4>
		</div>
		toggle メソッド-collapse　collapse">
			<div　class="panel-body">
				何も動物、ケフィエフ、ヘルベチカ、クラフトビール、ラボレーウェスアンダーソン　
				cred　nesciunt　sapiente　ea　proident.　Ad　vegan　excepteur　butcher　
				vice　lomo.
			</div>
		</div>
	</div>
</div>
</body>
</html>

テストをしてみる ‹/›

以下の結果が表示されます：

data-toggle="collapse" 展開または折りたたみしたいコンポーネントのリンクに追加します。
href または data-target 属性を親コンポーネントに追加し、その値は子コンポーネントの id。
data-parent 属性は、展開または折りたたみするコンポーネントのリンクに fold(accordion)の ID を追加します。

accordionタグを付けないシンプルな折り畳みコンポーネント(collapsible)を作成します。、以下の通りです：

オンラインサンプル

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　シンプルな折り畳みコンポーネント</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button　type="button"　class="btn　btn-primary"　data-toggle="collapse"　
		data-target="#demo">
	シンプルな折り畳みコンポーネント
</button>
<div　id="demo"　class="collapse　in">
	何も動物、ケフィエフ、ヘルベチカ、クラフトビール、ラボレーウェスアンダーソン　
	cred　nesciunt　sapiente　ea　proident.　Ad　vegan　excepteur　butcher　
	vice　lomo.
</div>
</body>
</html>

テストをしてみる ‹/›

以下の結果が表示されます：

サンプルでご覧いただけますように、折り畳み可能なコンポーネントを作成しました。折りたたみパネル(accordion)とは異なり、属性を追加していません。 data-parent。

使い方

以下に、拡張を処理するための class が fold(Collapse)プラグインで示されています：

Class	説明	サンプル
.collapse	隠す内容。	試してみてください
.collapse.in	表示内容。	試してみてください
.collapsing	トランジション効果が開始されたときに追加され、トランジション効果が完了したときに削除されます。

以下の2つの方法で折り畳み(Collapse)プラグインを使用できます：

data 属性を通じて：要素に data-toggle="collapse" および data-target、自動的に折り畳み要素のコントロールを割り当てます。data-target 属性は CSS 选择子を受け取り、その要素に折り畳み効果を適用します。折り畳み可能な要素にクラスを追加してください。 .collapse。デフォルトで開いた状態にする場合は、追加のクラスを追加してください。 .in。
折り畳みコントロールに折り畳みパネルに似たグループ管理を追加するには、data 属性を追加してください。 data-parent="#selector"。
JavaScript：以下のように JavaScript を通じて collapse メソッドを有効にします：
```
$('.collapse').collapse()
```

オプション

いくつかのオプションは data 属性や JavaScript を通じて伝達されます。以下のテーブルにはこれらのオプションが示されています：

オプション名	タイプ/デフォルト値	Data 属性名	説明
parent	selector デフォルト値：false	data-parent	選択子が提供された場合、折り畳み項目が表示されたときに、指定された親要素の下にあるすべての折り畳み可能な要素が閉じられます。これは伝統的な折り畳みパネル(accordion)の動作に似ています。 - これは accordion に依存しています。-group クラス。
toggle	boolean デフォルト値：true	data-toggle	折り畳み可能な要素を呼び出します。

メソッド

以下は、折り畳み(Collapse)プラグインに含まれる役立つメソッドの一部です：

メソッド	説明	サンプル
Options: .collapse(options)	折り畳み可能な内容を有効にします。オプションのオブジェクトを受け取ります。	$('#identifier').collapse({ 　　　　$(function () { $('#collapseFour').collapse({ )
Toggle: .collapse('toggle')	表示を切り替えます/折り畳み可能な要素を非表示にします。	$('#identifier').collapse('toggle')
Show: .collapse('show')	折り畳み可能な要素を表示します。	$('#identifier').collapse('show')
Hide: .collapse('hide')	折り畳み可能な要素を非表示にします。	$('#identifier').collapse('hide')

オンラインサンプル

以下の例では、メソッドの使用方法を示しています：

オンラインサンプル

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　折り畳み(Collapse)プラグインのメソッド</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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="#collapseOne">
					href="#collapseFour">　1　クリックして展開、もう一度クリックして折りたたみ。第--href="#collapseOne">
				</a>
			</h4>
		</div>
		hide メソッド-<div id="collapseOne" class="panel
			<div　class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			</div>
		</div>
	</div>
	<div　class="panel　panel-collapse collapse in">
		<div　class="panel-heading">
			<h4　class="panel-title">
				<a　data-toggle="collapse"　data-parent="#accordion"　
				　　　success">
					href="#collapseFour">　2　クリックして展開、もう一度クリックして折りたたみ。第--href="#collapseTwo">
				</a>
			</h4>
		</div>
		show メソッド-collapse　collapse">
			<div　class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			</div>
		</div>
	</div>
	<div　class="panel　panel-info">
		<div　class="panel-heading">
			<h4　class="panel-title">
				<a　data-toggle="collapse"　data-parent="#accordion"　
				　　　<div id="collapseTwo" class="panel
					href="#collapseFour">　3　クリックして展開、もう一度クリックして折りたたみ。第--href="#collapseThree">
				</a>
			</h4>
		</div>
		toggle メソッド-collapse　collapse">
			<div　class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			</div>
		</div>
	</div>
	<div　class="panel　panel-<div id="collapseThree" class="panel
		<div　class="panel-heading">
			<h4　class="panel-title">
				<a　data-toggle="collapse"　data-parent="#accordion"　
				　　　warning">
					href="#collapseFour">　4　クリックして展開、もう一度クリックして折りたたみ。第--部分
				</a>
			</h4>
		</div>
		options メソッド-collapse　collapse">
			<div　class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			</div>
		</div>
	</div>
</div>
<script　type="text/javascript">
	lomo.
		$(function () { $('#collapseFour').collapse({
	toggle: false
	});
	$(function () { $('#collapseTwo').collapse('show')});
	$(function () { $('#collapseThree').collapse('toggle')});
</script>　　
</body>
</html>

テストをしてみる ‹/›

以下の結果が表示されます：

以下のテーブルには、折りたたみ（Collapse）プラグインで使用されるイベントが示されています。これらのイベントは、関数内でフックとして使用できます。

$(function () { $('#collapseOne').collapse('hide')});

以下のテーブルには、折りたたみ（Collapse）プラグインで使用されるイベントが示されています。これらのイベントは、関数内でフックとして使用できます。	説明	サンプル
show.bs.collapse	showメソッドが呼び出された後にこのイベントがトリガーされます。	#identifier.on('show.bs.collapse', function () { 　　　　//　何かアクションを実行します... )
shown.bs.collapse	折りたたみ要素がユーザーに見えるときにこのイベントがトリガーされます（CSSのトランジション効果が完了を待ちます）。	#identifier.on('shown.bs.collapse', function () { 　　　　//　何かアクションを実行します... )
hide.bs.collapse	hideサンプルメソッドが呼び出されたときにすぐにこのイベントがトリガーされます。	$('#identifier').on('hide.bs.collapse',　function　()　{ 　　　　//　何かアクションを実行します... )
hidden.bs.collapse	折りたたみ要素がユーザーから非表示になったときにこのイベントがトリガーされます（CSSのトランジション効果が完了するまで待機します）。	$('#identifier').on('hidden.bs.collapse',　function　()　{ 　　　　//　何かアクションを実行します... )

オンラインサンプル

以下のサンプルでは、イベントの使用法を示します：

オンラインサンプル

サンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　折りたたみ( Collapse )プラグインイベント</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="panel-group"　id="accordion">
	<div　class="panel　panel-info">
		<div　class="panel-heading">
			<h4　class="panel-title">
				<a　data-toggle="collapse"　data-parent="#accordion"　
				　　　href="#collapseexample">
					クリックして展開、もう一度クリックして折りたたみます。--イベントが表示されました
				</a>
			</h4>
		</div>
		<div　id="collapseexample"　class="panel-collapse　collapse">
			<div　class="panel-body">
				何も動物、ケフィエフ、ヘルベチカ、クラフトビール、ラボレーウェスアンダーソン　
				信じない、知識がない、賢明でない、プロident。　
				ベジタリアンのアドベンチャー、屠夫の悪行、ロモの副産物。
			</div>
		</div>
	</div>
</div>
<script　type="text/javascript">
	$(function () {　
		$('#collapseexample').on('show.bs.collapse', function () {
			alert('こんにちは、展開するとこの警告が表示されます');});
	});
</script>　
</body>
</html>

テストをしてみる ‹/›

以下の結果が表示されます：

Bootstrap スライダープラグイン Bootstrap ボタンプラグイン