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-XLARGE、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> »それを自分で試してみてください