문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Bootstrap Pagination======
<WRAP left notice 80%>
  * description : Bootstrap Pagination
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-25
</WRAP>
<WRAP clear></WRAP>
\\
=====Basic Pagination=====
페이지가 많은 웹 사이트가 있는 경우, 각 페이지에 일종의 **페이지 매김(pagination)**을 추가 할 수 있습니다.\\
\\
Bootstrap의 기본 페이지 매김은 다음과 같습니다.\\
\\
{{:wiki:bootstrap:bootstrap_note:pagination.png?300|}}\\
기본 페이지 매김을 만들려면, ''%%.pagination%%'' 클래스를 ''%%<ul>%%'' 요소에 추가합니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Pagination</h2>
        <p>The .pagination class provides pagination links:</p>
        <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>
    </div>

</body>
</HTML>
\\
=====Active State (활성화 상태)=====
활성화 상태는 현재 페이지를 나타냅니다.\\
\\
{{:wiki:bootstrap:bootstrap_note:pagination-active-state.png?300|}}\\
''%%.active%%'' 클래스를 추가하여 사용자가 어느 페이지에 있는지 알 수 있습니다.\\
\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Pagination - Active State</h2>
        <p>Add clsss .active to let the user know which page he/she is on:</p>
        <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>
    </div>

</body>
</HTML>
\\
=====Disabled State (비활성화 상태)=====
비활성화 링크는 클릭할 수 없습니다:\\
\\
링크가 어떤 이유로 비활성화 상태일 경우, ''%%.disabled%%'' 클래스를 추가합니다.\\
\\
클릭이 되지 않는 곳에 마우스 오버 시 마우스 아이콘이 변경됩니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Pagination - Disabled State</h2>
        <p>Add class .disabled if a page for some reason is disabled:</p>
        <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>
    </div>

</body>
</HTML>
\\
=====Pagination Sizing=====
Pagination 블럭은 더 크거나 더 작은 크기로 변경될 수 있습니다.\\
\\
{{:wiki:bootstrap:bootstrap_note:pagination-sizing.png?300|}}\\
큰 블럭의 경우, ''%%.pagination-lg%%'' 클래스를 추가하고, 작은 블럭의 경우 ''%%.pagination-sm%%'' 클래스를 추가합니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Pagination - Sizing</h2>
        <p>Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.</p>

        <p>Large:</p>
        <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>

        <p>Default:</p>
        <ul class="pagination 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>

        <p>Small:</p>
        <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>

    </div>

</body>
</HTML>
\\
=====Breadcrumbs=====
Pagination의 다른 형태는 breadcrumbs(이동경로)입니다:\\
\\
{{:wiki:bootstrap:bootstrap_note:breadcrumb.png?500|}}\\
''%%.breadcrumb%%'' 클래스는 탐색 계층 구조 내에서 현재 페이지의 위치를 나타냅니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Breadcrumbs</h2>
        <p>The .breadcrumb class indicates the current page's location within a navigational hierarchy:</p>
        <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>
    </div>

</body>
</HTML>

 







{{tag>오션 Bootstrap Pagination}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
