목차

Bootstrap Pagination

  • description : Bootstrap Pagination
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-25


Basic Pagination

페이지가 많은 웹 사이트가 있는 경우, 각 페이지에 일종의 페이지 매김(pagination)을 추가 할 수 있습니다.

Bootstrap의 기본 페이지 매김은 다음과 같습니다.


기본 페이지 매김을 만들려면, .pagination 클래스를 <ul> 요소에 추가합니다.

예제

Pagination

The .pagination class provides pagination links:


Active State (활성화 상태)

활성화 상태는 현재 페이지를 나타냅니다.


.active 클래스를 추가하여 사용자가 어느 페이지에 있는지 알 수 있습니다.

예제

Pagination - Active State

Add clsss .active to let the user know which page he/she is on:


Disabled State (비활성화 상태)

비활성화 링크는 클릭할 수 없습니다:

링크가 어떤 이유로 비활성화 상태일 경우, .disabled 클래스를 추가합니다.

클릭이 되지 않는 곳에 마우스 오버 시 마우스 아이콘이 변경됩니다.

예제

Pagination - Disabled State

Add class .disabled if a page for some reason is 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:


Pagination의 다른 형태는 breadcrumbs(이동경로)입니다:


.breadcrumb 클래스는 탐색 계층 구조 내에서 현재 페이지의 위치를 나타냅니다.

예제

Breadcrumbs

The .breadcrumb class indicates the current page's location within a navigational hierarchy:

, ,