[basic] BS4 - 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 (빵메뉴)

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>

 

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

 

<ul class="pagination">

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

  ...

</ul>

 

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

 

<ul class="pagination">

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

  ...

</ul>

 

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>

 

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>

 

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 태그용 클래스]

disabled : 비활성화 (= 클릭금지)

active : 현재페이지

 

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="#">BS4</a></li>

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

</ul>

 

결과보기