Merge branch 'master' of https://github.com/aspnetzero/abp

9 years ago · c9c0ddd019
22 changed files with 669 additions and 4 deletions
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelper.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelper.cs
@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
+{
+    public class AbpColBreakTagHelper : AbpTagHelper<AbpColBreakTagHelper, AbpColBreakTagHelperService>
+    {
+        public AbpColBreakTagHelper(AbpColBreakTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelperService.cs
@ -0,0 +1,18 @@
+using System;
+using System.Text;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
+{
+    public class AbpColBreakTagHelperService : AbpTagHelperService<AbpColBreakTagHelper>
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "div";
+            output.Attributes.AddClass("w-100");
+            output.TagMode = TagMode.StartTagAndEndTag;
+        }
+
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs
@ -0,0 +1,40 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
+{
+    public class AbpColumnTagHelper : AbpTagHelper<AbpColumnTagHelper, AbpColumnTagHelperService>
+    {
+       // public string Size { get; set; }
+
+        public ColumnSize Size { get; set; }
+
+        public ColumnSize SizeSm { get; set; }
+
+        public ColumnSize SizeMd { get; set; }
+
+        public ColumnSize SizeLg { get; set; }
+
+        public ColumnSize SizeXl { get; set; }
+
+        public ColumnSize Offset { get; set; }
+
+        public ColumnSize OffsetSm { get; set; }
+
+        public ColumnSize OffsetMd { get; set; }
+
+        public ColumnSize OffsetLg { get; set; }
+
+        public ColumnSize OffsetXl { get; set; }
+
+        [HtmlAttributeName("order")]
+        public ColumnOrder ColumnOrder { get; set; }
+
+        public VerticalAlign VAlign { get; set; } = VerticalAlign.Default;
+
+        public AbpColumnTagHelper(AbpColumnTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs
@ -0,0 +1,108 @@
+using System;
+using System.Text;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
+{
+    public class AbpColumnTagHelperService : AbpTagHelperService<AbpColumnTagHelper>
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "div";
+            output.Attributes.AddClass("col");
+
+            ProcessSizeClass(output, TagHelper.Size, "");
+            ProcessSizeClass(output, TagHelper.SizeSm, "-sm");
+            ProcessSizeClass(output, TagHelper.SizeMd, "-md");
+            ProcessSizeClass(output, TagHelper.SizeLg, "-lg");
+            ProcessSizeClass(output, TagHelper.SizeXl, "-xl");
+
+            ProcessOffsetClass(output, TagHelper.Offset, "");
+            ProcessOffsetClass(output, TagHelper.OffsetSm, "-sm");
+            ProcessOffsetClass(output, TagHelper.OffsetMd, "-md");
+            ProcessOffsetClass(output, TagHelper.OffsetLg, "-lg");
+            ProcessOffsetClass(output, TagHelper.OffsetXl, "-xl");
+
+            ProcessColumnOrder(output);
+            ProcessVerticalAlign(output);
+        }
+
+        protected virtual void ProcessSizeClass(TagHelperOutput output, ColumnSize size, string breakpoint)
+        {
+            if (size == ColumnSize.Undefined)
+            {
+                return;
+            }
+
+            var classString = "col" + breakpoint;
+
+            if (size == ColumnSize.Auto)
+            {
+                classString += "-auto";
+            }
+            else if (size != ColumnSize._)
+            {
+                classString += "-" + size.ToString("D");
+            }
+
+            output.Attributes.AddClass(classString);
+        }
+
+        protected virtual void ProcessOffsetClass(TagHelperOutput output, ColumnSize size, string breakpoint)
+        {
+            if (size == ColumnSize.Undefined)
+            {
+                return;
+            }
+
+            var classString = "offset" + breakpoint;
+
+            if (size == ColumnSize._)
+            {
+                classString += "-0";
+            }
+            else
+            {
+                classString += "-" + size.ToString("D");
+            }
+
+            output.Attributes.AddClass(classString);
+        }
+
+        protected virtual void ProcessVerticalAlign(TagHelperOutput output)
+        {
+            if (TagHelper.VAlign == VerticalAlign.Default)
+            {
+                return;
+            }
+
+            output.Attributes.AddClass("align-self-" + TagHelper.VAlign.ToString().ToLowerInvariant());
+        }
+
+        protected virtual void ProcessColumnOrder(TagHelperOutput output)
+        {
+            if (TagHelper.ColumnOrder == ColumnOrder.Undefined)
+            {
+                return;
+            }
+
+            var classString = "order-";
+
+            if (TagHelper.ColumnOrder == ColumnOrder.First)
+            {
+                classString += "first";
+            }
+            else if (TagHelper.ColumnOrder == ColumnOrder.Last)
+            {
+                classString += "last";
+            }
+            else 
+            {
+                classString += TagHelper.ColumnOrder.ToString("D");
+            }
+
+            output.Attributes.AddClass(classString);
+        }
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpContainerTagHelper.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpContainerTagHelper.cs
@ -0,0 +1,11 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
+{
+    public class AbpContainerTagHelper : AbpTagHelper<AbpContainerTagHelper, AbpContainerTagHelperService>
+    {
+        public AbpContainerTagHelper(AbpContainerTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpContainerTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpContainerTagHelperService.cs
@ -0,0 +1,16 @@
+using System.Text;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
+{
+    public class AbpContainerTagHelperService : AbpTagHelperService<AbpContainerTagHelper>
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "div";
+            output.Attributes.AddClass("container");
+        }
+        
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelper.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelper.cs
@ -0,0 +1,15 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
+{
+    public class AbpRowTagHelper : AbpTagHelper<AbpRowTagHelper, AbpRowTagHelperService>
+    {
+        public VerticalAlign VAlign { get; set; } = VerticalAlign.Default;
+
+        public HorizontalAlign HAlign { get; set; } = HorizontalAlign.Default;
+
+        public AbpRowTagHelper(AbpRowTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelperService.cs
@ -0,0 +1,40 @@
+using System.ComponentModel;
+using System.Text;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
+{
+    public class AbpRowTagHelperService : AbpTagHelperService<AbpRowTagHelper>
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "div";
+            output.Attributes.AddClass("row");
+
+            ProcessVerticalAlign(output);
+            ProcessHorizontalAlign(output);
+        }
+
+        protected virtual void ProcessVerticalAlign(TagHelperOutput output)
+        {
+            if (TagHelper.VAlign == VerticalAlign.Default)
+            {
+                return;
+            }
+
+            output.Attributes.AddClass("align-items-" + TagHelper.VAlign.ToString().ToLowerInvariant());
+        }
+
+        protected virtual void ProcessHorizontalAlign(TagHelperOutput output)
+        {
+            if (TagHelper.HAlign == HorizontalAlign.Default)
+            {
+                return;
+            }
+
+            output.Attributes.AddClass("justify-content-" + TagHelper.HAlign.ToString().ToLowerInvariant());
+        }
+
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnOrder.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnOrder.cs
@ -0,0 +1,21 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
+{
+    public enum ColumnOrder
+    {
+        Undefined = 0,
+        _1 = 1,
+        _2 = 2,
+        _3 = 3,
+        _4 = 4,
+        _5 = 5,
+        _6 = 6,
+        _7 = 7,
+        _8 = 8,
+        _9 = 9,
+        _10 = 10,
+        _11 = 11,
+        _12 = 12,
+        First = 13,
+        Last = 14
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnSize.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnSize.cs
@ -0,0 +1,21 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
+{
+    public enum ColumnSize
+    {
+        Undefined = 0,
+        _1 = 1,
+        _2 = 2,
+        _3 = 3,
+        _4 = 4,
+        _5 = 5,
+        _6 = 6,
+        _7 = 7,
+        _8 = 8,
+        _9 = 9,
+        _10 = 10,
+        _11 = 11,
+        _12 = 12,
+        Auto = 13,
+        _ = -1
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/HorizontalAlign.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/HorizontalAlign.cs
@ -0,0 +1,12 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
+{
+    public enum HorizontalAlign
+    {
+        Default,
+        Start,
+        Center,
+        Around,
+        Between,
+        End
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/VerticalAlign.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/VerticalAlign.cs
@ -0,0 +1,10 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
+{
+    public enum VerticalAlign
+    {
+        Default,
+        Start,
+        Center,
+        End
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Label/AbpLabelTagHelper.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Label/AbpLabelTagHelper.cs
@ -0,0 +1,11 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Label
+{
+    public class AbpLabelTagHelper : AbpTagHelper<AbpLabelTagHelper, AbpLabelTagHelperService>
+    {
+        public AbpLabelTagHelper(AbpLabelTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Label/AbpLabelTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Label/AbpLabelTagHelperService.cs
@ -0,0 +1,14 @@
+using System.Text;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Label
+{
+    public class AbpLabelTagHelperService : AbpTagHelperService<AbpLabelTagHelper>
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            //TODO: fill
+        }
+        
+    }
+}
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalFooterTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalFooterTagHelperService.cs
@ -22,7 +22,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
            output.Content.SetHtmlContent(CreateContent());
        }

-        private string CreateContent()
+        protected virtual string CreateContent()
        {
            var sb = new StringBuilder();

--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalHeaderTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalHeaderTagHelperService.cs
@ -13,7 +13,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
            output.Content.SetHtmlContent(CreateContent());
        }

-        private string CreateContent()
+        protected virtual string CreateContent()
        {
            var sb = new StringBuilder();

--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs
@ -12,7 +12,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
            output.PostContent.SetHtmlContent(CreatePostContent());
        }

-        private string CreatePreContent()
+        protected virtual string CreatePreContent()
        {
            var sb = new StringBuilder();

@ -23,7 +23,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
            return sb.ToString();
        }

-        private string CreatePostContent()
+        protected virtual string CreatePostContent()
        {
            var sb = new StringBuilder();

--- a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Forms.cshtml
+++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Forms.cshtml
@ -0,0 +1,23 @@
+@page
+@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.FormsModel
+@{
+    ViewData["Title"] = "Forms";
+}
+
+<h2>Forms</h2>
+
+<p>Based on <a href="http://getbootstrap.com/docs/4.1/components/forms/" target="_blank"> Bootstrap form</a>.</p>
+
+<h4># Example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+    </div>
+    <div class="code-area">
+        <pre>
+
+        </pre>
+    </div>
+</div>
+
--- a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Forms.cshtml.cs
+++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Forms.cshtml.cs
@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
+{
+    public class FormsModel : PageModel
+    {
+        public void OnGet()
+        {
+
+        }
+    }
+}
--- a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml
+++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml
@ -0,0 +1,266 @@
+@page
+@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.GridsModel
+@{
+    ViewData["Title"] = "Grids";
+}
+
+<h2>Grids</h2>
+
+<p>Based on <a href="http://getbootstrap.com/docs/4.1/layout/grid/" target="_blank"> Bootstrap grid</a>.</p>
+
+<h4># Example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-container>
+            <abp-row>
+                <abp-column size-sm="_6">One of two columns</abp-column>
+                <abp-column size-sm="_6">One of two columns</abp-column>
+            </abp-row>
+            <abp-row>
+                <abp-column size-sm="_4">One of three columns</abp-column>
+                <abp-column size-sm="_4">One of three columns</abp-column>
+                <abp-column size-sm="_4">One of three columns</abp-column>
+            </abp-row>
+        </abp-container>
+    </div>
+    <div class="code-area">
+        <pre>
+&lt;abp-container&gt;
+     &lt;abp-row&gt;
+         &lt;abp-column size-sm=&quot;C6&quot;&gt;One of two columns&lt;/abp-column&gt;
+         &lt;abp-column size-sm=&quot;C6&quot;&gt;One of two columns&lt;/abp-column&gt;
+     &lt;/abp-row&gt;
+     &lt;abp-row&gt;
+         &lt;abp-column size-sm=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
+         &lt;abp-column size-sm=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
+         &lt;abp-column size-sm=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
+     &lt;/abp-row&gt;
+&lt;/abp-container&gt;
+</pre>
+    </div>
+</div>
+
+<h4># Break Column Example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-container>
+            <abp-row>
+                <abp-column>One of three columns</abp-column>
+                <abp-column>One of three columns</abp-column>
+                <abp-col-break /> @* TODO: abp-column-break *@
+                <abp-column>One of three columns</abp-column>
+            </abp-row>
+        </abp-container>
+    </div>
+    <div class="code-area">
+        <pre>
+ &lt;abp-container&gt;
+     &lt;abp-row&gt;
+         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
+         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
+         &lt;abp-col-break /&gt; @* TODO: abp-column-break *@
+         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
+     &lt;/abp-row&gt;
+ &lt;/abp-container&gt;
+</pre>
+    </div>
+</div>
+
+<h4># Vertical alignment Example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-container>
+            <abp-row v-align="Start">
+                <abp-column>One of three columns</abp-column>
+                <abp-column>One of three columns</abp-column>
+                <abp-column>One of three columns</abp-column>
+            </abp-row>
+            <abp-row v-align="Center">
+                <abp-column>One of three columns</abp-column>
+                <abp-column>One of three columns</abp-column>
+                <abp-column>One of three columns</abp-column>
+            </abp-row>
+            <abp-row v-align="End">
+                <abp-column>One of three columns</abp-column>
+                <abp-column>One of three columns</abp-column>
+                <abp-column>One of three columns</abp-column>
+            </abp-row>
+        </abp-container>
+    </div>
+    <div class="code-area">
+        <pre>
+&lt;abp-container&gt;
+     &lt;abp-row v-align=&quot;Start&quot;&gt;
+        &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
+        &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
+        &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
+     &lt;/abp-row&gt;
+     &lt;abp-row v-align=&quot;Center&quot;&gt;
+         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
+         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
+         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
+     &lt;/abp-row&gt;
+     &lt;abp-row v-align=&quot;End&quot;&gt;
+         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
+         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
+         &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
+     &lt;/abp-row&gt;
+ &lt;/abp-container&gt;
+</pre>
+    </div>
+</div>
+
+<h4># Vertical alignment Example 2</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-container>
+            <abp-row>
+                <abp-column v-align="Start">One of three columns</abp-column>
+                <abp-column v-align="Center">One of three columns</abp-column>
+                <abp-column v-align="End">One of three columns</abp-column>
+            </abp-row>
+        </abp-container>
+    </div>
+    <div class="code-area">
+        <pre>
+ &lt;abp-container&gt;
+    &lt;abp-row&gt;
+        &lt;abp-column v-align=&quot;Start&quot;&gt;One of three columns&lt;/abp-column&gt;
+        &lt;abp-column v-align=&quot;Center&quot;&gt;One of three columns&lt;/abp-column&gt;
+        &lt;abp-column v-align=&quot;End&quot;&gt;One of three columns&lt;/abp-column&gt;
+     &lt;/abp-row&gt;
+ &lt;/abp-container&gt;
+</pre>
+    </div>
+</div>
+
+<h4># Horizontal alignment Example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-container>
+            <abp-row h-align="Start">
+                <abp-column size="_4">One of three columns</abp-column>
+                <abp-column size="_4">One of three columns</abp-column>
+            </abp-row>
+            <abp-row h-align="Center">
+                <abp-column size="_4">One of three columns</abp-column>
+                <abp-column size="_4">One of three columns</abp-column>
+            </abp-row>
+            <abp-row h-align="End">
+                <abp-column size="_4">One of three columns</abp-column>
+                <abp-column size="_4">One of three columns</abp-column>
+            </abp-row>
+            <abp-row h-align="Around">
+                <abp-column size="_4">One of three columns</abp-column>
+                <abp-column size="_4">One of three columns</abp-column>
+            </abp-row>
+            <abp-row h-align="Between">
+                <abp-column size="_4">One of three columns</abp-column>
+                <abp-column size="_4">One of three columns</abp-column>
+            </abp-row>
+        </abp-container>
+    </div>
+    <div class="code-area">
+        <pre>
+ &lt;abp-container&gt;
+    &lt;abp-row h-align=&quot;Start&quot;&gt;
+        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
+        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
+    &lt;/abp-row&gt;
+    &lt;abp-row h-align=&quot;Center&quot;&gt;
+        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
+        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
+    &lt;/abp-row&gt;
+    &lt;abp-row h-align=&quot;End&quot;&gt;
+        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
+        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
+    &lt;/abp-row&gt;
+        &lt;abp-row h-align=&quot;Around&quot;&gt;
+        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
+        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
+    &lt;/abp-row&gt;
+    &lt;abp-row h-align=&quot;Between&quot;&gt;
+        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
+        &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
+    &lt;/abp-row&gt;
+ &lt;/abp-container&gt;
+</pre>
+    </div>
+</div>
+
+<h4># Order Example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-container>
+            <abp-row>
+                <abp-column> First, but unordered</abp-column>
+                <abp-column order="_12">Second, but last</abp-column>
+                <abp-column order="_1">Third, but first</abp-column>
+            </abp-row>
+            <abp-row>
+                <abp-column> First, but unordered</abp-column>
+                <abp-column order="Last">Second, but last</abp-column>
+                <abp-column order="First">Third, but first</abp-column>
+            </abp-row>
+        </abp-container>
+    </div>
+    <div class="code-area">
+        <pre>
+ &lt;abp-container&gt;
+    &lt;abp-row&gt;
+        &lt;abp-column&gt; First, but unordered&lt;/abp-column&gt;
+        &lt;abp-column order=&quot;C12&quot;&gt;Second, but last&lt;/abp-column&gt;
+        &lt;abp-column order=&quot;C1&quot;&gt;Third, but first&lt;/abp-column&gt;
+    &lt;/abp-row&gt;
+    &lt;abp-row&gt;
+        &lt;abp-column&gt; First, but unordered&lt;/abp-column&gt;
+        &lt;abp-column order=&quot;Last&quot;&gt;Second, but last&lt;/abp-column&gt;
+        &lt;abp-column order=&quot;First&quot;&gt;Third, but first&lt;/abp-column&gt;
+    &lt;/abp-row&gt;
+ &lt;/abp-container&gt;
+</pre>
+    </div>
+</div>
+
+<h4># Offset Example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <abp-row>
+            <abp-column> .col-md-4</abp-column>
+            <abp-column size-md="_4" offset-md="_4">.col-md-4 .offset-md-4</abp-column>
+        </abp-row>
+        <abp-row>
+            <abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column>
+            <abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column>
+        </abp-row>
+        <abp-row>
+            <abp-column size-md="_6" offset-md="_3">.col-md-6 .offset-md-3</abp-column>
+        </abp-row>
+    </div>
+    <div class="code-area">
+        <pre>
+ &lt;abp-row&gt;
+    &lt;abp-column&gt; .col-md-4&lt;/abp-column&gt;
+    &lt;abp-column size-md=&quot;C4&quot; offset-md=&quot;C4&quot;&gt;.col-md-4 .offset-md-4&lt;/abp-column&gt;
+ &lt;/abp-row&gt;
+ &lt;abp-row&gt;
+    &lt;abp-column size-md=&quot;C3&quot; offset-md=&quot;C3&quot;&gt;.col-md-3 .offset-md-3&lt;/abp-column&gt;
+    &lt;abp-column size-md=&quot;C3&quot; offset-md=&quot;C3&quot;&gt;.col-md-3 .offset-md-3&lt;/abp-column&gt;
+ &lt;/abp-row&gt;
+ &lt;abp-row&gt;
+    &lt;abp-column size-md=&quot;C6&quot; offset-md=&quot;C3&quot;&gt;.col-md-6 .offset-md-3&lt;/abp-column&gt;
+ &lt;/abp-row&gt;
+</pre>
+    </div>
+</div>
+
+<hr />
+
+<a asp-page="../">&lt; back</a>
--- a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml.cs
+++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml.cs
@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
+{
+    public class GridsModel : PageModel
+    {
+        public void OnGet()
+        {
+
+        }
+    }
+}
--- a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml
+++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml
@ -8,6 +8,8 @@

 <ul>
    <li><a asp-page="Components/Buttons">Buttons</a></li>
+    <li><a asp-page="Components/Grids">Grids</a></li>
    <li><a asp-page="Components/Cards">Cards</a></li>
+    <li><a asp-page="Components/Forms">Forms</a></li>
 </ul>