[basic] BS5 - Pagination (BS페이지매기기 = BS페이지번호 = BS페이징 = BS패지네이션) + BS브레드크럼 (= BS빵메뉴 = BSbreadcrumb)

1. Pagination 기본
2. Pagination Active (활성화 = 현재위치표시)
3. Pagination Disabled (비활성화 = 클릭방지)
4. Pagination Size (크기)
5. Pagination Align (정렬)
6. Pagination 종합 예제
7. Breadcrumb (빵메뉴)

※ BS4와 클래스 동일.

Pagination 기본 

 

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

 

결과보기

※ BS4와 동일

Pagination Active (활성화 = 현재위치표시)

<ul class="pagination">

  <li class="page-item active"><a class="page-link" href="#">2</a></li>

  ...

</ul>

 

결과보기

※ BS4와 동일

Pagination Disabled (비활성화 = 클릭방지)

 

<ul class="pagination">

  <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>

  ...

</ul>

 

결과보기

※ BS4와 동일

Pagination Size (크기)

[큰 페이징] 

 

<ul class="pagination pagination-lg">

  <li class="page-item"><a class="page-link" href="#">Previous</a></li>

  ...

</ul>

 

---

[작은 페이징]

 

<ul class="pagination pagination-sm">

  <li class="page-item"><a class="page-link" href="#">Previous</a></li>

  ...

</ul>

 

결과보기

※ BS4와 동일

Pagination Align (정렬)

[왼쪽정렬]

 

<ul class="pagination" style="margin:20px 0"> 

    <li class="page-item"><a class="page-link" href="#">Previous</a></li>

    ...

</ul>

 

---

[가운데정렬]

 

<ul class="pagination justify-content-center" style="margin:20px 0"> 

    <li class="page-item"><a class="page-link" href="#">Previous</a></li>

    ...

</ul>

 

---

[오른쪽정렬]

 

<ul class="pagination justify-content-end" style="margin:20px 0"> 

    <li class="page-item"><a class="page-link" href="#">Previous</a></li>

    ...

</ul>

 

결과보기

※ BS4와 동일

Pagination 종합 예제

 

<ul class="pagination pagination-lg justify-content-center">

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

 

---

[UL 태그용 클래스]

 

크기

• pagination-lg 클래스 : 대형
• 별도로 클래스 없으면 : 중형
• pagination-sm 클래스 : 소형

 

정렬

• 별도로 클래스 없으면 : 왼쪽
• justify-content-center 클래스 : 중앙
• justify-content-end 클래스 : 오른쪽

 

---

[LI 태그용 클래스]

활성/비활성

• active : 활성화 (= 현재페이지)
• disabled : 비활성화 (= 클릭금지)

 

※ BS4와 동일

Breadcrumb (빵메뉴)

 

<ul class="breadcrumb">

  <li class="breadcrumb-item"><a href="#">홈</a></li>

  <li class="breadcrumb-item"><a href="#">코딩언어</a></li>

  <li class="breadcrumb-item"><a href="#">BS5</a></li>

  <li class="breadcrumb-item active">Basic</li>

</ul>

 

결과보기 

※ BS4와 동일