Bootstrap 3.3.7 | 네비게이션과 컴포넌트 | 페이지네이션(pagination)

Tags:

여러 페이지를 순서대로 표시해 나갈 때 페이지 번호를 늘어 놓은 링크 등을 준비해 두는 것이 많을 것이다. 이것이 “페이지네이션(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>