본문 바로가기
프로그래밍 언어/부트스트랩(Bootstrap)

[bootstrap] 부트스트랩 – 간단한 콜랩스(Collapse)

by 우림 2016. 2. 8.



어코디언이나 내비게이션에 같은 구성요소를 만들 수 있습니다. 우선 간단한 콜랩스를 만들어 보겠습니다. button 태그에 data-toggle=”collapse”가 포함돼 있고 타겟으로 demo가 있으며 이것은 콘텐츠 영역에 있는 div의 id와 일치합니다. .in을 제거하면 처음으로 닫힌 상태가 됩니다. 버튼뿐만 아니라 a 태그를 사용할수도 있습니다.

 

<button type=”button” class=”btn btn-info” data-toggle=”collapse” data-target=”#demo“>
Simple collapsible
</button>
<div id=”demo” class=”collapse in“>
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>


댓글