web サイトに大量のページを持っている場合は、各ページにある種のページネーションを追加したいときがあります：
基本的なページネーションを作成するには、<ul> 要素に w3-pagination クラスを追加します：
<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>
Try It Yourself ❯
ページネーションの矢印を追加するには、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>
Try It Yourself ❯
ユーザが今どのページにいるのかを示すために、w3-color のいずれかを使用します：
<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>
Try It Yourself ❯
デフォルトでは、ページネーションリンクの上にマウスを移動すると、背景が灰色になります。 ホバー時の色を変更するには、w3-hover-color いずれかを使用します：
<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>
Try It Yourself ❯
ページネーションのサイズには、w3-tiny、w3-small、w3-large、 w3-xlarge、w3-xxlarge または w3-xxxlarge を使用します：
ボーダー付きのページネーションを作るには、w3-border クラスを追加します：
角丸のボーダーにするためには、w3-border の次に w3-round クラスを追加します：
ページネーションを中央に配置する場合は、<ul> の周りを class="w3-center" を持つ <div> 要素でラップします：
<ul class="w3-pagination w3-border w3-round">
<li><a href="#">❮
previous</a></li>
<li><a href="#">Next
❯</a></li>
</ul>
Try It Yourself ❯
<ul class="w3-pagination w3-light-grey">
<li><a href="#"
class="w3-dark-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>
Try It Yourself ❯