부트스트랩 Bootstrap 3 구성요소 Breadcrumbs,Pagination

빵조각인 Breadcrumbs 와 페이징인 Pagination 을 이야기 합니다.

빵조각은 영어로 Breadcrumbs 라고 말하는데 뜻은 탐색 계층구조에서 현재 보여지는 페이지를 보여주는 것을 말합니다.(카테고리라고 말해도 뜻은 어느정도 맞다고 봅니다.)

티스토리에서 현재 페이지처럼 Home > 블로그 글 이렇게 쓰면 이해가 되실려나...... 또는 Home > 카테고리1 > 카테고리1-1 이런식으로 현재보여지는 페이지가 어느 위치에 해당하는지를 보여주는것이 바로 Breadcrumbs(빵조각) 입니다.

페이징은 현재페이지를 기점으로 다음페이지가 있거나 이전페이지가 있을때 다음이나 이전으로 넘어갈 수 있는 링크들의 모음입니다.

즉 페이지넘김이죠.

Breadcrumbs

기본 스타일은 아래와 같습니다.

아래 이미지를 보시면 Home 과 Library 사이에 막대 같은것이 보이는데 이것은 둘을 구분하기 위함입니다.

이것을 사용하기 위해서는 :before 와 content 라는 것을 사용합니다.

이것은 유사클래스, 가짜클래스 라고 합니다.

목록인 li 에 스타일을 줌으로써 li 와 li 가 서로 구분되어 보이게끔 합니다.

또한 현재 페이지를 알리기 위해서는 li 에 .active 라는 클래스를 사용합니다. 그럼 컬러값이 #999 로 보여집니다.

Pagination

부트스트랩에서 제공하는 페이징은 여러가지 스타일이 있습니다.

기본 스타일은 왼쪽과 오른쪽에 페이지가 더있다는 표시를 하고 가운데에 숫자들이 옵니다.

첫번째와 마지막의 li 를 눈여겨보시면 됩니다.

페이징에서도 비활성을 표시하려면 disabled 클래스를 li 에 지정하면 됩니다. 그럼 아래 이미지처럼 마우스가 사용하지 못하도록 표시됩니다.

활성화 표시는 .active 클래스를 사용하면 됩니다. 이것은 현재 페이지로 사용합니다.

또 .sr-only 라는 클래스도 이용할수 있습니다 . 이것은 화면에 표시되지 않고 스크린리더에서 읽을 수 있는 형태로 적절한 곳에 사용하면 되겠습니다.

페이징의 크기조절입니다. 크기조절은 .pagination-* 로 lg, sm 등등으로 표기하면 됩니다.

페이퍼는 빠른 이전과 빠른 다음과 같은 형태로 블로그나 매거진 같은 곳에 잘 쓰이는 페이지넘김입니다.

기본 스타일은 중앙정렬로 되어 있습니다.

링크를 정렬하는데요. 주의점은 이전에 사용하던 .pull-right, .pull-left 등과 같은 클래스를 사용하지 않는다는 점입니다.

이전을 뜻하는 .previous 클래스와 다음을 뜻하는 .next 클래스를 사용하며 그 자식에 float 스타일이 지정이 되어 있습니다.

비활성화 옵션에는 이전에도 여러번 이야기했던 .disabled 클래스를 사용하며 마우스가 클릭되지 않게 표시되며 처음부터 비활성 상태로 보입니다.

demun(대문블로그)