Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 페이지네이션

이 장에서는 Bootstrap가 지원하는 페이지 기능을 설명합니다. 페이지(Pagination)는 순서가 없는 목록으로, Bootstrap는 다른 인터페이스 요소와 마찬가지로 페이지를 처리합니다。

페이지(Pagination)

다음 표는 Bootstrap가 제공하는 페이지 처리를 위한 class를 나열합니다。

Class	설명	예제 코드
.pagination	페이지를 화면에 표시하려면 이 class를 추가하세요。	<ul> 　　<li><a　href="#">«</a>/a></li> 　　<li><a href="#">1</a></li> 　　....... </ul>
.disabled, .active	링크를 사용하여自定义할 수 있습니다. .disabled 비 클릭 가능한 링크를 정의하려면, .active 현재 페이지를 나타내기 위해 사용합니다。	<ul> 　　<li><a　href="#">«</a>/a></li> 　　<li><a href="#">1<span>(현재)</span></a></li> 　　....... </ul>
.pagination-lg, .pagination-sm	다양한 크기의 항목을 가져오기 위해 이러한 class를 사용하세요。	<ul>.../ul> <ul>.../ul> <ul>.../ul>

기본 페이지

아래 예제는 표에 설명된 class를 사용하는 예제입니다： .pagination 의 사용 방법：

온라인 예제

예제

<!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="#">«</a>/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="#">»</a>/a></li>
</ul>
</body>
</html>

테스트를 해보세요 ‹/›

결과는 다음과 같습니다：

페이지 상태

아래 예제는 표에 설명된 class를 사용하는 예제입니다： .disabled、.active 의 사용 방법：

온라인 예제

예제

<!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="#">«</a>/a></li>
	<li class="active"><a href="#">1</a></li>
	<li class="disabled"><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="#">»</a>/a></li>
</ul>
</body>
</html>

테스트를 해보세요 ‹/›

결과는 다음과 같습니다：

페이지 크기

아래 예제는 표에 설명된 class를 사용하는 예제입니다： .pagination-* 의 사용 방법：

온라인 예제

예제

<!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 pagination-lg">
	<li><a　href="#">«</a>/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="#">»</a>/a></li>
</ul><br>
<ul class="pagination">
	<li><a　href="#">«</a>/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="#">»</a>/a></li>
</ul><br>
<ul class="pagination pagination-sm">
	<li><a　href="#">«</a>/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="#">»</a>/a></li>
</ul>
</body>
</html>

테스트를 해보세요 ‹/›

결과는 다음과 같습니다：

페이지네이션(Pager)

사용자에게 라우팅을 제공하는 간단한 페이지네이션 링크를 생성하려면, 페이지네이션을 사용할 수 있습니다. 페이지네이션 링크와 마찬가지로, 페이지네이션도 불연속 목록입니다. 기본적으로 링크는 중앙에 표시됩니다. 아래 표는 Bootstrap가 페이지네이션을 처리하는 class를 나열합니다。

Class	설명	예제 코드
.pager	이 class를 추가하여 페이지네이션 링크를 얻습니다。	<ul> 　　<li><a href="#">Previous</a>/a></li> 　　<li><a href="#">Next</a>/a></li> </ul>
.previous, .next	class를 사용하여 .previous 링크를 왼쪽에 정렬하려면 사용합니다 .next 링크를 오른쪽에 정렬합니다。	<ul> 　　<li><a href="#">← Older</a>/a></li> 　　<li><a href="#">Newer →</a>/a></li> </ul>
.disabled	이 class를 추가하여 해당 버튼을 사용할 수 없게 설정합니다。	<ul> 　　<li><a href="#">← Older</a>/a></li> 　　<li><a href="#">Newer →</a>/a></li> </ul>

기본 페이지네이션

아래 예제는 표에 설명된 class를 사용하는 예제입니다： .pager 의 사용 방법：

온라인 예제

예제

<!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>/a></li>
	<li><a href="#">Next</a>/a></li>
</ul>
</body>
</html>

테스트를 해보세요 ‹/›

결과는 다음과 같습니다：

정렬된 링크

아래 예제는 표에 설명된 class를 사용하는 예제입니다： .previous, .next 의 사용 방법：

온라인 예제

예제

<!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 class="previous"><a href="#">← Older</a>/a></li>
	<li class="next"><a href="#">Newer →</a>/a></li>
</ul>
</body>
</html>

테스트를 해보세요 ‹/›

결과는 다음과 같습니다：

페이지네이션 상태

아래 예제는 표에 설명된 class를 사용하는 예제입니다： .disabled 의 사용 방법：

온라인 예제

예제

<!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 class="previous disabled"><a href="#">← Older</a>/a></li>
	<li class="next"><a href="#">Newer →</a>/a></li>
</ul>
</body>
</html>

테스트를 해보세요 ‹/›

결과는 다음과 같습니다：

더 많은 예제를 보려면 페이지네이션을 클릭하세요：

분류	설명	예제
.pager	간단한 페이지네이션 링크, 링크 가운데 정렬	시도해 보세요
.previous	.pager에 이전 페이지 버튼 스타일, 왼쪽 정렬	시도해 보세요
.next	.pager에 다음 페이지 버튼 스타일, 오른쪽 정렬	시도해 보세요
.disabled	비활성 링크	시도해 보세요
.pagination	페이지네이션 링크	시도해 보세요
.pagination-lg	더 큰 페이지네이션 링크	시도해 보세요
.pagination-sm	더 작은 페이지네이션 링크	시도해 보세요
.disabled	비활성 링크	시도해 보세요
.active	현재 방문 페이지 링크 스타일	시도해 보세요

Bootstrap 태그 Bootstrap 크로스 네비게이션