diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml
index bcf117945c..b7a567beae 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml
@@ -10,34 +10,99 @@
     </abp-style-bundle>
 }
 
-<h2>Paginator</h2>
+@section scripts {
+    <abp-script-bundle>
+        @*<abp-script src="/libs/highlight.js/lib/highlight.js" />
+            <abp-script src="/Pages/Components/highlightCode.js" />*@
+    </abp-script-bundle>
+}
 
-<h4># Paginator Examples</h4>
+<link rel="stylesheet"
+      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
+<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
+<script>hljs.initHighlightingOnLoad();</script>
 
-<div class="demo-with-code">
-    <div class="demo-area">
 
-        <abp-paginator model="@Model.PagerModel" />
+<h2>Paginator</h2>
+
+
+<h4>Example</h4>
 
-    </div>
-    <div class="code-area">
-        <pre>
-&lt;abp-paginator model=&quot;Model.PagerModel&quot;/&gt;
-</pre>
-    </div>
-</div>
-<br>
-<br>
-<br>
 <div class="demo-with-code">
     <div class="demo-area">
-
         <abp-paginator model="@Model.PagerModel" show-info="true" />
-
     </div>
     <div class="code-area">
-        <pre>
-&lt;abp-paginator model=&quot;Model.PagerModel&quot; show-info=&quot;true&quot;/&gt;
-</pre>
+        <abp-tabs>
+            <abp-tab title="Modal Class">
+                <pre><code>
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Pagination;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
+{
+    public class PaginatorModel : PageModel
+    {
+        public PagerModel PagerModel { get; set; }
+
+        public void OnGet(int currentPage, string sort)
+        {
+            PagerModel = new PagerModel(100, 10, currentPage, 10, "Paginator", sort);
+        }
+    }
+}
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-paginator model=&quot;Model.PagerModel&quot; show-info=&quot;true&quot; /&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;div class=&quot;row mt-3&quot;&gt;    
+    &lt;div class=&quot;col-sm-12 col-md-5&quot;&gt;
+        Showing 80 to 90 of 100 entries.
+    &lt;/div&gt;
+    &lt;div class=&quot;col-sm-12 col-md-7&quot;&gt;
+        &lt;nav aria-label=&quot;Page navigation&quot;&gt;
+            &lt;ul class=&quot;pagination justify-localizationKey-end&quot;&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=7&quot;&gt;Previous&lt;/a&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=1&quot;&gt;1&lt;/a&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=2&quot;&gt;2&lt;/a&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;span class=&quot;page-link gap&quot;&gt;&mldr;&lt;/span&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=7&quot;&gt;7&lt;/a&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item active&quot;&gt;
+                     &lt;span class=&quot;page-link&quot;&gt;
+                        8
+                        &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;
+                     &lt;/span&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=9&quot;&gt;9&lt;/a&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=10&quot;&gt;10&lt;/a&gt;
+                &lt;/li&gt;
+                &lt;li class=&quot;page-item &quot;&gt;
+                    &lt;a tabindex=&quot;-1&quot; class=&quot;page-link&quot; href=&quot;/Components/Paginator?currentPage=9&quot;&gt;Next&lt;/a&gt;
+                &lt;/li&gt;
+            &lt;/ul&gt;
+         &lt;!-- nav--&gt;
+    &lt;/nav&gt;&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml.cs b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml.cs
index 40afff2016..15b31db6da 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml.cs
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml.cs
@@ -1,9 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Mvc;
-using Microsoft.AspNetCore.Mvc.RazorPages;
+using Microsoft.AspNetCore.Mvc.RazorPages;
 using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Pagination;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components