목차
Bootstrap List Groups
- description : Bootstrap List Groups
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-26
Basic List Groups
가장 기본적인 목록 그룹은 목록 항목이 있는 정렬되지 않은 목록입니다.
기본 목록 그룹을 만들기 위해, .list-group 클래스와 <ul> 요소를 사용하고,
.list-group-item 클래스와 <li> 요소를 사용하세요.
예제
Basic List Group
- First item
- Second item
- Third item
List Group With Badge
목록 그룹에 배지도 추가할 수 있습니다. 배지는 자동으로 오른쪽에 배치됩니다.
예제
List Group With Badges
- New 12
- Deleted 5
- Warnings 3
List Group With Linked Items
목록 그룹의 항목들은 하이퍼링크가 될 수도 있습니다. 마우스 오버시 회색 배경색이 추가됩니다:
링크된 항목을 가진 목록 그룹을 만들기 위해, <ul> 대신에 <div>를 사용하고,
<li> 대신에 <a>를 사용하세요.
예제
List Group With Linked Items
Active State
.active 클래스를 사용하여, 현재 항목을 강조 표시하십시오.
예제
Active Item in a List Group
Disabled Item
아래의 목록 그룹에는 비활성화 항목이 있습니다.
항목을 비활성화하기 위해, .disabled 클래스를 추가하세요:
예제
List Group With a Disabled Item
Contextual Classes
콘텍스추얼 클래스를 사용하여 목록 항목의 색상을 지정할 수 있습니다.
목록 항목의 색상을 지정하는 클래스는 다음과 같습니다:.list-group-item-success, .list-group-item-info, list-group-item-warning, .list-group-item-danger:
예제
List Group With Contextual Classes
- 일은 배신하지 않는다
- IT 좀 아는 사람
- Do it! 점프 투 파이썬
- 혼자 공부하는 파이썬
Linked Items With Contextual Classes
Move the mouse over the linked items to see the hover effect:
Custom Content
목록 그룹 항목 내에 거의 모든 HTML을 추가 할 수 있습니다.
Bootstrap은 다음과 같이 사용할 수 있는 .list-group-item-heading 및 .list-group-item-text 클래스를 제공합니다.
예제
List Group With Custom Content
Result
