[Bootstrap] List Groups

기타/Bootstrap

[Bootstrap] List Groups

glorypang 2025. 3. 26. 00:21

728x90

SMALL

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>

728x90

LIST