BootStrapBlazor 安装教程--Server模式
使用模板使用模板是最简单的办法。因为项目模板里已经包含了BootStrapBlazor的所有需要配置的内容。首先我们安装项目模板：dotnet new -i Bootstrap.Blazor.Templates::6.4.1这里的6.4.1是版本号，截至到目前Templates的版本号为6.4.1。然后创建项目dotnet new bba
分类
BootstrapBlazor
分类 BootstrapBlazor 下的文章列表
Blazor 组件库 BootstrapBlazor 中CheckboxList组件介绍
组件介绍CheckboxList 多选框组控件用于创建多选的复选框组.他的样子是这样的：代码也很简单，绑定一个List就行了。<CheckboxList @bind-Value="@Value1" Items="@Items1" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Nam
Blazor 组件库 BootstrapBlazor 中AutoFill组件介绍
组件介绍AutoFill 自动填充组件通过智能感应提示选项，选中后自动填充表单。他的代码如下：<AutoFill TValue="Foo" Value="Model" Items="Items" IsLikeMatch="true" OnSelectedItemChanged="OnSelectedItemChanged" OnGetDi
Blazor 组件库 BootstrapBlazor 中Carousel组件介绍
组件介绍Carousel 走马灯的作用是在有限空间内，循环播放同一类型的图片、文字等内容。代码如下：<Carousel Images="@Images" Width="280"></Carousel>其中Images是一组图片地址。组件的其他属性Images：图片的地址列表。IsFade：是否淡入淡出，默认为false。Width：图片的
Blazor 组件库 BootstrapBlazor 中Button组件介绍
组件介绍按钮组件，应该是最基础的组件之一了。感觉没什么可介绍的，但是BootstrapBlazor的按钮，还是有很多不错的特性。首先是最基础的，boostrap5的按钮样式：代码如下： <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonC
Blazor 组件库 BootstrapBlazor 中EditorForm组件介绍
组件介绍EditorForm 组件是一个非常实用的组件，当进行数据编辑时，仅需要将 Model 属性赋值即可。绑定模型默认自动生成全部属性，可以通过设置 AutoGenerateAllItem 更改为不自动生成如不需要编辑列，设置 Editable 即可，默认值为 true 生成编辑组件复杂编辑列，设置 EditTemplate 模板，进
Blazor 组件库 BootstrapBlazor 中Circle组件介绍
组件介绍Circle进度环组件，是一个图表类组件。一般有两种用途：显示某项任务进度的百分比。统计某些指标的占比。它的样子如下：它的代码如下：<Circle Width="250" Value="75" Color="Color.Success" StrokeWidth="10" ShowProgress="false"> <div
Blazor 组件库 BootstrapBlazor 中Row组件介绍
组件介绍在Bootstrap中，我们经常使用row和col通过栅格化来控制显示位置。如<div class="row"> <div class="col-12"></div> </div>会显示一个充满行的div。但是我们需要编写很多代码，比如大量重复的div标签。还有col的class。为了减少代码的数量，BootstrapBl
Blazor 组件库 BootstrapBlazor 中Markdown组件介绍
组件介绍Markdown组件是tui.editor的封装，所以所有内容均基于tui.editor。默认状态下样子如下所示：其代码如下：<Markdown Language="@Language" @bind-Value="@MarkdownString" @bind-Html="@HtmlString" />我们有两个内容可以绑定，一个是
Blazor 组件库 BootstrapBlazor 中Modal组件介绍
组件说明Model组件是一个模态框组件，可以弹出一个对话框，适合需要定制性更大的场景。它的样子如下：其html代码为:<div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">弹窗标题</h5> <b