財団タブ
あなたはコンテンツページの多くを持っている場合は、ページング機能を使用する必要があります。
基本的なページング機能を作成するには必要です<ul>
要素を加えた上.pagination
カテゴリ:
例
<ULクラス = "ページネーション">
<李> <aのHREF = "#"> 1 </ A> </ LI>
<李> <aのHREF = "#"> 2 </ A> </ LI>
<李> <aのHREF = "#"> 3 </ A> </ LI>
<李> <aのHREF = "#"> 4 </ A> </ LI>
<李> <aのHREF = "#"> 5 </ A> </ LI>
</ UL>
<李> <aのHREF = "#"> 1 </ A> </ LI>
<李> <aのHREF = "#"> 2 </ A> </ LI>
<李> <aのHREF = "#"> 3 </ A> </ LI>
<李> <aのHREF = "#"> 4 </ A> </ LI>
<李> <aのHREF = "#"> 5 </ A> </ LI>
</ UL>
»をお試しください
現在ページ
あなたがすることができます<li>
追加.current
現在のページをマークするクラス:
例
<ULクラス = "ページネーション">
<李クラス= "現在"> <aのHREF = "#"> 1 </ A> </ LI>
<李> <aのHREF = "#"> 2 </ A> </ LI>
<李> <aのHREF = "#"> 3 </ A> </ LI>
<李> <aのHREF = "#"> 4 </ A> </ LI>
<李> <aのHREF = "#"> 5 </ A> </ LI>
</ UL>
<李クラス= "現在"> <aのHREF = "#"> 1 </ A> </ LI>
<李> <aのHREF = "#"> 2 </ A> </ LI>
<李> <aのHREF = "#"> 3 </ A> </ LI>
<李> <aのHREF = "#"> 4 </ A> </ LI>
<李> <aのHREF = "#"> 5 </ A> </ LI>
</ UL>
»をお試しください
タブを無効にします
あなたは、タブを設定する必要がある場合は、クリックできない必要.unavailable
種類:
例
<ULクラス = "ページネーション">
<李> <aのHREF = "#"> 1 </ A> </ LI>
<李> <aのHREF = "#"> 2 </ A> </ LI>
<李クラス= "使用不能"> <aのHREF = "#"> 3 </ A> </ LI>
<李> <aのHREF = "#"> 4 </ A> </ LI>
<李> <aのHREF = "#"> 5 </ A> </ LI>
</ UL>
<李> <aのHREF = "#"> 1 </ A> </ LI>
<李> <aのHREF = "#"> 2 </ A> </ LI>
<李クラス= "使用不能"> <aのHREF = "#"> 3 </ A> </ LI>
<李> <aのHREF = "#"> 4 </ A> </ LI>
<李> <aのHREF = "#"> 5 </ A> </ LI>
</ UL>
»をお試しください
ページング方向
最初と最後のコード> <LI>要素の追加で.arrow
クラス挿入HTMLエンティティ記号«
し、 »
ページング方向のシンボルを作成するには:
例
<ULクラス = "ページネーション">
<李クラス= "矢印"> <aのhref = "#">&LAQUO; </ A> </ LI>
<李> <aのHREF = "#"> 1 </ A> </ LI>
<李> <aのHREF = "#"> 2 </ A> </ LI>
<李> <aのHREF = "#"> 3 </ A> </ LI>
<李> <aのHREF = "#"> 4 </ A> </ LI>
<李> <aのHREF = "#"> 5 </ A> </ LI>
<李クラス= "矢印"> <aのhref = "#">表示&raquo; </ A> </ LI>
</ UL>
»をお試しください <李クラス= "矢印"> <aのhref = "#">&LAQUO; </ A> </ LI>
<李> <aのHREF = "#"> 1 </ A> </ LI>
<李> <aのHREF = "#"> 2 </ A> </ LI>
<李> <aのHREF = "#"> 3 </ A> </ LI>
<李> <aのHREF = "#"> 4 </ A> </ LI>
<李> <aのHREF = "#"> 5 </ A> </ LI>
<李クラス= "矢印"> <aのhref = "#">表示&raquo; </ A> </ LI>
</ UL>
ページング中心
我々は、追加することができます。<UL>外側<div>
要素と<div>
に追加.pagination-centered
ページング中心を実装するクラス:
例
<DIVクラス= "ページネーションを中心としました ">
<ULクラス = "ページネーション">
<李クラス= "矢印"> <aのhref = "#">&LAQUO; </ A> </ LI>
<李クラス= "現在"> <aのHREF = "#"> 1 </ A> </ LI>
<李> <aのHREF = "#"> 2 </ A> </ LI>
<李> <aのHREF = "#"> 3 </ A> </ LI>
<李> <aのHREF = "#"> 4 </ A> </ LI>
<李> <aのHREF = "#"> 5 </ A> </ LI>
<李クラス= "矢印"> <aのhref = "#">表示&raquo; </ A> </ LI>
</ UL>
</ DIV>
<ULクラス = "ページネーション">
<李クラス= "矢印"> <aのhref = "#">&LAQUO; </ A> </ LI>
<李クラス= "現在"> <aのHREF = "#"> 1 </ A> </ LI>
<李> <aのHREF = "#"> 2 </ A> </ LI>
<李> <aのHREF = "#"> 3 </ A> </ LI>
<李> <aのHREF = "#"> 4 </ A> </ LI>
<李> <aのHREF = "#"> 5 </ A> </ LI>
<李クラス= "矢印"> <aのhref = "#">表示&raquo; </ A> </ LI>
</ UL>
</ DIV>
»をお試しください
パン粉
ブレッドクラムナビゲーション構造は、現在のページを表示するために使用されます。
では<ul>
要素に追加された.breadcrumbs
パンくずリストを実装するクラスを。 あなたは上の<LI>を追加することができます.current
または.unavailable
現在のページを設定し、クラスではなく、クリック可能な効果:
例
<ULクラス = "ブレッドクラム">
<李> <aのHREF = "#">ホーム</ A> </ LI>
<李> <aのHREF = "#">プライベート</ A> </ LI>
<李クラス= "使用不能"> <aのHREF = "#">写真</ A> </ LI>
<李クラス= "現在">休暇ます。</ li>
</ UL>
<李> <aのHREF = "#">ホーム</ A> </ LI>
<李> <aのHREF = "#">プライベート</ A> </ LI>
<李クラス= "使用不能"> <aのHREF = "#">写真</ A> </ LI>
<李クラス= "現在">休暇ます。</ li>
</ UL>
»をお試しください
サブナビゲーション
ページの切り替え、サブナビゲーションは非常に便利です。
では<dl>
要素が追加されます.sub-nav
サブナビゲーションを作成するクラスを。 では<dt>
要素には、選択したオプションのタイトルを追加するには<dd>
追加.active
種類:
例
<ULクラス= "サブNAV ">
<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>
»をお試しください