[Bootstrap] List Groups

1. 기본 리스트 그룹

• 리스트 그룹은 항목들을 깔끔하게 나열할 수 있는 구성 요소
• `<ul class="list-group">` + `<li class="list-group-item">`

<ul class="list-group">
  <li class="list-group-item">첫 번째 항목</li>
  <li class="list-group-item">두 번째 항목</li>
  <li class="list-group-item">세 번째 항목</li>
</ul>

 

---

2. 활성화 상태

• `.active` 클래스로 현재 선택된 항목 강조

<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

 

---

3. 링크형 리스트

• `<div class="list-group">` 내부에 `<a>` 요소 사용
• `.list-group-item-action`을 추가하면 hover 효과 적용

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First item</a>
  <a href="#" class="list-group-item list-group-item-action">Second item</a>
  <a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>

 

---

4. 비활성화 항목

• `.disabled` 클래스 사용

<div class="list-group">
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

 

---

5. 테두리 제거

• `.list-group-flush`로 외곽선 및 둥근 모서리 제거

<ul class="list-group list-group-flush">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

 

---

6. 숫자 목록

• `<ol>`과 `.list-group-numbered` 조합으로 순번 자동 표시

<ol class="list-group list-group-numbered">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ol>

 

---

7. 가로형 리스트

• `.list-group-horizontal` 사용

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

 

---

8. 색상 리스트 (Contextual Classes)

• `.list-group-item-primary`
• `.list-group-item-success`
• `.list-group-item-info`
• `.list-group-item-warning`
• `.list-group-item-danger`
• `.list-group-item-secondary`, `.dark`, `.light`

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-secondary">Secondary item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-dark">Dark item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
</ul>

 

---

 

9. 배지 포함 리스트

• `.d-flex justify-content-between align-items-center`로 정렬
• `.badge`, `.rounded-pill` 사용

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Ads
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Junk
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>