부트스트랩 페이지 매김
기본 페이지 매김
페이지가 많은 웹 사이트가 있는 경우 각 페이지에 일종의 페이지 매김을 추가할 수 있습니다.
Bootstrap의 기본 페이지 매김은 다음과 같습니다.
기본 페이지 매김을 만들려면 요소 에 .pagination클래스를 추가하세요.<ul>
예시
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
활성 상태
활성 상태는 현재 페이지가 무엇인지 보여줍니다.
.active사용자가 현재 어느 페이지에 있는지 알려주는 클래스 추가 :
예시
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
장애인 상태
비활성화된 링크는 클릭할 수 없습니다.
.disabled어떤 이유로 링크가 비활성화된 경우 클래스 추가 :
예시
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
페이지 매김 크기 조정
페이지 매김 블록은 더 큰 크기나 더 작은 크기로 크기를 조정할 수도 있습니다.
.pagination-lg더 큰 블록 또는 더 작은 블록에 대한 클래스 추가 .pagination-sm:
예시
<ul class="pagination pagination-lg">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<ul class="pagination pagination-sm">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
빵 부스러기
페이지 매김의 또 다른 형식은 이동 경로입니다.
.breadcrumb클래스는 탐색 계층 구조 내에서 현재 페이지의 위치를 나타냅니다 .
예시
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>
전체 부트스트랩 탐색 참조
모든 탐색 클래스에 대한 전체 참조를 보려면 전체 부트스트랩 탐색 참조 로 이동하십시오 .