부트스트랩 4 목록 그룹

기본 목록 그룹

가장 기본적인 목록 그룹은 목록 항목이 포함된 순서가 지정되지 않은 목록이다.

• 첫 번째 항목
• 두 번째 항목
• 세 번째 항목

예제

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

활성 상태

.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>

연결된 항목이 있는 그룹 나열

연결된 항목이 있는 목록 그룹을 만들려면 <div> 대신 <ul> 및 <a> 대신 <li>을 사용하자.
선택적으로 마우스를 올리면 회색 배경색을 원하는 경우 .list-group-item-action 클래스를 추가한다.

예제

<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>

비활성화된 항목

.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>

플러시 / 테두리 제거

.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>

수평 목록 그룹

목록 항목을 세로가 아닌 가로로 표시하려면(서로 겹쳐서 표시하는 대신 나란히 표시) .list-group-horizontal 클래스를 .list-group 다음에 추가한다.

예제

<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>

상황별 클래스

상황별 클래스를 사용하여 목록 항목의 색상을 지정할 수 있다.

목록 항목을 색칠하는 클래스는 다음과 같다: .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-darklist-group-item-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>

항목을 상황별 클래스와 연결

예제

<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">Danger item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>

배지가 포함된 그룹 나열

.badge 클래스를 유틸리티/도우미 클래스와 결합하여 목록 그룹 내에 배지를 추가한다.

예제

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

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기