[1일1코딩][bootstrap] 페이지네이션(Pagination)

 

 

페이지네이션 설명

https://rise-up.tistory.com/434

 

Previous와 Next 영어 부담스러워하는 사람들도 있을 것 같고

화살표가 더 심플하고 직관적이어서 양옆 <<>>로 바꿈

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

 

크기를 작게 변경

<ul class="pagination pagination-sm">

 

<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/

페이지네이션