Bootstrap Blazor组件库

Bootstrap Blazor组件库可以帮助用户配置UI界面，您可以在软件添加树形组件、菜单组件、标签组件、表格组件、布局组件、组件、上传组件、开关组件，使用组件就可以快速完成界面功能设计，不需要自己重头设计页面样式和按钮样式，直接通过这款软件提供的组件就可以立即设计新的用户界面，结合软件提供的图表组件就可以添加数据分析功能，将你分析的数据显示在图表上，提供常用的多种图表组件，支持度数据对比，提供全功能表格组件，具备增删改查搜、分页、排序所有功能，提供超强时间线功能，可以自定义节点显示任意组件!



相关推荐	软件介绍	下载地址
Bootstrap Blazor组件库官方版v5.0.13	BsapBlaz组件库可以帮助用户配置UI界面，您可以在软件添加树形组件、菜单组件、标签组件、表格组件、布局组件、组件、上传组件、开关组件，使用组件就可以快速完成界面功能设计，不需要自己重头设计页面样式和按钮样式，直接通过这款软件提供的组件就可以立…	点击查看
Vimv8.2	Vim是一款针对WidwsPC而开发的高度可配置文本编辑器，旨在实现高效的文本编辑，它是大多数UNIX系统上分发的vi编辑器的改进版本;该程序通常称为程序员编辑器，对编程非常有用，以至于许多人将其视为整个IDE;但是，这不仅适用于程序员，VimfPC非常适合进行各种…	点击查看
CatfishBlog官方版v4.2.6	Cafish(鲶鱼)Blg是一款开源免费的博客系统，其衍生于优秀的内容管理系统Cafish(鲶鱼)S，CafishS和CafishBlg是两套不同的系统，后者专注于个人博客系统，全站自适应设计，适用于pc，手机等不同大小屏幕的终端显示，支持手机、微信等小屏幕访问!CafishBlg…	点击查看

Bootstrap Blazor组件库软件功能

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：

1、使用 C# 代替 JavaScpt 来创建丰富的交互式 UI。

2、共享使用 .NET 编写的端和客户端应用逻辑。

3、将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。

使用 .NET 进行客户端 Web 开发可提供以下优势：

1、使用 C# 代替 JavaScpt 来编写代码。

2、利用现有的 .NET 库生态系统。

3、在和客户端之间共享应用逻辑。

4、受益于 .NET 的能、可和安全。

5、始终高效支持 Windows、Linux 和 macOS 上的 Visual Studio。

6、以一组稳定、功能丰富且易用的通用语言、框架和工具为基来进行生成。

Bootstrap Blazor组件库软件特色

Bootstrap 风格的 Blazor UI 组件库

基于 Bootstrap 样式库精心打造，并且额外增加了 70 多种常用的组件，为您快速开发项目带来非一般的感觉

50+ 组件

本套组件库包含超过 50 多个组件，从简单的按钮到复杂的整页面级别的组件

能

每个控件都经过微调，优化父子组件之间刷新逻辑，避免多次循环更新

简单易用

轻松掌握组件使用方法，快速将 BootstrapBlazor 控件融入到项目中

免费开源

简单、直接、免费使用、无依赖组件，依赖 jQuery Bootstrap 均已内置

演示与示例

详细文档与在线演示，功能设置简单，直接拷贝代码开箱即用

持续更新

码云平台托管开源，永不闭源，持续更新，及时响应问题与反馈

Bootstrap Blazor组件库教程

项目模板(Pject Template)

Bootstrap Blazor App 模板

为了方便大家利用这套组件快速搭建项目，作者制作了 项目模板(Pject Templates)，使用 dotnet new 命令行模式，使用步骤如下：

1. 安装项目模板

dotnet new -i Bootstrap.Blazor.Templates::1.0.13

2. 创建工程

dotnet new bbapp

创建工程后在当前文件夹内会生成 BootstrapBlazorApp 解决方案，src 目录内包含 Server-Side Wasm 两种类型的工程，均可以直接 F5 运行

3. 卸载项目模板

dotnet new -u Bootstrap.Blazor.Templates

Bootstrap Blazor App Extension 扩展插件

为了方便使用 Bootstrap Blazor 组件库，作者制作了 项目模板(Bootstrap Blazor Pject Template) 扩展插件，安装此插件可通过 Visual Studio 2019 IDE 新建项目时选择 Bootstrap Blazor 项目模板，解决方案内置 Server-Side 与 wasm 两种类型工程

从dotnet新模板创建一个新项目

Bootstrap Blazor组件库安装模板

1、dotnet new -i Bootstrap.Blazor.Templates::*

2、使用模板创建样板项目

dotnet new bbapp

将Bootstrap Blazor导入现有项目

1、转到应用程序的项目文件夹并安装Nuget包参考

dotnet add package BootstrapBlazor

2、将stylesheet javascpts文件添加到您的主索引文件-Pages/_Host.cshtml (Server)或wwwot/index.html (WebAssembly)

HTML

3、在中打开~/Startup.cs文件并注册Bootstrap Blazor服务：

C#

Visual Studio整合

要Bootstrap Blazor为Blazor应用程序创建新的UI，请使用“创建新项目向导”。该向导将检测到Bootstrap BlazorBlazor的所有已安装版本，并在“版本”组合框中列出这些版本，这使您可以使用所需版本启动项目。您还可以获取最新版本，以确保您是最新的。

1、获取向导

要使用“创建新项目向导”，请安ootstrap BlazorBlazor Visual Studio Extensions的UI。您可以从以下位置获得它：

Visual Studio市场(适用于Windows)

2、启动向导

要启动向导，请使用以下两种方法之一

使用项目菜单：

单击文件>新建>项目。

查找并单击“ C#Blazor应用程序”选项(您可以使用搜索或按Blazor模板进行过滤)。

按照向导。

Toggle开关

提供最普通的开关应用，您可以将这些组件添加到自己的UI

Toast轻量弹窗

提供轻量级 Toast弹窗

示例

保存数据

保存数据成功,4秒后自动关闭

成功

Toast手动关闭

不会自动关闭,需要人工点击关闭按钮

卡片式预览

通过设置 IsCard属开启卡片式照片预览效果

示例

允许上传任意格式文件,文件大小不能超过20MB

堆栈式文件上传进度

通过设置 IsStack ShowPgress属开启堆栈式文件上传进度预览功能,适合大文件上传,文件大于1MB后开始上传速率显示

Bar图

通过设置 ChartType更改图表为bar图

随机数据、添加数据集、移除数据集+添加数据一移除数据

Doughnut图

通过设置 ChartType更改图表为 doughnut图

图表类型很多，用户在部署组件的时候就可以通过这款软件加载喜欢的界面样式

支持的浏览器

EditorForm 表单组件

通过绑定数据模型自动呈现编辑表单

EditorForm 组件是一个非常实用的组件，当进行数据编辑时，仅需要将 Model 属赋值即可。

绑定模型默认自动生成全部属，可以通过设置 AutoGenerateAllItem 更改为不自动生成

如不需要编辑列，设置 Editable 即可，默认值为 true 生成编辑组件

复杂编辑列，设置 EditTemplate 模板，进行自定义组件进行编辑

表单内按钮可以设置多个，设置 Buttons 模板即可

基用法

通过绑定 TModel 数据模型，自动生成模型各个字段的可编辑表单

示例

直接绑定模型 Model，设置 爱好 字段不显示

小技巧

自动绑定列如果是使用 input 呈现，绑定模型 Model 可使用 PlaceHolderAttbute 标签进行设置

开启数据验证

通过嵌套 ValidateForm 组件实现数据合规功能

示例

组件内置到 ValidateForm 内开启数据合规功能，爱好 字段使用 EditTemplate 模板自定义组件呈现数据

通过设置 Readonly 属，使 生 字段为只读

默认不自动生成

通过设置属 AutoGenerateAllItem 值为 false，禁止自动生成属，通过设置 FieldItems 内部来控制显示属

示例

表单示例本例中通过设置 AutoGenerateAllItem 值为 false，关闭自动生成功能，通过手动增加两个 EditorItem 编辑项来呈现表单编辑

表单组件内的组件绑定与模型无关的字段

通过设置属 AutoGenerateAllItem 值为 false，禁止自动生成属，通过设置 FieldItems 内部来控制显示属

示例

表单示例在某些情况下表单中有些列的值可能是二级分类等等，需要知道一级分类的，这个时候一级分类需要额外的组件来呈现，如果 Select，而这个组件是与当前上下文绑定模型 Model 无关的，这种需求中通过设置 SkipValidate 值为 true，关闭此组件的模型验证功能即可，本例中 Select 组件绑定了与模型无关的 DummyId 私有字段

Attbutes 属

EditorItem 属

ValidateForm 表单组件

可供数据合规的表单组件

基用法

放置到 ValidateForm 中的组件提交时自动进行数据合规

示例

组件说明：

表单事件为 OnSubmit OnValidSubmit OnInvalidSubmit当使用 OnSubmit 时其他两种不可以同时使用

本例中使用了 OnSubmit 回调委托无论客户端验证是否通过均显示结果

Model 参数为必填项不允许为空

表单内可以放置多个按钮，通过设置 ButtonType=”ButtonType.Submit” 参数是否提交表单

客户端验证机制支持模型的 Required 标签，通过设置 ErrMessage 参数设置提示，未设置时使用默认的英文提示

注意事项：

表单内组件通常用法都是使用双向绑定技术对 Model 的属值进行双向绑定，当其值改变时会导致所在组件 StateHasChanged 方法被调用，即其所在组件或者页面进行刷新重新渲染

表单示例数据合规默认查找绑定模型字段的验证标签如 Required 本例中未设置 ErrMessage 所以提示消息为默认的英文

内置组件

放置支持表单组件到 ValidateForm 中

示例

支持表单验证的组件示例示例说明

姓名为字符串类型

年龄为整数类型

生为时间类型

教育为枚举类型

爱好为类型

Attbutes 属

方法 Methods