기본 목록 그룹
가장 기본적인 목록 그룹 목록 항목과 순서가없는 목록입니다 :
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
기본 목록 그룹을 생성하기 위해, 사용 <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 삭제
- 3 경고
배지를 만들려면 만들 <span> 클래스와 요소 .badge 목록 항목 내부 :
예
<ul class="list-group">
<li
class="list-group-item"><span class="badge">12</span> New</li>
<li
class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</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을 추가 할 수 있습니다.
Bootstrap 클래스 제공 .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> »그것을 자신을 시도