BS3
List Group 생성
.list-group 클래스 가진 <ul> 안에 .list-group-item 클래스 가진 <li> 추가.
<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>
예제보기
List Group Badge (배지)
.badge 클래스 가진 <span> 요소를 .list-group-item 안에 추가.
<ul class="list-group">
<li class="list-group-item">HTML <span class="badge ">New</span></li>
<li class="list-group-item">CSS <span class="badge ">New</span></li>
<li class="list-group-item">JS <span class="badge ">New</span></li>
</ul>
예제보기
List Group Link (링크)
.list-group 클래스 가진 <div> 안에 .list-group-item 클래스 가진 <a> 추가.
<div class="list-group ">
<a href="#" class="list-group-item ">HTML</a>
<a href="#" class="list-group-item">CSS</a>
<a href="#" class="list-group-item">JS</a>
</div>
예제보기
List Group Active (링크 현재위치)
.list-group-item 클래스 가진 <a> 에 .active 클래스 추가.
<div class="list-group">
<a href="#" class="list-group-item active ">HTML</a>
<a href="#" class="list-group-item">CSS</a>
<a href="#" class="list-group-item">JS</a>
</div>
예제보기
List Group Disabled (링크 비활성화)
.list-group-item 클래스 가진 <a> 에 .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>
예제보기
List Group Contextual BackgroundColor 맥락 배경색
.list-group-item 클래스 가진 요소에 .list-group-item-(success/info/warning/danger) 클래스 추가.
<ul class="list-group">
<li class="list-group-item list-group-item-success ">녹색배경</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>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success ">First item</a>
<a href="#" class="list-group-item list-group-item-info ">Second item</a>
<a href="#" class="list-group-item list-group-item-warning ">Third item</a>
<a href="#" class="list-group-item list-group-item-danger ">Fourth item</a>
</div>
예제보기
List Group Custom Content 제목・내용
.list-group-item 클래스 안에 거의 모든 HTML 요소 추가 가능.
BS는 .list-group-item-(heading/text) 클래스 기본 제공.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading ">HTML</h4>
<p class="list-group-item-text ">뼈대</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">CSS</h4>
<p class="list-group-item-text">디자인</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">JS</h4>
<p class="list-group-item-text">동작</p>
</a>
</div>
예제보기
