[Bootstrap] Pagination

1. 기본 페이지네이션

• 여러 페이지가 있는 사이트에서 이전/다음 또는 페이지 번호로 이동할 수 있도록 도와줌
• 구조: `<ul class="pagination">` +` <li class="page-item">` + `<a class="page-link">`

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
</ul>

---

2. 현재 페이지 표시 (Active 상태)

• 현재 페이지에 `.active` 클래스를 추가하여 강조 표시

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><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="#">Next</a></li>
</ul>

---

3. 비활성 상태 (Disabled)

• 클릭할 수 없는 버튼에 `.disabled` 클래스 사용 (예: 첫 페이지에서 "Previous")

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Previous</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="#">Next</a></li>
</ul>

---

4. 페이지네이션 크기 조절

클래스	설명
`.pagination-lg`	큰 사이즈
기본	보통 사이즈
`.pagination-sm`	작은 사이즈

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
</ul>

---

5. 정렬 조정

• Bootstrap의 정렬 유틸리티를 이용해 좌/중앙/우 정렬 가능

클래스	정렬 방향
기본	좌측 정렬
`justify-content-center`	가운데 정렬
`justify-content-end`	우측 정렬

<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

<!-- Center-aligned -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

<!-- Right-aligned -->
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

---

6. Breadcrumbs (브레드크럼)

• 페이지 계층 구조를 나타내는 또 다른 방식
• `.breadcrumb`, `.breadcrumb-item` 클래스를 사용

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Photos</a></li>
  <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
  <li class="breadcrumb-item"><a href="#">Italy</a></li>
  <li class="breadcrumb-item active">Rome</li>
</ul>