W3.CSS Paginations
이 페이지의 많은 웹 사이트가있는 경우 각 페이지에 페이지 매김 어떤 종류를 추가 할 수 있습니다 :
기본 페이지 매김
<UL> 요소에 W3-매김 클래스를 추가, 기본 페이지 매김을 만들려면 :
예
<ul class="w3-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> »그에게 자신을보십시오 페이지 매김 화살표
페이지 매김 화살표를 추가하는 아이콘 라이브러리에서 HTML 개체 또는 아이콘을 사용합니다 :
예
<ul class="w3-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> »그에게 자신을보십시오 액티브 / 현재 링크
사용자가 어느 페이지에 표시하기 위해 w3- 색상 클래스 중 하나를 사용하여
예
<ul class="w3-pagination">
<li><a href="#">«</a></li>
<li><a
class="w3-green" 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> »그에게 자신을보십시오 호버 색상
당신은 페이지 매김 링크 위로 마우스를 이동하면 기본적으로, 그들은 회색 배경 색상을 얻을. 호버 색상을 변경하려면 W3-hover- 색상 클래스 중 하나를 사용 :
예
<ul class="w3-pagination">
<li><a href="#"
class="w3-hover-purple">«</a></li>
<li><a href="#"
class="w3-hover-green">1</a></li>
<li><a href="#"
class="w3-hover-red">2</a></li>
<li><a href="#"
class="w3-hover-blue">3</a></li>
<li><a href="#"
class="w3-hover-black">4</a></li>
<li><a href="#"
class="w3-hover-orange">»</a></li>
</ul> »그에게 자신을보십시오 페이지 매김 크기 조정
W3-작은,-W3 작은 W3 대형, W3 - 초대형, W3-xxlarge 또는 크기 매김에 W3-xxxlarge 사용
경계가 매김
테두리가있는 페이지 매김을 만들 수 W3 국경 클래스를 추가합니다 :
둥근 테두리
둥근 테두리 W3 국경 옆에 W3 라운드 클래스를 추가 :
중심 매김
클래스 = "W3 센터"와 함께 <div> 요소를 포장, 페이지 매김을 중심으로 주위에 <UL>
다른 페이지 매김 예
다음 / 이전 예
<ul class="w3-pagination w3-border w3-round">
<li><a href="#">❮
Previous</a></li>
<li><a href="#">Next
❯</a></li>
</ul> »그에게 자신을보십시오 메뉴 예
<ul class="w3-pagination w3-border">
<li><a href="#"
class="w3-light-grey">Home</a></li>
<li><a href="#">Link
1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link
3</a></li>
</ul> »그에게 자신을보십시오