Bootstrap 5 페이지네이션

과목 추천:

기본 페이징

귀하의 웹사이트가 많은 페이지를 가질 경우, 각 페이지에 페이징을 추가하려는 경우가 있습니다. 기본 페이징을 생성하려면, 클래스를 추가하세요 .pagination <ul> 요소에. 그런 다음, .page-item <li> 요소에, 그리고 각에 추가하세요 .page-link 클래스를 추가하세요 <li> 각 링크에 대해:

예제

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">이전 페이지</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="#">다음 페이지</a></li>
</ul>

본인이 직접 시도해보세요

활성 상태

.active 클래스는 현재 페이지를 "고조"합니다:

예제

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">이전 페이지</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</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">다음 페이지</a></li>
</ul>

본인이 직접 시도해보세요

비활성 상태

.disabled 클래스는 클릭할 수 없는 링크에 사용됩니다:

예제

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">이전 페이지</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="#">다음 페이지</a></li>
</ul>

본인이 직접 시도해보세요

페이징 크기

페이징 블록의 크기는 더 크거나 더 작게 조정할 수 있습니다:

큰 블록에 클래스를 추가하세요 .pagination-lg 또는 작은 블록에 추가하세요 .pagination-sm 구분:

예제

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">이전 페이지</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="#">다음 페이지</a></li>
</ul>
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">이전 페이지</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="#">다음 페이지</a></li>
</ul>

본인이 직접 시도해보세요

페이지네이션 정렬

페이지네이션 정렬을 변경하려면 utility 클래스를 사용하세요:

예제

<!-- 기본 (왼쪽 정렬) -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- 중앙 정렬 -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- 오른쪽 정렬 -->
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

본인이 직접 시도해보세요

크루미얼스(Breadcrumbs)

페이지네이션의 또 다른 형태는 크루미얼스(Breadcrumbs)입니다:

.breadcrumb 및 .breadcrumb-item 현재 페이지가 탐색 구조에서의 위치를 정의하는 클래스:

예제

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">사진</a></li>
  <li class="breadcrumb-item"><a href="#">2019년 가을</a></li>
  <li class="breadcrumb-item"><a href="#">중국</a></li>
  <li class="breadcrumb-item active">베이징</li>
</ul>

본인이 직접 시도해보세요