[Bootstrap] Dropdowns

1. 기본 드롭다운

• 드롭다운은 사용자에게 여러 선택지를 보여주는 토글 가능한 메뉴
• `.dropdown`: 드롭다운 컨테이너
• `.dropdown-toggle`: 토글 버튼
• `data-bs-toggle="dropdown"`: 토글 기능 활성화
• `.dropdown-menu`: 드롭다운 메뉴
• `.dropdown-item`: 메뉴 항목

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    드롭다운 버튼
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">항목 1</a></li>
    <li><a class="dropdown-item" href="#">항목 2</a></li>
    <li><a class="dropdown-item" href="#">항목 3</a></li>
  </ul>
</div>

---

2. 구분선 및 헤더

• `.dropdown-divider`: 구분선

<li><hr class="dropdown-divider"></li>

 

• `.dropdown-header`: 헤더 텍스트

<li><h5 class="dropdown-header">헤더</h5></li>

---

3. 상태 설정

• `.active`: 활성화된 항목 (파란 배경)
• `.disabled`: 비활성 항목 (회색 처리, 클릭 불가)

<li><a class="dropdown-item active" href="#">활성화 항목</a></li>
<li><a class="dropdown-item disabled" href="#">비활성 항목</a></li>

 

---

4. 드롭다운 방향/위치

• `.dropend`: 오른쪽으로 펼침
• `.dropstart`: 왼쪽으로 펼침

<div class="dropdown dropend">...</div>
<div class="dropdown dropup">...</div>

 

• `.dropup`: 위쪽으로 펼침

<div class="dropup">

 

 

• `.dropdown-menu-end`: 드롭다운 메뉴 오른쪽 정렬

<div class="dropdown-menu dropdown-menu-end">

 

---

5. 텍스트 전용 항목

• `.dropdown-item-text`: 클릭 기능 없이 단순 텍스트 표시

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Link 1</a></li>
  <li><a class="dropdown-item" href="#">Link 2</a></li>
  <li><a class="dropdown-item" href="#">Link 3</a></li>
  <li><a class="dropdown-item-text" href="#">Text Link</a></li>
  <li><span class="dropdown-item-text">Just Text</span></li>
</ul>

---

6. 버튼 그룹 내 드롭다운

• `.btn-group` 또는 `.btn-group-vertical` 안에 드롭다운 포함 가능

<div class="btn-group">
  <button class="btn btn-primary">Apple</button>
  <button class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Tablet</a></li>
      <li><a class="dropdown-item" href="#">Smartphone</a></li>
    </ul>
  </div>
</div>