부트스트랩 페이징 구현 방법-부트스트랩 튜토리얼-php.cn

부트스트랩 페이징 구현 방법

(*-*)浩

풀어 주다： 2019-07-19 09:54:17

원래의

2244명이 탐색했습니다.

모든 웹 페이지에서 페이지 매김을 볼 수 있습니다. 모바일 단말기이든 PC 단말기이든, 다음 페이지로의 드롭다운이든 다음 페이지로의 버튼이든, 웹사이트를 지원하려면 페이지 매김이 필요합니다. 이렇게 하면 우선 웹사이트의 액세스 효율성이 향상될 수 있습니다. 또한 페이지 표시도 더욱 아름다워집니다. 그렇지 않으면 수백만 개의 데이터가 한두 시간 동안 표시되지 않습니다.

부트스트랩 페이징 구현 방법 부트스트랩을 사용하여 페이징을 구현하는 방법은 무엇인가요?

페이징: 페이지 효과를 사용하면 웹사이트에서 원하는 대로 정의할 수 있습니다. 예를 들어 텍스트는 아니지만 일부 아이콘은 동일합니다.

스타일 사용: .pagination

페이지네이션은 순서가 지정되지 않은 목록입니다. 부트스트랩은 다른 인터페이스 요소처럼 페이지네이션을 처리합니다.

이전 항목과 다음 항목의 페이지 넘김 효과를 사용하는 가장 쉬운 방법입니다.
style.pager

(Pager) 페이지 넘김, 사용자를 위한 간단한 페이징 링크를 생성하려는 경우 탐색을 통해 수행할 수 있습니다. 페이지. 페이지 매김 링크와 마찬가지로 페이징도 순서가 지정되지 않은 목록입니다.

두 가지 방법을 모두 구현하려면 ul 태그를 사용해야 하며, 링크에는 a가 사용됩니다. 예를 들어 특정 항목을 선택한 경우

페이징 예시가 있습니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 默认的分页</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pagination">
	<li><a href="#">&laquo;</a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">&raquo;</a></li>
</ul>

</body>
</html>

로그인 후 복사

페이지 넘김 예시

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 默认的翻页</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pager">
	<li><a href="#">Previous</a></li>
	<li><a href="#">Next</a></li>
</ul>

</body>
</html>

로그인 후 복사

더 많은 Bootstrap 관련 기술 기사를 보려면

Bootstrap Tutorial

칼럼을 방문하여 알아보세요!

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