组件介绍
在Bootstrap中，我们经常使用row和col通过栅格化来控制显示位置。
如
<div class="row">
<div class="col-12"></div>
</div>会显示一个充满行的div。
但是我们需要编写很多代码，比如大量重复的div标签。还有col的class。
为了减少代码的数量，BootstrapBlazor增加了一个Row组件来简化代码的编写。
一个比较全面的例子：
该例子的代码如下：
<p>本例中 <code>Row</code> 组件内置于 <code>ValidateForm</code> 组件内，自动增加前置 <code>Label</code> 标签</p>
<p><b>行显示 4 个</b></p>
<ValidateForm Model="@Model">
<Row ItemsPerRow="ItemsPerRow.Four">
<BootstrapInput @bind-Value="@Model.Name" />
<BootstrapInput @bind-Value="@Model.Address" />
<BootstrapInputNumber @bind-Value="@Model.Count" />
<Select @bind-Value="@Model.Education" />
</Row>
</ValidateForm>
<p class="mt-3"><b>行显示 2 个</b></p>
<ValidateForm Model="@Model">
<Row ItemsPerRow="ItemsPerRow.Two">
<BootstrapInput @bind-Value="@Model.Name" />
<BootstrapInput @bind-Value="@Model.Address" />
</Row>
</ValidateForm>
<p class="mt-3"><b>行显示 4 个 <code>Address</code> 占 2 列</b></p>
<ValidateForm Model="@Model">
<Row ItemsPerRow="ItemsPerRow.Four">
<BootstrapInput @bind-Value="@Model.Name" />
<Row ColSpan="2">
<BootstrapInput @bind-Value="@Model.Address" />
</Row>
<Select @bind-Value="@Model.Education" />
</Row>
</ValidateForm>
<p class="mt-3"><b>行显示 4 个，第二个组件 <code>ColSpan</code> 设置为 3</b></p>
<ValidateForm Model="@Model">
<Row ItemsPerRow="ItemsPerRow.Four">
<BootstrapInput @bind-Value="@Model.Name" />
<Row ColSpan="3">
<BootstrapInput @bind-Value="@Model.Address" />
</Row>
</Row>
</ValidateForm>
<p class="mt-3"><b>行显示 2 个，第一个组件 <code>ColSpan</code> 设置为 3</b></p>
<ValidateForm Model="@Model">
<Row ItemsPerRow="ItemsPerRow.Four">
<Row ColSpan="3">
<CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
</Row>
<BootstrapInput @bind-Value="@Model.Address" />
</Row>
</ValidateForm>
<p class="mt-3"><b>行显示一个组件</b></p>
<ValidateForm Model="@Model">
<Row ItemsPerRow="ItemsPerRow.One">
<BootstrapInput @bind-Value="@Model.Address" />
</Row>
</ValidateForm>组件的其他属性
ItemsPerRow：每行显示几个组件，可选值为One,Two,Three,Four,Six,Twelve，这里只能放置可被12整除的组件数量，如果需要不能被12整除的数据，建议编写原始的div。默认值为One
RowType：排版格式，可选值为Normal, Inline，如果嵌套的子Row没有指定格式，则默认使用父Row的格式。默认值为null
ColSpan：子Row跨父Row的列数。
MaxCount：行内最多显示的组件数。
发表评论