Bootstrap 5 클립

기본 접히기

대량의 내용을 숨기고 표시하려면, 접히는 컴포넌트가 매우 유용합니다:

예제

<button data-bs-toggle="collapse" data-bs-target="#demo">봄</button>
<div id="demo" class="collapse">
  <p>胜日寻芳泗水滨，无边光景一时新。</p>
  <p>东风面识等闲，万紫千红总是春。</p>
</div>

직접 시험해 보세요

예제 설명

.collapse 클래스를 사용하여 접히는 요소를 지정합니다(예: <div>). 버튼을 클릭하면 표시되거나 숨겨질 내용입니다.

접히는 내용(표시/숨기기)를 제어하려면, data-bs-toggle="collapse" 속성을 <a> 또는 <button> 요소에 추가한 후, 추가합니다. data-bs-target="#id" 속성을 사용할 수 있습니다(예: <div id="demo">).

주석:<a> 요소에 대해, 버튼과 접히는 내용을 연결할 수 있는 href 속성을 대체합니다: data-bs-target 속성:

예제

<a href="#demo" data-bs-toggle="collapse">봄</a>
<div id="demo" class="collapse">
  <p>胜日寻芳泗水滨，无边光景一时新。</p>
  <p>东风面识等闲，万紫千红总是春。</p>
</div>

직접 시험해 보세요

기본적으로, 접히는 내용은 숨겨져 있습니다. 그러나, 추가할 수 있습니다. .show 클래스를 사용하여 기본적으로 내용을 표시합니다:

예제

<div id="demo" class="collapse show">
  <p>胜日寻芳泗水滨，无边光景一时新。</p>
  <p>东风面识等闲，万紫千红总是春。</p>
</div>

직접 시험해 보세요

Accordion(악기 연주 소리)

다음 예제에서 card 컴포넌트를 확장하여 간단한 악기 연주 소리를 표시합니다.

주석:사용 data-bs-parent 속성은 지정된 부모 아래에 하나의 폴더를 표시할 때, 모든 폴더 요소를 닫습니다.

예제

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        폴더 그룹 프로젝트 #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>春日</h3>
        <p>胜日寻芳泗水滨，无边光景一时新。</p>
        <p>东风面识等闲，万紫千红总是春。</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        폴더 그룹 프로젝트 #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>初夏绝句</h3>
        <p>纷纷红紫已成尘，布谷声中夏令新。</p>
        <p>夹路桑麻行不尽，始知身是太平人。</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        폴더 그룹 프로젝트 #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>山行</h3>
        <p>寒山石径斜，白云深处有人家。</p>
        <p>枫林晚坐停车，霜叶红于二月花。</p>
      </div>
    </div>
  </div>
</div>

직접 시험해 보세요