Main menu

Bootstrap 3 강좌 | 페이지네이션(Pagination)

기본

페이지네이션(Pagination)은 보통 순서 없는 목록(ul)으로 만듭니다.

ul 요소에 .pagination을 추가하면 사각형 박스로 된 페이지네이션이 만들어집니다.

<ul class="pagination">
  ...
</ul>

활성화된 페이지의 li 요소에 .active를 추가하면, 사각형의 배경이 파란색이 되고 글자색은 하얀색이 됩니다. 마우스 포인터는 화살표로 바뀝니다.

<li class="active"><a href="#">5</a></li>

비활성화된 페이지의 li 요소에 .disabled를 추가하면 글자색이 회색이 되고, 마우스를 올렸을 때 금지 이미지가 나오고 클릭이 되지 않습니다.

<li class="disabled"><a href="#">5</a></li>

가운데 정렬

가운데 정렬을 하고 싶다면 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>

Created on 2015-10-15 | Updated on 2015-10-15

이 글을 공유하기

Kakao