[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>
결과보기
