Source

목록 그룹

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

기본 예

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

  • Cras Justo Odio
  • Dapibus ac 시설
  • 모르비 레오 리수스
  • Porta ac consectetur ac
  • 에로스의 전정
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

활성 항목

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

  • Cras Justo Odio
  • Dapibus ac 시설
  • 모르비 레오 리수스
  • Porta ac consectetur ac
  • 에로스의 전정
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

비활성화된 항목

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

  • Cras Justo Odio
  • Dapibus ac 시설
  • 모르비 레오 리수스
  • Porta ac consectetur ac
  • 에로스의 전정
<ul class="list-group">
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</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">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</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">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

플러시

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

  • Cras Justo Odio
  • Dapibus ac 시설
  • 모르비 레오 리수스
  • Porta ac consectetur ac
  • 에로스의 전정
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

상황별 클래스

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

  • Dapibus ac 시설
  • 간단한 기본 목록 그룹 항목
  • 간단한 보조 목록 그룹 항목
  • 간단한 성공 목록 그룹 항목
  • 간단한 위험 목록 그룹 항목
  • 간단한 경고 목록 그룹 항목
  • 간단한 정보 목록 그룹 항목
  • 간단한 조명 목록 그룹 항목
  • 간단한 다크리스트 그룹 항목
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</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">Dapibus ac facilisis in</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클래스와 함께 숨겨진 추가 텍스트와 같은 대체 수단을 통해 포함되는지 확인합니다.

배지 포함

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

  • Cras Justo Odio14
  • Dapibus ac 시설2
  • 모르비 레오 리수스1
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

맞춤 콘텐츠

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

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start 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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

자바스크립트 동작

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

<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.

<!-- 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>

자바스크립트를 통해

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

$('#myList a').on('click', function (e) {
  e.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.tabhidden.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 (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})