부트스트랩 목록 그룹
기본 목록 그룹
가장 기본적인 목록 그룹은 목록 항목이 있는 순서 없는 목록입니다.
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
기본 목록 그룹을 만들려면 class 가 있는 요소를 사용하고 class
<ul>가 있는 요소 를 사용합니다 ..list-group<li>.list-group-item
예시
<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>
배지가 있는 목록 그룹
목록 그룹에 배지를 추가할 수도 있습니다. 배지는 자동으로 오른쪽에 배치됩니다.
- 12새로운
- 5삭제됨
- 삼경고
배지를 만들려면
목록 항목 내부에 <span>클래스가 있는 요소를 만듭니다..badge
예시
<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
연결된 항목이 있는 목록 그룹
목록 그룹의 항목은 하이퍼링크일 수도 있습니다. 이렇게 하면 호버에 회색 배경색이 추가됩니다.
연결된 항목으로 목록 그룹을 만들려면 <div>대신 <ul>
및 <a>대신 <li>다음 을 사용합니다.
예시
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
활성 상태
클래스를 사용 .active하여 현재 항목을 강조 표시합니다.
예시
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
비활성화 항목
다음 목록 그룹에는 비활성화된 항목이 있습니다.
항목을 비활성화하려면 .disabled클래스를 추가하세요.
예시
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
컨텍스트 클래스
상황별 클래스를 사용하여 목록 항목의 색상을 지정할 수 있습니다.
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
- 네 번째 항목
목록 항목에 색상을 지정하는 클래스는
.list-group-item-success, list-group-item-info,
list-group-item-warning및 .list-group-item-danger다음 과 같습니다.
예시
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
맞춤 콘텐츠
목록 그룹 항목 안에 거의 모든 HTML을 추가할 수 있습니다.
부트스트랩은 다음과 같이 사용할 수 있는 클래스 .list-group-item-heading를
제공합니다..list-group-item-text
예시
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>