Bootstrap 5 목록 그룹

강의 추천:

기본 목록 그룹

가장 기본적인 목록 그룹은 목록 항목을 포함한 불연속 목록입니다: .list-group .list-group-item <ul> 기본 목록 그룹을 만들기 위해 클래스를 사용하세요 요소와 클래스는 .list-group-item <li> 의

예제

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

직접 시험해 보세요

요소:

활성 상태를 사용하세요 .active 현재 항목을 강조하기 위해 클래스를 사용하세요:

예제

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

직접 시험해 보세요

링크 항목이 포함된 목록 그룹

링크 항목이 포함된 목록 그룹을 만들기 위해 사용하세요 <div> 대신 <ul>으로 <a> 대신 <li>그리고,��율할 때 회색 배경색을 원하시면 추가하세요 .list-group-item-action 분류:

예제

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">첫 번째 항목</a>
  <a href="#" class="list-group-item list-group-item-action">두 번째 항목</a>
  <a href="#" class="list-group-item list-group-item-action">세 번째 항목</a>
</div>

직접 시험해 보세요

사용할 수 없는 아이템

.disabled 클래스는 사용할 수 없는 아이템에 더 밝은 텍스트 색상을 추가합니다. 링크에서 사용할 때, 마우스 오버 효과가 제거됩니다：

예제

<div class="list-group">
  <a href="#" class="list-group-item disabled">사용할 수 없는 아이템</a>
  <a href="#" class="list-group-item disabled">사용할 수 없는 아이템</a>
  <a href="#" class="list-group-item">세 번째 항목</a>
</div>

직접 시험해 보세요

경계선 제거

사용하여 .list-group-flush 클래스를 사용하여 경계선과 둥글은 제거됩니다：

예제

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

직접 시험해 보세요

숫자가 있는 목록 그룹

사용하여 .list-group-numbered 클래스를 사용하여 숫자가 앞에 오는 목록 아이템을 생성합니다：

예제

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

직접 시험해 보세요

수평 목록 그룹

리스트 아이템이 수직으로 대체되지 않고 수평으로 표시되도록 하려면 (가로로 대체되지 않고 쌓이지 않도록 하려면) 다음을 추가하세요: .list-group-horizontal 클래스를 추가하여 .list-group：

예제

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

직접 시험해 보세요

컨텍스트 클래스

컨텍스트 클래스는 리스트 아이템에 색상을 추가하는 데 사용됩니다：

리스트 아이템에 색상을 부여하는 클래스는 다음과 같습니다：

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

예제

<ul class="list-group">
  <li class="list-group-item list-group-item-success">성공 아이템</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>

직접 시험해 보세요

컨텍스트 클래스가 있는 링크 아이템

예제

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">데이지 아이템</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">프리미어 아이템</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">다크 아이템</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">라이트 아이템</a>
</div>

직접 시험해 보세요

배지가 달린 목록 그룹

를 .badge class와 utility/helper 클래스를 결합하여 목록 그룹에 배지를 추가할 수 있습니다:

예제

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    받은 편지함
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    광고 이메일
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    휴지통
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

직접 시험해 보세요