목차
Bootstrap Pagination
- description : Bootstrap Pagination
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-25
Basic Pagination
페이지가 많은 웹 사이트가 있는 경우, 각 페이지에 일종의 페이지 매김(pagination)을 추가 할 수 있습니다.
Bootstrap의 기본 페이지 매김은 다음과 같습니다.
기본 페이지 매김을 만들려면, .pagination 클래스를 <ul> 요소에 추가합니다.
예제
Active State (활성화 상태)
활성화 상태는 현재 페이지를 나타냅니다.
.active 클래스를 추가하여 사용자가 어느 페이지에 있는지 알 수 있습니다.
예제
Disabled State (비활성화 상태)
비활성화 링크는 클릭할 수 없습니다:
링크가 어떤 이유로 비활성화 상태일 경우, .disabled 클래스를 추가합니다.
클릭이 되지 않는 곳에 마우스 오버 시 마우스 아이콘이 변경됩니다.
예제
Pagination Sizing
Pagination 블럭은 더 크거나 더 작은 크기로 변경될 수 있습니다.
큰 블럭의 경우, .pagination-lg 클래스를 추가하고, 작은 블럭의 경우 .pagination-sm 클래스를 추가합니다.
예제
Pagination - Sizing
Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.
Large:
Default:
Small:
Breadcrumbs
Pagination의 다른 형태는 breadcrumbs(이동경로)입니다:
.breadcrumb 클래스는 탐색 계층 구조 내에서 현재 페이지의 위치를 나타냅니다.
예제
Breadcrumbs
The .breadcrumb class indicates the current page's location within a navigational hierarchy:
