Merge pull request #3 from picturepan2/feature/navigation-code

add pagination example code

1 files changed, 34 insertions, 5 deletions

diff --git a/index.html b/index.html
index fd8f845..e431890 100644
--- a/index.html
+++ b/index.html
@@ -1446,11 +1446,6 @@
                                 2
                             </a>
                         </li>
-                        <li class="page-item ">
-                            <a href="#pagination">
-                                3
-                            </a>
-                        </li>
                         <li class="page-item">
                             <span>...</span>
                         </li>
@@ -1471,6 +1466,40 @@
                 <p>Add a container element with the class <code class="label">pagination</code>. And add child elements with the classname <code class="label">page-item</code>.</p>
             </section>
 
+            <!-- pagination example -->
+<pre class="code lang-html">
+&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;pagination&quot;</span>&gt;
+    &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;disabled&quot;</span>&gt;
+            Previous
+        &lt;<span class="tag">/a</span>&gt;
+    &lt;<span class="tag">/li</span>&gt;
+    &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item active&quot;</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+            1
+        &lt;<span class="tag">/a</span>&gt;
+    &lt;<span class="tag">/li</span>&gt;
+    &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+            2
+        &lt;<span class="tag">/a</span>&gt;
+    &lt;<span class="tag">/li</span>&gt;
+    &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
+        &lt;<span class="tag">span</span>&gt;...&lt;<span class="tag">/span</span>&gt;
+    &lt;<span class="tag">/li</span>&gt;
+    &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+            12
+        &lt;<span class="tag">/a</span>&gt;
+    &lt;<span class="tag">/li</span>&gt;
+    &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+            Next
+        &lt;<span class="tag">/a</span>&gt;
+    &lt;<span class="tag">/li</span>&gt;
+&lt;<span class="tag">/ul</span>&gt;
+</pre>
+
         </section>
 
         <section id="modals" class="grid-960">