4-6. 리스트 그룹
■ 기본 목록 그룹
기본적인 목록 그룹은 목록 항목이 있는 순서 없는 목록입니다. 기본 목록 그룹을 만들려면
<ul> 요소에 클래스 .list-group와 <li> 요소에 클래스 .list-group-item을 사용합니다.
기본 목록 그룹(list group)
ex4-16.html
<div class="container mt-3">
<h3>기본 목록 그룹</h3>
<ul class="list-group">
<li class="list-group-item active">항목1</li>
<li class="list-group-item">항목2</li>
<li class="list-group-item">항목3</li>
</ul>
</div>
ex4-16.html의 실행 결과
■ 목록 그룹 링크
목록 그룹의 항목에 링크를 걸려면 <ul> 대신 <div>과 <a> 요소를 사용합니다.
클래스 .list-group-item-action은 마우스를 올렸을 때 회색으로 배경색을 변경합니다. 그리고 클래스 .disabled는 항목의 비활성화를 의미합니다.
<div class="container mt-3">
<h3>목록 그룹 링크</h3>
<div class="list-group">
<a href="#" class="list-group-item disabled">항목1</a>
<a href="#" class="list-group-item list-group-item-action">항목2</a>
<a href="#" class="list-group-item list-group-item-action">항목3</a>
</div>
</div>
ex4-17.html의 실행 결과
■ 수평 목록 그룹
목록 항목을 수직 대신 수평으로 표시하려면 .list-group. 다음에 클래스.list-group-horizontal을 추가합니다.
<div class="container mt-3">
<h3>수평 목록 그룹</h3>
<div class="list-group list-group-horizontal">
<a href="#" class="list-group-item active">항목1</a>
<a href="#" class="list-group-item disabled">항목2</a>
<a href="#" class="list-group-item disabled">항목3</a>
</div>
</div>
ex4-18.html의 실행 결과
■ 목록 그룹 색상
목록 항목을 색칠하는 클래스는 다음과 같습니다.
.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
<div class="container mt-3">
<h3>목록 그룹 색상</h3>
<ul class="list-group">
<li class="list-group-item list-group-item-success">항목1</li>
<li class="list-group-item list-group-item-secondary">항목2</li>
<li class="list-group-item list-group-item-info">항목3</li>
</ul>
</div>
ex4-19.html의 실행 결과
■ 링크 목록 그룹 색상
링크 목록 그룹에 색상을 적용하려면 클래스 .list-group-item-success, .list-group-item-secondary, .list-group-item-dark 등을 사용합니다.
<div class="container mt-3">
<h3>링크 목록 그룹 색상</h3>
<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 list-group-item-info">항목1</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">항목2</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">항목3</a>
</div>
</div>
ex4-20.html의 실행 결과
■ 배지 목록 그룹
목록 그룹 내에 배지를 추가하려면 다음 예에서와 같이 하면 됩니다.
<div class="container mt-3">
<h3>배지 목록 그룹</h3>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
받은 편지함
<span class="badge bg-primary rounded-pill">15</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
보낸 편지함
<span class="badge bg-primary rounded-pill">26</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
휴지통
<span class="badge bg-primary rounded-pill">11</span>
</li>
</ul>
</div>
ex4-21.html의 실행 결과
