Source

쪽수 매기기

일련의 관련 콘텐츠가 여러 페이지에 걸쳐 있음을 나타내기 위해 페이지 매김을 표시하는 문서 및 예제입니다.

개요

우리는 페이지 매김을 위해 연결된 링크의 큰 블록을 사용하여 링크를 놓치기 어렵고 쉽게 확장할 수 있도록 하는 동시에 큰 히트 영역을 제공합니다. 페이지 매김은 목록 HTML 요소로 구축되어 화면 판독기가 사용 가능한 링크 수를 알릴 수 있습니다. 래핑 <nav>요소를 사용하여 화면 판독기 및 기타 보조 기술에 대한 탐색 섹션으로 식별합니다.

또한 페이지에는 이러한 탐색 섹션이 두 개 이상 있을 수 있으므로 목적을 반영하기 위해 설명 aria-label을 제공하는 것이 좋습니다. <nav>예를 들어 페이지 매김 구성 요소가 검색 결과 집합 사이를 탐색하는 데 사용되는 경우 적절한 레이블은 가 될 수 있습니다 aria-label="Search results pages".

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

아이콘 작업

페이지 매김 링크에 텍스트 대신 아이콘이나 기호를 사용하고 싶으십니까? aria속성 및 .sr-only유틸리티 와 함께 ​​적절한 화면 판독기 지원을 제공해야 합니다.

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

비활성화 및 활성 상태

페이지 매김 링크는 다양한 상황에 맞게 사용자 지정할 수 있습니다. .disabled클릭할 수 없는 링크에 사용 .active하고 현재 페이지를 나타냅니다.

.disabled클래스가 s 의 링크 기능을 비활성화 pointer-events: none하려고 시도 하는 동안 <a>해당 CSS 속성은 아직 표준화되지 않았으며 키보드 탐색을 고려하지 않습니다. 따라서 항상 tabindex="-1"비활성화된 링크를 추가하고 사용자 정의 JavaScript를 사용하여 해당 기능을 완전히 비활성화해야 합니다.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

선택적으로 활성 또는 비활성화 앵커를 교체하거나 <span>이전/다음 화살표의 경우 앵커를 생략하여 클릭 기능을 제거하고 의도한 스타일을 유지하면서 키보드 포커스를 방지할 수 있습니다.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

사이징

더 크거나 작은 페이지 매김을 원하십니까? 추가 크기의 경우 또는를 .pagination-lg추가 하십시오..pagination-sm

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

조정

flexbox 유틸리티 를 사용하여 페이지 매김 구성 요소의 정렬을 변경합니다 .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>