Bootstrap 5

[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와 동일


분류 제목
basic BS5 - HOME (BS소개)
basic BS5 - Start (BS시작) - BS5다운로드 / BS5CDN / BS5구문
basic BS5 - Container (BS컨테이너) - 박스형 vs 와이드형 (= .container vs. .co…
basic BS5 - Grid (BS그리드)
basic BS5 - Text/Typography (BS글자/BS텍스트)
basic BS5 - Color (BS색깔/BS색상) - 글자색 / 배경색
basic BS5 - Table (BS테이블) - 테이블테두리 / 테이블배경색 / 반응형테이블
basic BS5 - Image (BS이미지) - 이미지모양 / 이미지정렬 / 반응형이미지
basic BS5 - Jumbotron (BS점보트론) - 지원 X
basic BS5 - Alert (BS경고 = BS얼럿 = BS경보)
basic BS5 - Button (BS버튼) - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS5 - Button Group (BS버튼그룹)
basic BS5 - Badge (BS배지)
basic BS5 - Progress Bar (BS진행바 = BS진도바 = BS프로그레스바)
basic BS5 - Spinner (BS스피너 = BS회전 = BS로더)
basic BS5 - Pagination (BS페이지매기기 = BS페이지번호 = BS페이징 = BS패지네이션) + BS…
basic BS5 - List Group (BS리스트그룹)
basic BS5 - Card (BS카드)
basic BS5 - Dropdown (BS드롭다운/BS드롭업 = BS드랍다운/BS드랍업)
basic BS5 - Collapse (BS접기 = BS컬랩스 = BS토글)
1/4
목록
 홈  PC버전 로그인 일본어
그누앞단언어 1
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 1
웹유틸
회원센터
홈짱닷컴 PC버전 로그인