목차
- List Group 기본
- List Group Active (활성화 = 현재위치 표시)
- List Group Link (링크 허버 배경색)
- List Group Link Disable (링크비활성화 = 클릭방지)
- List Group Border Remove (외곽 테두리 제거)
- Numbered List Groups (번호 달린 리스트)
- List Group Horizon (가로로 나열 = 나란히 배치)
- List Group Color (색깔) - 배경색
- List Group Badge (배지)
※ BS4와 유사하나, (번호 달린 리스트 / 배지색 / 배지모양) 클래스 다름.
List Group 기본
※ 세로로 나열됨.
<ul class="list-group">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">JS</li>
</ul>
예제보기
※ BS4와 동일
List Group Active (활성화 = 현재위치 표시)
※ 파란색 배경색에 흰 글씨로 표시됨.
<ul class="list-group">
<li class="list-group-item active">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">JS</li>
</ul>
결과보기
List Group Link (링크 허버 배경색)
※ 링크 리스트 경우, <ul><li> 태그 대신, <div><a> 태그를 사용.
※ .list-group-item-action 클래스 : 링크 허버시 연회색 배경색 적용.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">HTML</a>
<a href="#" class="list-group-item list-group-item-action">CSS</a>
<a href="#" class="list-group-item list-group-item-action">JS</a>
</div>
예제보기
※ BS4와 동일
List Group Link Disable (링크비활성화 = 클릭방지)
※ .disabled 클래스: 클릭 안 되는 연회색 글씨로 표현됨.
<div class="list-group">
<a href="#" class="list-group-item disabled">HTML</a>
<a href="#" class="list-group-item">CSS</a>
<a href="#" class="list-group-item">JS</a>
</div>
예제보기
※ BS4와 동일
List Group Border Remove (외곽 테두리 제거)
※ .list-group-flush 클래스: 외곽 테두리와 둥근 모서리 제거
<ul class="list-group list-group-flush">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">JS</li>
</ul>
예제보기
※ BS4와 동일
Numbered List Groups (번호 달린 리스트)
※ .list-group-numbered 클래스 - 리스트 앞에 순번 표시. (1부터 시작)
<ol class="list-group list-group-numbered">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">JS</li>
</ol>
결과보기
※ BS5에 새로 생김.
List Group Horizon (가로로 나열 = 나란히 배치)
※ .list-group-horizontal 클래스: 리스트 아이템을 옆으로 나열
<ul class="list-group list-group-horizontal">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">JS</li>
</ul>
결과보기
※ BS4와 동일
List Group Color (색깔) - 배경색
[링크 X]
<ul class="list-group">
<li class="list-group-item list-group-item-success">녹색</li>
<li class="list-group-item list-group-item-secondary">회색</li>
<li class="list-group-item list-group-item-info">청록색</li>
<li class="list-group-item list-group-item-warning">주황색</li>
<li class="list-group-item list-group-item-danger">빨간색</li>
<li class="list-group-item list-group-item-primary">파란색</li>
<li class="list-group-item list-group-item-dark">진회색</li>
<li class="list-group-item list-group-item-light">연회색</li>
</ul>
결과보기
[링크O]
<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-success">녹색</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">회색</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">청록색</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">주황색</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>
결과보기
※ BS4와 동일
List Group Badge (배지)
※ Badge 자세히 보기
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
HTML <span class="badge bg-primary rounded-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
CSS <span class="badge bg-primary rounded-pill">34</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
JS <span class="badge bg-primary rounded-pill">56</span>
</li>
</ul>
결과보기
cf. BS4와 badge 배경색/모양 클래스 다름.
