부트스트랩 페이지 매김
이 장에서는 Bootstrap에서 지원하는 페이징 기능에 대해 설명합니다. 페이지 매김은 순서가 지정되지 않은 목록입니다. 부트스트랩은 다른 인터페이스 요소처럼 페이지 매김을 처리합니다.
Pagination
다음 표에는 페이지 매기기를 처리하기 위해 Bootstrap에서 제공하는 클래스가 나열되어 있습니다.
| Class | Description | 샘플 코드 |
|---|---|---|
| .pagination | 페이지에 페이지 매김을 표시하려면 이 클래스를 추가하세요. | <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> ....... </ul> |
| .disabled, .active | .disabled를 사용하여 클릭할 수 없는 링크를 정의하고 .active를 사용하여 현재 페이지를 표시하여 링크를 사용자 정의할 수 있습니다. | <ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li> ....... </ul> |
| .pagination-lg, .pagination-sm | 이 클래스를 사용하여 다양한 크기의 항목을 가져옵니다. | <ul class="pagination pagination-lg">...</ul> <ul class="pagination">...</ul> <ul class="pagination pagination-sm">...</ul> |
Default Pagination
다음 예에서는 위 표에서 설명한 .pagination 클래스의 사용법을 보여줍니다.
Example
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默认的分页</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <ul class="pagination"> <li><a href="#">«</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="#">»</a></li> </ul> </body> </html>
예제 실행 »
인스턴스 실행" 버튼 온라인 인스턴스의 상태를 보려면
페이지 매기기
다음 예에서는 위 표에서 설명한 .disabled, .active 클래스의 사용법을 보여줍니다.
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 分页的状态</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <ul class="pagination"> <li><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li class="disabled"><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="#">»</a></li> </ul> </body> </html>
Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
페이지 매김 크기
다음 예에서는 위 표에서 설명한 .pagination-* 클래스의 사용법을 보여줍니다.
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 分页的大小</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <ul class="pagination pagination-lg"> <li><a href="#">«</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="#">»</a></li> </ul><br> <ul class="pagination"> <li><a href="#">«</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="#">»</a></li> </ul><br> <ul class="pagination pagination-sm"> <li><a href="#">«</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="#">»</a></li> </ul> </body> </html>
예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.
페이지(페이저)
사용자에게 탐색 기능을 제공하는 간단한 페이징 링크를 만들고 싶다면 페이지를 넘기면 됩니다. . 페이지 매김 링크와 마찬가지로 페이징도 순서가 지정되지 않은 목록입니다. 기본적으로 링크는 중앙에 위치합니다. 다음 표에는 페이지 넘김을 처리하는 Bootstrap 클래스가 나열되어 있습니다.
| Class | Description | 샘플 코드 |
|---|---|---|
| .pager | 페이지 전환 링크를 얻으려면 이 클래스를 추가하세요. | <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> |
| .previous, .next | 링크를 왼쪽으로 정렬하려면 .previous 클래스를 사용하고, 링크를 오른쪽으로 정렬하려면 .next를 사용하세요. | <ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> |
| .disabled | 이 클래스를 추가하면 희미한 모습을 얻을 수 있습니다. | <ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> |
기본 페이지 넘김
다음 예는 위 표에서 논의된 .pager 클래스의 사용법을 보여줍니다.
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默认的翻页</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </body> </html>
인스턴스 실행»
"인스턴스 실행" 버튼을 클릭하여 온라인 예
Aligned Links
다음 예에서는 위 표에서 설명한 .previous, .next 클래스의 사용법을 보여줍니다. " 버튼을 클릭하여 온라인 인스턴스
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 翻页中对齐的链接</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> </body> </html>
인스턴스 실행»클릭 온라인 예제를 보려면 "예제 실행" 버튼을 누르세요
