• Q&A
  • 회원가입
  • 로그인

[basic] BS3 - Pagination (BS페이징 = BS페이지번호 = BS페이징 = BS패지네이션) + Breadcrumb (BS빵메뉴 = BS경로)

 

 

[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">&laquo;</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">&raquo;</span></a></li>

  </ul>

</nav>

 

 

Pagination 비활성화/비활성화

 

방법1 - 클래스만 추가

 

<nav>

  <ul class="pagination">

    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</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">&laquo;</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>

 

결과보기


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012