diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Navs.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Navs.cshtml index d351878652..47e1715932 100644 --- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Navs.cshtml +++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Navs.cshtml @@ -14,14 +14,14 @@

Based on Bootstrap Navs.

-

# Navs Examples

+

Base nav

- Active + Active Longer nav link @@ -33,29 +33,51 @@ disabled -
- 
-        <abp-nav nav-style="Pill" align="Center">
-            <abp-nav-item>
-                <a abp-nav-link Active="true" href="#">Active</a>
-            </abp-nav-item>
-            <abp-nav-item >
-                <a abp-nav-link  href="#">Longer nav link</a>
-            </abp-nav-item>
-            <abp-nav-item >
-                <a abp-nav-link  href="#">link</a>
-            </abp-nav-item>
-            <abp-nav-item >
-                <a abp-nav-link disabled="true" href="#">disabled</a>
-            </abp-nav-item>
-        </abp-nav>
-
+ + + 

+
+<abp-nav nav-style="Pill" align="Center">
+    <abp-nav-item>
+<a abp-nav-link active="true" href="#">Active</a>
+    </abp-nav-item>
+    <abp-nav-item>
+<a abp-nav-link href="#">Longer nav link</a>
+    </abp-nav-item>
+    <abp-nav-item>
+<a abp-nav-link href="#">link</a>
+    </abp-nav-item>
+    <abp-nav-item>
+<a abp-nav-link disabled="true" href="#">disabled</a>
+    </abp-nav-item>
+</abp-nav>
+
+ + + 

+<ul class="nav justify-content-center nav-pills">
+   <li class="nav-item">
+       <a href="#" class="nav-link active">Active</a>
+   </li>
+   <li class="nav-item">
+       <a href="#" class="nav-link">Longer nav link</a>
+   </li>
+   <li class="nav-item">
+       <a href="#" class="nav-link">link</a>
+   </li>
+   <li class="nav-item">
+       <a href="#" class="nav-link disabled">disabled</a>
+   </li>
+</ul>
+
+ +
-

# Navs Examples

+

Base nav

@@ -92,42 +114,85 @@ -
- 
-        <abp-nav-bar size="Lg" navbar-style="Dark_Warning">
-            <a abp-navbar-brand href="#">Navbar</a>
-            <abp-navbar-toggle>
-                <abp-navbar-nav>
-                    <abp-nav-item active="true">
-                        <a abp-nav-link href="#">Home <span class="sr-only">(current)</span></a>
-                    </abp-nav-item>
-                    <abp-nav-item>
-                        <a abp-nav-link href="#">Link</a>
-                    </abp-nav-item>
-                    <abp-nav-item dropdown="true">
-                        <abp-dropdown>
-                            <abp-dropdown-button nav-link="true" text="Dropdown" />
-                            <abp-dropdown-menu>
-                                <abp-dropdown-header>Dropdown header</abp-dropdown-header>
-                                <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item>
-                                <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item>
-                                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
-                                <abp-dropdown-divider />
-                                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
-                            </abp-dropdown-menu>
-                        </abp-dropdown>
-                    </abp-nav-item>
-                    <abp-nav-item>
-                        <a abp-nav-link disabled="true" href="#">Disabled</a>
-                    </abp-nav-item>
-                </abp-navbar-nav>            
-            <span abp-navbar-text>
+        
+            
+                

+
+<abp-nav-bar size="Lg" navbar-style="Dark_Warning">
+    <a abp-navbar-brand href="#">Navbar</a>
+    <abp-navbar-toggle>
+        <abp-navbar-nav>
+            <abp-nav-item active="true">
+                <a abp-nav-link href="#">Home <span class="sr-only">(current)</span></a>
+            </abp-nav-item>
+            <abp-nav-item>
+                <a abp-nav-link href="#">Link</a>
+            </abp-nav-item>
+            <abp-nav-item dropdown="true">
+                <abp-dropdown>
+                    <abp-dropdown-button nav-link="true" text="Dropdown" />
+                    <abp-dropdown-menu>
+                        <abp-dropdown-header>Dropdown header</abp-dropdown-header>
+                        <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item>
+                        <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item>
+                        <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                        <abp-dropdown-divider />
+                        <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
+                    </abp-dropdown-menu>
+                </abp-dropdown>
+            </abp-nav-item>
+            <abp-nav-item>
+                <a abp-nav-link disabled="true" href="#">Disabled</a>
+            </abp-nav-item>
+        </abp-navbar-nav>            
+        <span abp-navbar-text>
+          Sample Text
+        </span>
+    </abp-navbar-toggle>
+</abp-nav-bar>
+

+            
+            
+                

+<nav class="navbar navbar-expand-lg navbar-dark bg-warning">
+    <a href="#" class="navbar-brand">Navbar</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#13da550319ec478099dd4c9c3efb3d09" aria-controls="13da550319ec478099dd4c9c3efb3d09" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+    </button><div class="collapse navbar-collapse" id="13da550319ec478099dd4c9c3efb3d09">
+        <ul class="navbar-nav">
+            <li active="true" class="nav-item">
+                <a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+                <a href="#" class="nav-link">Link</a>
+            </li>
+            <li class="nav-item dropdown">
+                <div class="btn-group">
+                    <a class="dropdown-toggle btn nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-busy-text="Processing..." roles="button" href="#"><span>Dropdown</span></a>
+                    <div></div>
+                    <div class="dropdown-menu">
+                        <h6 class="dropdown-header">Dropdown header</h6>
+                        <a href="#" class="dropdown-item active">Action</a>
+                        <a href="#" class="dropdown-item disabled">Another disabled action</a>
+                        <a href="#" class="dropdown-item">Something else here</a>
+                        <div class="dropdown-divider"></div>
+                        <a href="#" class="dropdown-item">Separated link</a>
+                    </div>
+                </div>
+            </li>
+            <li class="nav-item">
+                <a href="#" class="nav-link disabled">Disabled</a>
+            </li>
+            <span class="navbar-text">
                  Sample Text
             </span>
-            </abp-navbar-toggle>
-        </abp-nav-bar>
-

+        </ul>
+    </div>
+</nav>
+
+ +