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
속성 과 함께 적절한 화면 판독기 지원을 제공해야 합니다.
복사
<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" > « </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" > » </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" aria-disabled= "true" > Previous</a>
</li>
<li class= "page-item" ><a class= "page-link" href= "#" > 1</a></li>
<li class= "page-item active" aria-current= "page" >
<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" aria-current= "page" >
<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 active" aria-current= "page" >
<span class= "page-link" >
1
<span class= "sr-only" > (current)</span>
</span>
</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 active" aria-current= "page" >
<span class= "page-link" >
1
<span class= "sr-only" > (current)</span>
</span>
</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" aria-disabled= "true" > 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" aria-disabled= "true" > 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>