재단 탭
콘텐츠 페이지가 많은 경우, 당신은 페이징 기능을 사용해야합니다.
기본 페이징 기능을 만들려면 필요 <ul> 요소 플러스에 .pagination 카테고리 :
예
<UL 클래스 = "매김">
<리> <a의 HREF = "#"> 1 </ A> </ 리>
<리> <a의 HREF = "#"> 2 </ A> </ 리>
<리> <a의 HREF = "#"> 3 </ A> </ 리>
<리> <a의 HREF = "#"> 4 </ A> </ 리>
<리> <a의 HREF = "#"> 5 </ A> </ 리>
</ UL>
<리> <a의 HREF = "#"> 1 </ A> </ 리>
<리> <a의 HREF = "#"> 2 </ A> </ 리>
<리> <a의 HREF = "#"> 3 </ A> </ 리>
<리> <a의 HREF = "#"> 4 </ A> </ 리>
<리> <a의 HREF = "#"> 5 </ A> </ 리>
</ UL>
»시도
현재 페이지
당신은 할 수 있습니다 <li> 추가 .current 현재 페이지를 표시하는 클래스를 :
예
<UL 클래스 = "매김">
<리 클래스 = "현재"> = "#"> 1 </ A> </ 리> <a의 HREF
<리> <a의 HREF = "#"> 2 </ A> </ 리>
<리> <a의 HREF = "#"> 3 </ A> </ 리>
<리> <a의 HREF = "#"> 4 </ A> </ 리>
<리> <a의 HREF = "#"> 5 </ A> </ 리>
</ UL>
<리 클래스 = "현재"> = "#"> 1 </ A> </ 리> <a의 HREF
<리> <a의 HREF = "#"> 2 </ A> </ 리>
<리> <a의 HREF = "#"> 3 </ A> </ 리>
<리> <a의 HREF = "#"> 4 </ A> </ 리>
<리> <a의 HREF = "#"> 5 </ A> </ 리>
</ UL>
»시도
안 탭
당신이 탭을 설정해야하는 경우는 없습니다 클릭 할 필요 .unavailable 카테고리 :
예
<UL 클래스 = "매김">
<리> <a의 HREF = "#"> 1 </ A> </ 리>
<리> <a의 HREF = "#"> 2 </ A> </ 리>
<리 클래스 = "사용할 수없는"> = "#"> 3 </ A> </ 리> <a의 HREF
<리> <a의 HREF = "#"> 4 </ A> </ 리>
<리> <a의 HREF = "#"> 5 </ A> </ 리>
</ UL>
<리> <a의 HREF = "#"> 1 </ A> </ 리>
<리> <a의 HREF = "#"> 2 </ A> </ 리>
<리 클래스 = "사용할 수없는"> = "#"> 3 </ A> </ 리> <a의 HREF
<리> <a의 HREF = "#"> 4 </ A> </ 리>
<리> <a의 HREF = "#"> 5 </ A> </ 리>
</ UL>
»시도
페이징 방향
첫 번째와 마지막 코드에서> <LI> 추가 요소 .arrow 클래스 삽입 HTML 엔티티는 기호 « 그리고 » 페이징 방향 기호를 만들 수 있습니다 :
예
<UL 클래스 = "매김">
<리 클래스 = "화살표"> <a의 HREF = "#"> 및 LAQUO; </ A> </ 리>
<리> <a의 HREF = "#"> 1 </ A> </ 리>
<리> <a의 HREF = "#"> 2 </ A> </ 리>
<리> <a의 HREF = "#"> 3 </ A> </ 리>
<리> <a의 HREF = "#"> 4 </ A> </ 리>
<리> <a의 HREF = "#"> 5 </ A> </ 리>
<리 클래스 = "화살표"> <a의 HREF = "#">보기 & raquo; </ A> </ 리>
</ UL>
»시도 <리 클래스 = "화살표"> <a의 HREF = "#"> 및 LAQUO; </ A> </ 리>
<리> <a의 HREF = "#"> 1 </ A> </ 리>
<리> <a의 HREF = "#"> 2 </ A> </ 리>
<리> <a의 HREF = "#"> 3 </ A> </ 리>
<리> <a의 HREF = "#"> 4 </ A> </ 리>
<리> <a의 HREF = "#"> 5 </ A> </ 리>
<리 클래스 = "화살표"> <a의 HREF = "#">보기 & raquo; </ A> </ 리>
</ UL>
페이징을 중심으로
우리는 추가 할 수있는 <UL> 외부 <div> 요소와 <div> 에 추가 .pagination-centered 페이징 중심을 구현하는 클래스 :
예
<사업부 클래스 = "매김 중심 ">
<UL 클래스 = "매김">
<리 클래스 = "화살표"> <a의 HREF = "#"> 및 LAQUO; </ A> </ 리>
<리 클래스 = "현재"> = "#"> 1 </ A> </ 리> <a의 HREF
<리> <a의 HREF = "#"> 2 </ A> </ 리>
<리> <a의 HREF = "#"> 3 </ A> </ 리>
<리> <a의 HREF = "#"> 4 </ A> </ 리>
<리> <a의 HREF = "#"> 5 </ A> </ 리>
<리 클래스 = "화살표"> <a의 HREF = "#">보기 & raquo; </ A> </ 리>
</ UL>
</ DIV>
<UL 클래스 = "매김">
<리 클래스 = "화살표"> <a의 HREF = "#"> 및 LAQUO; </ A> </ 리>
<리 클래스 = "현재"> = "#"> 1 </ A> </ 리> <a의 HREF
<리> <a의 HREF = "#"> 2 </ A> </ 리>
<리> <a의 HREF = "#"> 3 </ A> </ 리>
<리> <a의 HREF = "#"> 4 </ A> </ 리>
<리> <a의 HREF = "#"> 5 </ A> </ 리>
<리 클래스 = "화살표"> <a의 HREF = "#">보기 & raquo; </ A> </ 리>
</ UL>
</ DIV>
»시도
빵 부스러기
이동 경로 탐색 구조는 현재 페이지를 표시하는 데 사용된다.
에서 <ul> 요소에 추가 .breadcrumbs 빵 부스러기를 구현하는 클래스를. 당신은에 <리>를 추가 할 수 있습니다 .current 또는 .unavailable 설정 클래스 현재 페이지와 클릭 할 수없는 효과를 :
예
<UL 클래스 = "이동 경로">
<리> <a의 HREF = "#"> 홈 </ A> </ 리>
<리> <a의 HREF = "#"> 개인 </ A> </ 리>
<리 클래스 = "사용할 수없는"> <a의 HREF = "#"> 사진 </ A> </ 리>
<리 클래스 = "현재"> 휴가 </ 리>
</ UL>
<리> <a의 HREF = "#"> 홈 </ A> </ 리>
<리> <a의 HREF = "#"> 개인 </ A> </ 리>
<리 클래스 = "사용할 수없는"> <a의 HREF = "#"> 사진 </ A> </ 리>
<리 클래스 = "현재"> 휴가 </ 리>
</ UL>
»시도
하위 탐색
페이지에 전환, 서브 탐색은 매우 유용합니다.
에서 <dl> 요소가 추가됩니다 .sub-nav 서브 네비게이션을 만드는 클래스를. 에서 <dt> 요소에 선택된 옵션의 제목을 추가 할 <dd> 추가 .active 카테고리 :
예
<UL 클래스 = "하위 탐색 ">
<DT> 필터 : </ DT >
<DD 클래스 = "활성"> <a의 HREF = "#"> 모든 </ A> </ DD>
<DD> <A HREF = "#"> 활성 </ A> </ DD>
<DD> <A HREF = "#"> 보류 </ A> </ DD>
<DD> <A HREF = "#"> 일시 중지 </ A> </ DD>
</ UL>
<DT> 필터 : </ DT >
<DD 클래스 = "활성"> <a의 HREF = "#"> 모든 </ A> </ DD>
<DD> <A HREF = "#"> 활성 </ A> </ DD>
<DD> <A HREF = "#"> 보류 </ A> </ DD>
<DD> <A HREF = "#"> 일시 중지 </ A> </ DD>
</ UL>
»시도