in English

목록 그룹

목록 그룹은 일련의 콘텐츠를 표시하기 위한 유연하고 강력한 구성 요소입니다. 그 안에 있는 거의 모든 콘텐츠를 지원하도록 수정하고 확장합니다.

기본 예

가장 기본적인 목록 그룹은 목록 항목과 적절한 클래스가 있는 정렬되지 않은 목록입니다. 다음 옵션을 사용하거나 필요에 따라 고유한 CSS를 사용하여 빌드하십시오.

  • 아이템
  • 두 번째 항목
  • 세 번째 항목
  • 네 번째 항목
  • 그리고 다섯번째
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

활성 항목

에 추가 .active하여 .list-group-item현재 활성 선택을 나타냅니다.

  • 활성 항목
  • 두 번째 항목
  • 세 번째 항목
  • 네 번째 항목
  • 그리고 다섯번째
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

비활성화된 항목

비활성화 된 것으로 표시.disabled 하려면 에 추가하십시오 . 가 있는 일부 요소 는 클릭 이벤트(예: 링크)를 완전히 비활성화하기 위해 사용자 정의 JavaScript도 필요합니다..list-group-item.disabled

  • 비활성화된 항목
  • 두 번째 항목
  • 세 번째 항목
  • 네 번째 항목
  • 그리고 다섯번째
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

<a>s 또는 <button>s를 사용 하여 추가하여 호버, 비활성화 및 활성 상태 의 실행 가능한.list-group-item-action 목록 그룹 항목을 만듭니다 . 비대화형 요소(예: <li>s 또는 <div>s)로 구성된 목록 그룹이 클릭 또는 탭 어포던스를 제공하지 않도록 이러한 유사 클래스를 분리합니다.

여기 에서 표준 .btn클래스 를 사용 하지 마십시오 .

현재 링크 항목 두 번째 링크 항목 세 번째 링크 항목 네 번째 링크 항목 비활성화된 링크 항목 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

s를 사용 하면 클래스 대신 속성 <button>을 사용할 수도 있습니다 . 슬프게도 s는 disabled 속성을 지원하지 않습니다.disabled.disabled<a>

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

플러시

추가 .list-group-flush하여 일부 테두리와 둥근 모서리를 제거하여 상위 컨테이너(예: 카드)에서 목록 그룹 항목을 가장자리에서 가장자리로 렌더링합니다.

  • 아이템
  • 두 번째 항목
  • 세 번째 항목
  • 네 번째 항목
  • 그리고 다섯번째
<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

수평의

.list-group-horizontal모든 중단점에서 목록 그룹 항목의 레이아웃을 수직에서 수평으로 변경하려면 추가하십시오 . 또는 반응형 변형 .list-group-horizontal-{sm|md|lg|xl}을 선택하여 해당 중단점에서 시작하여 목록 그룹을 수평으로 만듭니다 min-width. 현재 수평 목록 그룹은 플러시 목록 그룹과 결합할 수 없습니다.

ProTip: 수평일 때 동일한 너비의 목록 그룹 항목을 원하십니까? .flex-fill각 목록 그룹 항목에 추가 합니다.

  • 아이템
  • 두 번째 항목
  • 세 번째 항목
  • 아이템
  • 두 번째 항목
  • 세 번째 항목
  • 아이템
  • 두 번째 항목
  • 세 번째 항목
  • 아이템
  • 두 번째 항목
  • 세 번째 항목
  • 아이템
  • 두 번째 항목
  • 세 번째 항목
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

상황별 클래스

상황별 클래스를 사용하여 상태 저장 배경 및 색상으로 목록 항목의 스타일을 지정합니다.

  • 간단한 기본 목록 그룹 항목
  • 간단한 기본 목록 그룹 항목
  • 간단한 보조 목록 그룹 항목
  • 간단한 성공 목록 그룹 항목
  • 간단한 위험 목록 그룹 항목
  • 간단한 경고 목록 그룹 항목
  • 간단한 정보 목록 그룹 항목
  • 간단한 조명 목록 그룹 항목
  • 간단한 다크리스트 그룹 항목
<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

컨텍스트 클래스도 .list-group-item-action. 이전 예에는 없는 여기에 호버 스타일이 추가되었습니다. 상태 도 지원됩니다 .active. 컨텍스트 목록 그룹 항목에 대한 활성 선택을 나타내기 위해 적용합니다.

간단한 기본 목록 그룹 항목 간단한 기본 목록 그룹 항목 간단한 보조 목록 그룹 항목 간단한 성공 목록 그룹 항목 간단한 위험 목록 그룹 항목 간단한 경고 목록 그룹 항목 간단한 정보 목록 그룹 항목 간단한 조명 목록 그룹 항목 간단한 다크리스트 그룹 항목 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
보조 기술에 의미 전달

색상을 사용하여 의미를 추가하는 것은 시각적 표시만 제공하며 스크린 리더와 같은 보조 기술 사용자에게는 전달되지 않습니다. 색상으로 표시되는 정보가 콘텐츠 자체(예: 보이는 텍스트)에서 명확하거나 .sr-only클래스와 함께 숨겨진 추가 텍스트와 같은 대체 수단을 통해 포함되는지 확인합니다.

배지 포함

목록 그룹 항목에 배지를 추가하여 일부 유틸리티 의 도움으로 읽지 않은 수, 활동 등을 표시 합니다.

  • 목록 항목14
  • 두 번째 목록 항목2
  • 세 번째 목록 항목1 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

맞춤 콘텐츠

flexbox 유틸리티 의 도움으로 아래와 같은 연결 목록 그룹에 대해서도 거의 모든 HTML을 내부에 추가할 수 있습니다 .

목록 그룹 항목 제목
3일 전

단락의 일부 자리 표시자 콘텐츠.

그리고 약간의 작은 글씨.
목록 그룹 항목 제목
3일 전

단락의 일부 자리 표시자 콘텐츠.

그리고 일부 음소거 된 작은 글씨.
목록 그룹 항목 제목
3일 전

단락의 일부 자리 표시자 콘텐츠.

그리고 일부 음소거 된 작은 글씨. 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

자바스크립트 동작

탭 JavaScript 플러그인(개별적으로 또는 컴파일된 bootstrap.js파일을 통해 포함)을 사용하여 목록 그룹을 확장하여 로컬 콘텐츠의 탭 가능한 창을 만듭니다.

"홈"과 관련된 단락의 일부 자리 표시자 콘텐츠. 그리고 이 탭 패널을 채우고 채우는 데 사용되는 추가 콘텐츠입니다. 프로덕션에서는 여기에 더 많은 실제 콘텐츠가 있을 것입니다. 그리고 텍스트뿐만이 아닙니다. 무엇이든 될 수 있습니다. 텍스트, 이미지, 양식.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

데이터 속성 사용

또는 요소 를 지정하여 JavaScript를 작성하지 않고도 목록 그룹 탐색을 활성화할 수 있습니다 data-toggle="list". 에서 이러한 데이터 속성을 사용합니다 .list-group-item.

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
</div>

자바스크립트를 통해

JavaScript를 통해 탭 가능 목록 항목 활성화(각 목록 항목을 개별적으로 활성화해야 함):

$('#myList a').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

다음과 같은 여러 방법으로 개별 목록 항목을 활성화할 수 있습니다.

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

페이드 효과

탭 패널을 페이드 인하 .fade려면 각각 에 추가하십시오 .tab-pane. .show첫 번째 탭 창에서도 초기 콘텐츠를 볼 수 있어야 합니다 .

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

행동 양식

$().탭

목록 항목 요소 및 콘텐츠 컨테이너를 활성화합니다. 탭 에는 DOM 의 data-target또는 대상 컨테이너 노드가 있어야 합니다.href

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab('보여주기')

주어진 목록 항목을 선택하고 관련 창을 표시합니다. 이전에 선택한 다른 목록 항목은 선택 취소되고 연결된 창이 숨겨집니다. 탭 창이 실제로 표시 되기 전(예: shown.bs.tab이벤트가 발생하기 전) 호출자에게 돌아갑니다.

$('#someListItem').tab('show')

이벤트

새 탭을 표시할 때 이벤트는 다음 순서로 실행됩니다.

  1. hide.bs.tab(현재 활성 탭에서)
  2. show.bs.tab(표시할 탭에서)
  3. hidden.bs.tabhide.bs.tab(이전 활성 탭에서 이벤트 와 동일한 탭 )
  4. shown.bs.tabshow.bs.tab(새로 활성화된 방금 표시된 탭에서 이벤트 와 동일한 탭 )

활성화된 탭이 없으면 hide.bs.tab및 hidden.bs.tab이벤트가 실행되지 않습니다.

이벤트 유형 설명
show.bs.tab 이 이벤트는 탭 표시 시 발생하지만 새 탭이 표시되기 전에 발생합니다. event.target및 를 사용 event.relatedTarget하여 활성 탭과 이전 활성 탭(사용 가능한 경우)을 각각 대상으로 지정합니다.
표시됨.bs.tab 이 이벤트는 탭이 표시된 후 탭이 표시될 때 발생합니다. event.target및 를 사용 event.relatedTarget하여 활성 탭과 이전 활성 탭(사용 가능한 경우)을 각각 대상으로 지정합니다.
숨김.bs.tab 이 이벤트는 새 탭이 표시될 때 발생합니다(따라서 이전 활성 탭이 숨겨짐). event.target및 를 사용 event.relatedTarget하여 각각 현재 활성 탭과 곧 활성화될 새 탭을 대상으로 지정합니다.
hidden.bs.tab 이 이벤트는 새 탭이 표시된 후에 시작됩니다(따라서 이전 활성 탭이 숨겨짐). event.target및 를 사용 event.relatedTarget하여 각각 이전 활성 탭과 새 활성 탭을 대상으로 지정합니다. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})