부트 스트랩 페이지 매김을 사용하는 방법

부트 스트랩 페이징 구성 요소는 긴 데이터 세트를 페이징 할 수 있으므로 사용자가 페이지를 쉽게 찾아 볼 수 있습니다. 사용 방법 : 1. 페이징 목록을 만듭니다. 2. 페이징 품목을 추가하고 링크를 포함시킵니다. 3. 페이지 번호를 지정합니다. 4. 활성 항목 마크; 5. 페이징 이벤트 처리기를 사용하십시오. 샘플 코드 : html

<li> 1 <li>

부트 스트랩 페이지 매김을 사용하는 방법

부트 스트랩 페이징 구성 요소는 대형 데이터 세트를 페이지 세트에 빠뜨리는 메소드를 제공합니다. 긴 데이터 목록을 처리하면서 사용자가 페이지를 쉽게 탐색 할 수있는 간단하고 우아한 방법을 제공합니다.

사용 방법 :

부트 스트랩 페이징을 사용하려면 다음 단계를 따르십시오.

<li> 페이징 목록 만들기 : <ul></ul> 요소를 사용하여 반대되지 않은 목록을 만듭니다. <li> 페이징 항목 추가 : <ul></ul> 목록에 <li> 요소를 추가하여 각 페이징 항목을 나타냅니다. <li> 페이징 링크 추가 : 페이징 링크가 포함 된 <li> 요소에 <a></a> 요소를 추가하십시오. <li> 페이지 번호를 지정하십시오 : <a></a> 요소의 data-page 속성을 사용하여 페이지 번호를 지정하십시오. <li> 활성 항목을 활성 상태로 표시 : active 클래스를 사용하여 현재 활성 페이지 항목을 표시하십시오. <li> Pagination 이벤트 핸들러 사용 : 사용자가 Pagination 항목을 클릭 할 때 click 이벤트 핸들러를 추가하고 이벤트를 처리합니다.

예:

 <code class="html"><ul class="pagination"> <li class="page-item"><a class="page-link" data-page="1">1</a></li> <li class="page-item"><a class="page-link" data-page="2">2</a></li> <li class="page-item"><a class="page-link" data-page="3">3</a></li> <li class="page-item active"><a class="page-link" data-page="4">4</a></li> <li class="page-item"><a class="page-link" data-page="5">5</a></li> </ul></code>

Pagination 이벤트 처리기 :

페이징 이벤트를 처리하려면 다음 JavaScript 코드를 사용하십시오.

 <code class="javascript">$(".pagination").on("click", ".page-link", function(e) { e.preventDefault(); var page = $(this).data("page"); // 在这里处理分页逻辑});</code>

기타 옵션 :

부트 스트랩 페이징 구성 요소는 다음과 같은 다른 옵션도 제공합니다.

<li> 장애인 항목 ( disabled 클래스) <li> 당기고 정렬 ( justify-content-* 클래스) <li> 스타일 테마 ( pagination-* 클래스)

위 내용은 부트 스트랩 페이지 매김을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!