여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap – Bootstrap 4 축소
Bootstrap – Bootstrap 4 축소
11개월전 작성
12개월전 수정



부트스트랩 4 축소

기본 접이식

축소형은 많은 양의 콘텐츠를 숨기거나 표시하려는 경우에 유용하다.


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.
예제 1

.collapse 클래스는 축소 가능한 요소(이 예에서는 <div>)를 나타낸다.
버튼을 클릭하면 표시되거나 숨겨지는 콘텐츠다.

접을 수 있는 콘텐츠를 제어(표시/숨기기)하려면 <a> 또는 <button> 요소에 data-toggle=”collapse” 속성을 추가한다.
그런 다음 버튼을 축소 가능한 콘텐츠(<div id=”demo”>)와 연결하는 data-target=”#id” 속성을 추가한다.

⭐ href <a> 요소의 경우 속성 대신 data-target 속성을 사용할 수 있다.

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
기본 예시
예제 보기
예제 2
<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
기본 예시
예제 보기
예제 3
<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.
예제
<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>

기본 예시
예제 보기

참고

Mingg`s Diary
밍구
밍구
공부 목적 블로그