부트 스트랩 탭
이 장에서는 부트 스트랩 탭에서 지원하는 기능을 설명합니다. 페이징 처리로 페이징 (매김)가, 정렬되지 않은 목록, 부트 스트랩은 다른 인터페이스 요소처럼 취급.
페이징 (페이지 설정)
다음 표는 부트 스트랩 처리 페이징 클래스를 제공 나열.
| Class | 描述 | 示例代码 |
|---|---|---|
| .pagination | 添加该 class 来在页面上显示分页。 |
<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 | 使用这些 class 来获取不同大小的项。 |
<ul class="pagination pagination-lg">...</ul> <ul class="pagination">...</ul> <ul class="pagination pagination-sm">...</ul> |
기본 탭
다음의 예는 클래스 테이블 설명.pagination 사용량을 보여줍니다
예
<UL 클래스 = "매김">
<LI> <A HREF = "#"> & LAQUO ; </ A> </ 리>
<LI> <A HREF = "#"> 1 < / A> </ 리>
<LI> <A HREF = "#"> 2 < / A> </ 리>
<LI> <A HREF = "#"> 3 < / A> </ 리>
<LI> <A HREF = "#"> 4 < / A> </ 리>
<LI> <A HREF = "#"> 5 < / A> </ 리>
<LI> <A HREF = "#">보기 & raquo ; </ A> </ 리>
</ UL>
»시도
결과는 다음과 같다 :
페이징 상태
다음의 예는클래스, 테이블 위에서 설명한 .active는사용을 .disabled 보여줍니다 :
예
<UL 클래스 = "매김">
<LI> <A HREF = "#"> & LAQUO ; </ A> </ 리>
<리 클래스> <A = "활성" HREF = "#"> 1 < / A> </ 리>
<리 클래스> <A = "비활성화" HREF = "#"> 2 < / A> </ 리>
<LI> <A HREF = "#"> 3 < / A> </ 리>
<LI> <A HREF = "#"> 4 < / A> </ 리>
<LI> <A HREF = "#"> 5 < / A> </ 리>
<LI> <A HREF = "#">보기 & raquo ; </ A> </ 리>
</ UL>
»시도
결과는 다음과 같다 :
페이지 크기
다음은 클래스 테이블* 사용을 .pagination-설명을 보여줍니다
예
<UL 클래스 = "매김 페이지 매김-LG" >
<LI> <A HREF = "#"> & LAQUO ; </ A> </ 리>
<LI> <A HREF = "#"> 1 < / A> </ 리>
<LI> <A HREF = "#"> 2 < / A> </ 리>
<LI> <A HREF = "#"> 3 < / A> </ 리>
<LI> <A HREF = "#"> 4 < / A> </ 리>
<LI> <A HREF = "#"> 5 < / A> </ 리>
<LI> <A HREF = "#">보기 & raquo ; </ A> </ 리>
</ UL>로 <br>
<UL 클래스 = "매김">
<LI> <A HREF = "#"> & LAQUO ; </ A> </ 리>
<LI> <A HREF = "#"> 1 < / A> </ 리>
<LI> <A HREF = "#"> 2 < / A> </ 리>
<LI> <A HREF = "#"> 3 < / A> </ 리>
<LI> <A HREF = "#"> 4 < / A> </ 리>
<LI> <A HREF = "#"> 5 < / A> </ 리>
<LI> <A HREF = "#">보기 & raquo ; </ A> </ 리>
</ UL>로 <br>
<UL 클래스 = "매김 페이지 매김-SM" >
<LI> <A HREF = "#"> & LAQUO ; </ A> </ 리>
<LI> <A HREF = "#"> 1 < / A> </ 리>
<LI> <A HREF = "#"> 2 < / A> </ 리>
<LI> <A HREF = "#"> 3 < / A> </ 리>
<LI> <A HREF = "#"> 4 < / A> </ 리>
<LI> <A HREF = "#"> 5 < / A> </ 리>
<LI> <A HREF = "#">보기 & raquo ; </ A> </ 리>
</ UL>
»시도
결과는 다음과 같다 :
플립 (호출기)
사용자가 제공하는 간단한 페이지 링크를 만들려면 사용자가 달성 할 수있는 페이지를 통해 이동합니다. 그리고 정렬되지 않은 목록으로 페이징 링크는 플립입니다. 기본적으로 링크가 중심에있다. 다음 표는 부트 스트랩 처리 플립 클래스를 나열합니다.
| Class | 描述 | 示例代码 |
|---|---|---|
| .pager | 添加该 class 来获得翻页链接。 |
<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> |
| .previous, .next | 使用 class.previous把链接向左对齐，使用.next把链接向右对齐。 |
<ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> |
| .disabled | 添加该 class 来获得一个颜色变淡的外观。 |
<ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> |
기본 페이지
다음의 예는.pager 사용을 논의 클래스 테이블을 보여줍니다
예
<UL 클래스 = "호출기">
<LI> <A HREF = "#"> 이전 < / A> </ 리>
<LI> <A HREF = "#"> 다음 < / A> </ 리>
</ UL>
»시도
결과는 다음과 같다 :
정렬 링크
다음의 예는테이블 위에서 설명한 클래스 .previous, 다음 내용사용량을 보여줍니다
예
<UL 클래스 = "호출기">
<리 클래스> <A = "이전" HREF = "#"> & larr ; 이전 </ A> </ 리>
<리 클래스> <A = "다음" HREF = "#"> 최신 & rarr을; </ A> </ 리>
</ UL>
»시도
결과는 다음과 같다 :
플립 상태
다음의 예는 클래스 표.disabled 사용을 논의 보여
예
<UL 클래스 = "호출기">
<리 클래스 = "이전 불가능"> < HREF = "#"> & larr ; 이전 </ A> </ 리>
<리 클래스> <A = "다음" HREF = "#"> 최신 & rarr을; </ A> </ 리>
</ UL>
»시도
결과는 다음과 같다 :
페이지 매김의 또 다른 예
| 범주 | 기술 | 예 |
|---|---|---|
| .pager | 간단한 매김 링크, 링크를 중심으로. | 시험 |
| .previous | .pager 이전 버튼 스타일은 왼쪽 정렬 | 시험 |
| 다음 내용 | 다음 버튼 스타일 .pager, 오른쪽 정렬 | 시험 |
| .disabled | 안 링크 | 시험 |
| .pagination | 페이징 링크 | 시험 |
| .pagination - LG 전자 | 큰 페이징 링크 | 시험 |
| .pagination-SM | 페이징 링크의 작은 크기 | 시험 |
| .disabled | 안 링크 | 시험 |
| .active는 | 현재 액세스 페이지 링크 스타일 | 시험 |