[Bootstrap] 페이지네이션(Pagination)

bootstrap 페이지네이션(Pagination)이란?

 

아래와 같은 기능이다

 

양쪽 영어보다 화살표로 심플하게 하고 싶다면

Previous와 Next가 있는 라인을 a태그로 시작하는 아래의 코드로 바꿔주면 된다

      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>

 

크기조절은 

class="pagination pagination 뒤에 -sm(스몰)이나 -lg(라지) 씩으로 붙여주면 된다

<ul class="pagination pagination-lg">

 

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

 

공홈 페이지네이션 링크

https://getbootstrap.kr/docs/5.0/components/pagination/

페이지네이션