목차
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 배경색/모양 클래스 다름.
