Blazor 使用 Blazorise 组件库教程
作者:WarmHope
时间:2025-12-15
浏览:0
<p>Blazor使用Blazorise组件库需三步:安装NuGet包(如Blazorise.Bootstrap5)、在Program.cs注册服务并配置样式链接顺序、在.razor文件中用C#语法调用组件(如<Button>),全程无需手写JS或CSS。</p>
Blazor 使用 Blazorise 组件库需三步:安装 NuGet 包(如 Blazorise.Bootstrap5)、在 Program.cs 注册服务并配置样式链接顺序、在 .razor 文件中用 C# 语法调用组件(如

Blazor 使用 Blazorise 组件库,核心就三步:装包、配样式与服务、写组件。它不强制绑定某套 CSS 框架,但你得选一个(比如 Bootstrap 5 或 Tailwind),然后按对应方式接入。整个过程用 C# 主导,基本不用碰 JavaScript 或手写 CSS。
安装 NuGet 包并选好 CSS 框架
Blazorise 支持多个前端样式体系,常见选择有 Bootstrap 5、Tailwind、Ant Design 等。以最常用的 Bootstrap 5 为例:
- 运行命令安装主库和 Bootstrap 适配器:
dotnet add package Blazorise.Bootstrap5 - 再加图标支持(可选但推荐):
dotnet add package Blazorise.Icons.FontAwesome - 如果你用的是 WebAssembly 项目,记得在
wwwroot/index.html的里引入 Bootstrap 和 Blazorise 样式链接 - 如果是 Server 项目,则加到
Pages/_Host.cshtml的中
注册服务和配置提供者
在 Program.cs(.NET 6+)中完成服务注册:
- 引用命名空间:
using Blazorise;和using Blazorise.Bootstrap5; - 调用扩展方法:
builder.Services.AddBlazorise().AddBootstrap5Providers(); - 确保已启用静态文件中间件:
app.UseStaticFiles();(尤其 WebAssembly 项目不能漏)
在页面中使用组件
Blazorise 组件名首字母大写(如 ),区别于原生 HTML 标签()。用法接近标准 Razor 语法:
- 在 .razor 文件顶部加
@using Blazorise(或统一写进_Imports.razor) - 直接写组件,比如:
- 表单类组件支持双向绑定,例如:
- 富文本编辑器等高级组件需额外引入命名空间,如
@using Blazorise.RichTextEdit
注意几个易错点
实际跑起来时,这几个细节最容易卡住:
- CSS 链接顺序不能错:Bootstrap 样式必须在 Blazorise 样式之前加载
- JS 资源默认按需加载,但首次使用某些组件(如 Modal、DatePicker)可能报 JS 未初始化,检查是否漏了
app.UseStaticFiles() - 单元测试要用 bUnit 时,得手动替换
IComponentActivator实现,否则组件无法渲染 - 如果只用 Blazorise 的工具类(比如侧边栏逻辑),而不用 UI 组件,可以注册空提供者:
services.AddEmptyProviders()
基本上就这些。配通一次后,后续新增页面几乎就是纯 C# + Razor 的体验,连 CSS 类名都不用记。
作者最新文章
Photoshop图层阵列怎么做?复制多个图层并整齐排列
2026-09-22 16:42
3dmax动画技巧总结:动画制作步骤与渲染视频教程
2026-09-22 14:47
思源笔记
2026-09-16 17:42
在线PDF转TXT操作步骤与乱码排查指南
2026-09-04 13:02
PDF加水印后如何检查显示效果?在线工具操作步骤与避坑指南
2026-09-03 13:02
上一篇:
龙江人社电子社保卡申领教程
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多


































