부트스트랩 축소
Bootstrap Collapse 플러그인
Collapse 플러그인을 사용하면 페이지 영역을 쉽게 접을 수 있습니다. 아코디언 탐색 또는 콘텐츠 패널을 만드는 데 사용하든 다양한 콘텐츠 옵션을 허용합니다.
이 플러그인의 기능을 별도로 참조하려면 collapse.js를 참조해야 합니다. 또한 Bootstrap 버전에서 Transition 플러그인을 참조해야 합니다. 또는 Bootstrap 플러그인 개요 장에서 언급한 대로 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.
Collapse 플러그인을 사용할 수 있습니다:
다음과 같이 접을 수 있는 그룹이나 아코디언 을 만들 수 있습니다:
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 折叠面板</title> <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.3.0/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"> 点击我进行展开，再次点击我进行折叠。第 1 部分 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <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" href="#collapseTwo"> 点击我进行展开，再次点击我进行折叠。第 2 部分 </a> </h4> </div> <div id="collapseTwo" 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 class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 点击我进行展开，再次点击我进行折叠。第 3 部分 </a> </h4> </div> <div id="collapseThree" 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> </body> </html>
Run Instance »
클릭 "실행 인스턴스" 버튼을 누르면 온라인 예시를 볼 수 있습니다.
data-toggle="collapse" 확장하거나 축소하려는 구성요소의 링크에 추가하세요.
href 또는 data-target 속성이 상위 구성 요소에 추가되고 해당 값은 하위 구성 요소의 id입니다.
data-parent 속성은 확장 또는 축소할 구성요소의 링크에 아코디언의 ID를 추가합니다.
아래 그림과 같이 아코디언 태그 없이 간단한 축소 가능한 구성 요소를 생성합니다 :
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 简单的可折叠组件</title> <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.3.0/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>
인스턴스 실행»
"인스턴스 실행" 버튼 클릭 온라인 예 보기
예제에서 볼 수 있듯이 축소 가능한 구성 요소를 만들었으며 아코디언과 달리 data-parent 속성을 추가하지 않았습니다.
Usage
다음 표에는 대규모 확장을 처리하기 위해 Collapse 플러그인에서 사용하는 클래스가 나열되어 있습니다.
| Class | Description | Instance |
|---|---|---|
| .collapse | 콘텐츠 숨기기. | 사용해 보세요 |
| .collapse.in | 콘텐츠를 표시합니다. | 사용해 보세요 |
| .collapsing | 은 전환 효과가 시작될 때 추가되고 전환 효과가 완료되면 제거됩니다. |
다음 두 가지 방법으로 축소 플러그인을 사용할 수 있습니다.
데이터 속성을 통해 : 요소에 data-toggle="collapse" 및 data-target을 추가하여 축소 가능한 요소의 컨트롤을 자동으로 할당 . data-target 속성은 CSS 선택기를 허용하고 이에 축소 효과를 적용합니다. 접을 수 있는 요소에 .collapse 클래스를 추가하세요. 기본적으로 활성화하려면 추가 클래스 .in를 추가하세요.
접이식 컨트롤에 아코디언과 같은 그룹화 관리를 추가하려면 데이터 속성 data-parent="#selector"를 추가하세요.
JavaScript를 통해: 축소 메소드는 다음과 같이 JavaScript를 통해 활성화할 수 있습니다.
$('.collapse').collapse()
Options
데이터 속성을 통해 몇 가지 옵션이 있습니다. 또는 JavaScript로 전달됩니다. 다음 표에는 옵션이 나열되어 있습니다.
| 옵션 이름 | 유형/기본값 | 데이터 속성 이름 | 설명 |
|---|---|---|---|
| parent | selector 기본값: false | data-parent | 선택기가 제공되면 축소 가능한 항목이 표시될 때 지정된 상위 요소 아래의 모든 축소 가능한 요소가 닫힙니다. 이는 Accordion과 유사하게 동작합니다. 이는 아코디언 그룹 클래스에 의존합니다. |
| toggle | boolean 기본값: true | data-toggle | Toggle은 축소 가능한 요소를 호출합니다. |
Methods
Collapse 플러그인의 유용한 메소드는 다음과 같습니다. 옵션)
| 토글: | .collapse('toggle')||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
$('#identifier').collapse('toggle') | 표시: | .collapse('show')|||||||||||||||
$('#identifier').collapse('show') | 숨기기: | .collapse('hide')|||||||||||||||
$('#identifier').collapse('hide') |
| Event | Description | Instance |
|---|---|---|
| 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 () {
// 执行一些动作...
}) |
Instance
다음 예에서는 이벤트 사용법을 보여줍니다.
Instance
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 折叠（Collapse）插件事件</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/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">
点击我进行展开，再次点击我进行折叠。--shown 事件
</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>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
