[Pagination]
.pagination (페이지 번호 링크 만들기)
.pagination-lg (페이지 번호 크게 만들기)
.pagination-sm (페이지 번호 작게 만들기)
.disabled (링크 클릭 안 되게 만들기)
.active (현재 선택된 페이지 번호 표시)
[Breadcrumb]
.breadcrumb (사이트 이동 경로 만들기) - 빵메뉴
Pagination
Pagination 기본
<nav>
<ul class="pagination">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<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>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
Pagination 비활성화/비활성화
방법1 - 클래스만 추가
<nav>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
방법2 : 클래스 추가 + <a>태그를 <span>태그로 교체.
<nav>
<ul class="pagination">
<li class="disabled"><span><span aria-hidden="true">«</span></span></li>
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
...
</ul>
</nav>
Pagination 크기
대형: <nav><ul class="pagination pagination-lg">...</ul></nav>
보통: <nav><ul class="pagination">...</ul></nav>
소형: <nav><ul class="pagination pagination-sm">...</ul></nav>
Breadcrumb
Breadcrumb : 네비게이션 시스템에서의 현재페이지 위치 표시.
구분자는 CSS 에서 :before 와 content 를 통해 자동으로 추가
Breadcrumb (빵메뉴)
<ul class="breadcrumb">
<li><a href="#">홈</a></li>
<li><a href="#">코딩언어</a></li>
<li><a href="#">BS4</a></li>
<li class="active">Basic</li>
</ul>
결과보기