부트스트랩 4 축소
기본 접을 수 있는
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>
기본적으로 접을 수 있는 콘텐츠는 숨겨져 있습니다. .show그러나 기본적으로 콘텐츠를 표시하도록 클래스를 추가할 수 있습니다 .
예시
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</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 id="accordion">
<div class="card">
<div
class="card-header">
<a class="card-link"
data-toggle="collapse" href="#collapseOne">
Collapsible
Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseTwo">
Collapsible
Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseThree">
Collapsible
Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
</div>
전체 부트스트랩 4 참조 축소
모든 축소 옵션, 메서드 및 이벤트에 대한 전체 참조를 보려면 Bootstrap 4 JS 축소 참조 로 이동 하십시오.