Bootstrap5의 페이지 매김 구성 요소를 사용하는 방법에 대한 간략한 설명

이 글은 Bootstrap5에서 페이지 매김 구성 요소를 사용하는 방법을 소개합니다. 도움이 되길 바랍니다!

【관련 추천: "bootstrap tutorial"】

1. 간단한 예

페이지 탐색은 일반적으로 기사 목록 페이지, 다운로드 목록, 이미지 목록 등에 사용됩니다. , 한 곳에서는 불가능합니다. 페이지 표시, 일반 페이지 탐색에는 이전 페이지, 다음 페이지, 디지털 페이지 번호 등이 포함됩니다. 다음은 간단한 예입니다.

      <nav aria-label="Page navigation">
        <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>
        </nav>

2. 아이콘 사용

아이콘이나 기호를 사용하여 일부 페이지 매김 링크의 텍스트를 교체하세요.

<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>
</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>
</a>
</li>
</ul>
</nav>

3. 다양한 상황에 따라 맞춤 설정할 수 있습니다. 클릭할 수 없는 링크에는 비활성화를 사용하고 현재 페이지에 있는 링크에는 활성을 사용합니다.

.disabled 클래스는 포인터 이벤트: 없음을 사용하여 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</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>

4. 크기

더 크거나 작은 페이지 매기기를 선호하시나요? 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>
        </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">
        <li class="page-item active" aria-current="page">
        <span class="page-link">1</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>
            </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>

5. 정렬

기본 페이징 탐색은 왼쪽 정렬입니다. 우리 중국인은 대부분 중앙 정렬을 선호합니다. . ul 클래스에 justify-content-center를 추가하기만 하면 됩니다. 물론, 드물기는 하지만 justify-content-end를 사용하여 오른쪽으로 정렬할 수도 있습니다.

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

이 글이 도움이 되셨다면 좋아요 꼭 눌러주세요!

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오

를 방문하세요! !

위 내용은 Bootstrap5의 페이지 매김 구성 요소를 사용하는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!