기본 축소
숨기려 및 콘텐츠의 많은 양을 표시 할 때 Collapsibles 유용합니다 :
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 클래스의 (a 축소 요소를 나타내는 <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 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> »그것을 자신을 시도 축소 목록 그룹
- 하나
- 두
- 세
다음은 내부 목록 그룹과 접을 수있는 패널을 보여줍니다 :
예
<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.
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 접을 수있는 항목 중 하나가 표시 될 때 지정된 부모 아래의 모든 접을 수있는 요소가 종료됩니다 있는지 확인하기 위해 속성을.
예
<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> »그것을 자신을 시도 전체 Bootstrap 축소 참조
모든 축소 옵션, 방법 및 이벤트의 완전한 참고로, 우리로 이동 Bootstrap JS 축소 참조 .