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클래스 를 사용하지 않도록 하십시오 .

Cras Justo Odio Dapibus ac 시설 모르비 레오 리수스 Porta ac consectetur ac 에로스의 전정 
<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. 컨텍스트 목록 그룹 항목에 대한 활성 선택을 나타내기 위해 적용합니다.

Dapibus ac 시설 간단한 기본 목록 그룹 항목 간단한 보조 목록 그룹 항목 간단한 성공 목록 그룹 항목 간단한 위험 목록 그룹 항목 간단한 경고 목록 그룹 항목 간단한 정보 목록 그룹 항목 간단한 조명 목록 그룹 항목 간단한 다크리스트 그룹 항목 
<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을 내부에 추가할 수 있습니다 .

목록 그룹 항목 제목
3일 전

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
목록 그룹 항목 제목
3일 전

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
목록 그룹 항목 제목
3일 전

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta. 
<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파일을 통해 포함)을 사용하여 목록 그룹을 확장하여 로컬 콘텐츠의 탭 가능한 창을 만듭니다.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipiscing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<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.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 (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})