Bootstrap 3.3.7 | 네비게이션과 컴포넌트 | 페이지네이션(pagination)
여러 페이지를 순서대로 표시해 나갈 때 페이지 번호를 늘어 놓은 링크 등을 준비해 두는 것이 많을 것이다. 이것이 “페이지네이션(Pagination)” 이다.
Pagination
페이지네이션(Pagination)은 보통 <ul>
또는 <ol>
태그를 기반으로 만들고, 기본적으로는 <a>
태그를 늘어 놓은 것 뿐이다. <ul>
태그 요소에 .pagination을 추가하면 사각형 박스로 된 페이지네이션이 만들어 진다. 클래스를 설정하는 것만으로 디자인이 적용된다. 기본적인 형태는 다음과 같다.
<ul class="pagination">
<li><a href="#">번호</a></li>
……생략……
</ul>
<ul>
또는 <ol>
태그에 class="pagination"
와 같은 형태로 클래스를 설정해야 한다. 표시하는 링크는 <li>
태그 내에 <a>
태그로 제공한다. 이것으로 여러 링크를 가로 일렬로 늘어 놓은 페이지 표시 링크를 만들 수 있다.
활성화(active)와 비활성화(disabled)
실제 페이지네이션에는 이 밖에 “사용되지 않는 링크"나 “현재 보고 있는 페이지” 등을 표시하는데 다음과 같은 클래스도 같이 사용한다.
클래스 | 설명 |
---|---|
active | 이것은 현재 열려있는 페이지를 보여하는 것이다. |
disabled | 사용 불가 상태를 나타낸다. 예를 들어 1페이지를 표시할 때, 그보다 이전 페이지로 이동하는 Prev 링크는 disable로 될 것이다. |
활성화된 페이지의 <li>
태그에 .active를 추가하면, 사각형의 배경이 파란색이 되고 글자색은 하얀색이 된다. 마우스 포인터는 화살표로 바뀐다.
<li class="active"><a href="#">5</a></li>
비활성화된 페이지의 li 요소에 .disabled를 추가하면 글자색이 회색이 되고, 마우스를 올렸을 때 금지 이미지가 나오고 클릭이 되지 않는다.
<li class="disabled"><a href="#">5</a></li>
이것들을 이용한 예제를을 아래에 올려 두었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>컨텐츠 표시</h1>
<h2>Pagenation</h2>
</div>
<h3>Page 1</h3>
<p>이것은 1페이지의 내용입니다.</p>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous">
<span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li ><a href="#">3</a></li>
<li><a href="#" aria-label="Next">
<span aria-hidden="true">»</span></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
여기에 1페이지를 표시하고 있는 상태로 만들다. 페이지 번호 “1"이 active되어, 더 뒤로 링크는 disabled로 되어 있다.
가운데 정렬
가운데 정렬을 하고 싶다면 div 등으로 감싼 후 텍스트 정렬을 가운데로 한다.
<div style="text-align: center;">
...
</div>
크기
기본 크기보다 작게 만들고 싶다면 .pagination-sm을 추가한다.
<ul class="pagination pagination-sm">
기본 크기보다 크게 만들고 싶다면 .pagination-lg를 추가한다.
<ul class="pagination pagination-lg">
정렬 및 크기에 대한 예제는 아래와 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap | Pagination</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
h1 {
font-size: 20px;
}
.jb-center {
text-align: center;
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Pagination - Default</h1>
<ul class="pagination">
<li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></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 class="active"><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
</ul>
<h1>Pagination - Center</h1>
<div class="jb-center">
<ul class="pagination">
<li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></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 class="active"><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
</ul>
</div>
<h1>Pagination - Small</h1>
<ul class="pagination pagination-sm">
<li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></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 class="active"><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
</ul>
<h1>Pagination - Big</h1>
<ul class="pagination pagination-lg">
<li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></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 class="active"><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>