Pagination

UI for navigating through multiple pages of content.

기본

  <div class="ga-pagination">
      <div class="pagination-nav"><i class="fa fa-chevron-left" /></div>
      <div class="pagination-page-wrapper">
          <div class="pagination-num"> {n} </div>
          ... ...
      </div>
      <div class="pagination-nav"><i class="fa fa-chevron-left" /></div>
  </div>

기본 (표시 수 제한)

  <div class="ga-pagination">
      <div class="pagination-nav"><i class="fa fa-chevron-left" /></div>
      <div class="pagination-page-wrapper">
          <div class="pagination-num"> 1 </div>
          <div class="pagination-num block-prev"><i class="fa fa-ellipsis" /></div>
          <div class="pagination-num"> {n} </div>
          ... ...
          <div class="pagination-num block-next"><i class="fa fa-ellipsis" /></div>
          <div class="pagination-num"> {Last num} </div>
      </div>
      <div class="pagination-nav"><i class="fa fa-chevron-left" /></div>
  </div>

버튼 스타일

  <div class="ga-pagination number circle">
      <div class="pagination-nav"><i class="fa fa-chevron-left" /></div>
      <div class="pagination-page-wrapper">
          ... ...
      </div>
      <div class="pagination-nav"><i class="fa fa-chevron-left" /></div>
  </div>

사용자 스타일

1000

  <div class="ga-pagination number">
      <div class="pagination-nav"><i class="fa fa-chevron-left" /></div>
      <div class="pagination-page-wrapper">
          ... ...
      </div>
      <div class="pagination-nav"><i class="fa fa-chevron-left" /></div>
  </div>

페이지 타입

1/10

  <div class="ga-pagination page">
      <div class="pagination-nav pagination-item"><i class="fa fa-chevron-left" /></div>
      <div class="pagination-page-wrapper">
          <div class="pagination-info"> 1/10 </div>
      </div>
      <div class="pagination-nav pagination-item"><i class="fa fa-chevron-left" /></div>
  </div>

조그맣게

  <div class="ga-pagination number compact">
      <div class="pagination-nav"><i class="fa fa-chevron-left" /></div>
      <div class="pagination-page-wrapper">
          ... ...
      </div>
      <div class="pagination-nav"><i class="fa fa-chevron-left" /></div>
  </div>

정렬

LEFT

CENTER

RIGHT

  <div class="ga-pagination number align-{left | center | right}">
      <div class="pagination-nav"><i class="fa fa-chevron-left" /></div>
      <div class="pagination-page-wrapper">
          ... ...
      </div>
      <div class="pagination-nav"><i class="fa fa-chevron-left" /></div>
  </div>