English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 접이판(Collapse) 플러그인

접이판(Collapse) 플러그인은 페이지 영역을 쉽게 접히게 만들 수 있습니다. 여러 가지 내용 옵션을 허용하며, 접이판 nawigation이나 콘텐츠 패널을 만들 수 있습니다.

만약 이 플러그인의 기능을 단독으로 참조하고 싶다면, 당신은 참조해야 합니다 collapse.js。동시에, 당신의 Bootstrap 버전에서도 참조해야 합니다 Transition(전환) 플러그인。또는 그대로 Bootstrap 플러그인 개요 책에서 언급된 것처럼，참조할 수 있습니다 bootstrap.js 또는 압축된 bootstrap.min.js。

접이판(Collapse) 플러그인을 사용하여:

  • 접히는 그룹이나 접이판(accordion)을 생성합니다아래와 같이 보입니다：

    온라인 예제

    !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>
<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">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				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">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				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">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				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 속성을 접이판(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">
	Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
	cred nesciunt sapiente ea proident. Ad vegan excepteur butcher　
	vice lomo.
</div>
</body>
</html>
    테스트해 보세요 ‹/›

    결과는 다음과 같습니다:

    예제에서 볼 수 있듯이, 우리는 접히는 요소를 생성했습니다. 접이판(accordion)과 다르게, 우리는 속성을 추가하지 않았습니다 data-parent。

사용법

아래 표는 휴식(Collapse) 플러그인을 사용하여 복잡한 확장을 처리하는 class를 나열합니다：

Class描述예제
.collapse콘텐츠를 숨깁니다。시도해보세요.
.collapse.in콘텐츠를 표시합니다。시도해보세요.
.collapsing当过渡效果开始时被添加，当过渡效果完成时被移除。　

您可以通过以下两种方式使用折叠(Collapse)插件：

  • 通过 data 属性：向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。

    为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent="#selector"。

  • 通过 JavaScript：可通过 JavaScript 激活 collapse 方法，如下所示：

    $('.collapse').collapse()

选项

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

选项名称类型/默认值Data 属性名称描述
parentselector
默认值：false		data-parent如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。这与传统的折叠面板(accordion)的行为类似 - 这依赖于 accordion-group 类。
toggleboolean
默认值：true		data-toggle切换调用可折叠元素。

方法

下面是一些折叠(Collapse)插件中有用的方法：

方法描述예제
Options: .collapse(options)激活内容为可折叠元素。接受一个可选的 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.collapsehide 예제 메서드를 호출할 때 즉시 이 이벤트가 발생합니다。}}
$('#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">
					클릭하여 펼치기, 다시 클릭하여 접기。--event
				</a>
			</h4>
		</div>
		<div　id="collapseexample"　class="panel-collapse　collapse">
			<div　class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				cred nesciunt sapiente ea proident.　
				Ad vegan excepteur butcher vice lomo.
			</div>
		</div>
	</div>
</div>
<script　type="text/javascript">
	$(function () {　
		$('#collapseexample').on('show.bs.collapse', function () {
			alert('嘿，当您展开时会提示本警告');});
	});
</script>　
</body>
</html>
테스트해 보세요 ‹/›

결과는 다음과 같습니다:

Bootstrap 슬라이드 플러그인Bootstrap 버튼 플러그인