Foundation ページネーション

基本的なページネーション

web サイトにたくさんのページがある場合、各ページにある種のページネーションを追加したい場合があります。

基本的なページネーションを作成するには、<ul> 要素に .pagination クラスを追加します：

アクティブ/現在の状態

現在、ユーザにどのページにいるかを知らせるため、<li> に .current クラスを追加します：

無効/使用不可状態

何らかの理由でリンクが無効（クリック不可）になっている場合、.unavailable クラスを追加します：

ページネーションの矢印

最初と最後の <li> 要素に .arrow クラスを追加し、 矢印を作るために « と » を挿入します：

ページネーションの中央揃え

ページネーションを中央にするには、<ul> の周りをクラス .pagination-centered を持った <div> 要素でラップします：

パンくずリスト

パンくずリストは、ナビゲーション階層内の現在のページの位置を示します。

<ul> 要素に .breadcrumbs を追加します。 また、<li> 要素には .current や .unavailable を追加することができます：:

Sub Navs

sub nav は、ページの異なる状態間を移動するのに最適です。

<dl> 要素に .sub-nav を追加します。<dt> 要素で先頭にタイトルを追加し、 アクティブなスタイルを設定するために、<dd> 要素に .active（.currentではない）クラスを 追加します：