웹사이트에는 게시판 같은 경우 하단에 페이지 매김이 추가됩니다.

부트스트랩에서 페이지 매김은 <ul><li> 요소를 사용합니다.  기본 페이지 매김을 만들려면 .pagination클래스를 <ul>요소에 추가합니다. 그 다음 <li>요소에 .page-item클래스를 추가하고 <li>내부의 페이지 링크에는 .page-link클래스를 추가합니다.

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">이전</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">4</a></li>
  <li class="page-item"><a class="page-link" href="#">5</a></li>
  <li class="page-item"><a class="page-link" href="#">6</a></li>
  <li class="page-item"><a class="page-link" href="#">다음</a></li>
</ul>

활성 상태(active)

현재 페이지를 강조 표시하기 위해 .active 클래스를 사용합니다.

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">이전</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item active"><a class="page-link" href="#">4</a></li>
  <li class="page-item"><a class="page-link" href="#">5</a></li>
  <li class="page-item"><a class="page-link" href="#">6</a></li>
  <li class="page-item"><a class="page-link" href="#">다음</a></li>
</ul>

비활성 상태(Disabled)

클릭할 수 없는 링크에는 .disabled클래스를 사용합니다.

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">이전</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item active"><a class="page-link" href="#">4</a></li>
  <li class="page-item"><a class="page-link" href="#">5</a></li>
  <li class="page-item"><a class="page-link" href="#">6</a></li>
  <li class="page-item disabled"><a class="page-link" href="#">다음</a></li>
</ul>

페이지 매김 크기

.pagination-lg, pagination-sm클래스를 사용하여 페이지 매김의 크기를 조정할 수 있습니다.

<ul class="pagination pagination-lg">
    <li class="page-item"><a class="page-link" href="#">이전</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">6</a></li>
    <li class="page-item"><a class="page-link" href="#">다음</a></li>
</ul>

<ul class="pagination pagination-sm">
    <li class="page-item"><a class="page-link" href="#">이전</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">6</a></li>
    <li class="page-item"><a class="page-link" href="#">다음</a></li>
</ul>

Breadcrumbs(경로)

.breadcrmb와 .breadcrumb-item 클래스를 이용하면 탐색 계층 구조에서 현 웹페이지의 위치를 나타낼 수 있습니다.

<ul class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">강좌</a></li>
    <li class="breadcrumb-item"><a href="#">유료강좌</a></li>
    <li class="breadcrumb-item"><a href="#">실전홈페이지제작</a></li>
    <li class="breadcrumb-item active">그누보드5 스킨 만들기</li>
</ul>