부트스트랩 축소
기본 접을 수 있는
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예에서는 <div>). 이것은 버튼 클릭으로 표시되거나 숨겨지는 콘텐츠입니다.
접을 수 있는 콘텐츠를 제어(표시/숨기기)하려면 data-toggle="collapse"<a> 또는 <button> 요소에 속성을 추가합니다. 그런 다음 data-target="#id"축소 가능한 콘텐츠(<div id="demo">)와 버튼을 연결하는 속성을 추가합니다.
참고:href <a> 요소의 경우 속성 대신 속성을 사용할 수 있습니다 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접을 수 있는 항목 중 하나가 표시될 때 지정된 부모 아래의 모든 접을 수 있는 요소가 닫히도록 합니다.
예시
<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 JS 축소 참조 로 이동하십시오 .