Blazorise 是支持多样式系统的 Blazor UI 框架,需按项目类型(Server/WASM)匹配 .NET 8、安装对应 Provider 包(如 Blazorise.Bootstrap5)、注册服务、引入 CSS/JS 资源并配置 _Imports.razor,缺一不可。

Blazorise 是一个为 Blazor 应用提供现代化、响应式 UI 组件的开源框架,支持 Bootstrap、Tailwind CSS、Bulma 等多种前端样式系统。集成它不难,但配置细节容易出错,尤其在 .NET 8+ 和 WebAssembly(WASM)场景下。
确认项目类型和目标框架
Blazorise 支持 Server 和 WebAssembly 两种托管模型,但不同版本对 .NET 版本有要求。目前稳定版(v1.7.x)推荐搭配 .NET 8,且需确保 SDK 已安装完整。若用 WASM,注意部分组件(如文件上传、本地存储)需额外处理跨域或权限配置。
- Server 模式:直接引用服务端渲染,无需额外 JS 互操作配置
- WASM 模式:需在 Program.cs 中注册客户端服务,并确保 index.html 正确加载 CSS/JS 资源
- 避免混用旧版 Blazorise(如 v0.x)与 .NET 8,会因生命周期或依赖注入变更导致启动失败
安装 NuGet 包并选择主题引擎
Blazorise 本身是核心库,UI 样式由对应“提供程序”(Provider)实现。比如用 Bootstrap 就装 Blazorise.Bootstrap5,用 Tailwind 就装 Blazorise.Tailwind。别只装 Blazorise 主包——它没样式,运行时会报组件未注册错误。
- 以 Bootstrap 5 为例,在项目中执行:dotnet add package Blazorise.Bootstrap5
- 同时安装配套样式包:dotnet add package Blazorise.Icons.FontAwesome(图标支持)
- 若用 Tailwind,还需在 tailwind.config.js 中添加 Blazorise 所需的类名白名单(如
bg-primary、text-danger),否则构建后样式丢失
配置 Program.cs 和 _Imports.razor
这是最容易漏掉的两步。Server 和 WASM 的注册方式略有差异,但都必须显式调用 AddBlazorise() 并指定 Provider。
- 在 Program.cs 中(Server):
.AddBootstrap5Providers()
.AddFontAwesomeIcons();
- 在 Program.cs 中(WASM):
.AddBootstrap5Providers()
.AddFontAwesomeIcons();
var host = builder.Build();
host.Services.UseBootstrap5(); // 注意这行必须调用
host.Services.UseFontAwesomeIcons();
- 在 _Imports.razor 添加命名空间:
@using Blazorise.Components
@using Blazorise.Bootstrap5
引入 CSS 和 JS 资源
样式和脚本不加载,组件就只是“看不见的 HTML”。路径和顺序很重要。
- Server:在 Pages/_Host.cshtml 的
中按顺序加:
- WASM:在 wwwroot/index.html 的
中加相同链接;JS 文件(如 bootstrap.bundle.js)通常由 Provider 自动注入,但若自定义了 CDN 或本地路径,需手动加在底部 - 检查浏览器开发者工具的 Network 面板,确认这些资源返回 200,而非 404 —— 常见原因是包版本不匹配导致资源路径变化
基本上就这些。配完跑个 测试一下,能显示带样式的按钮,说明集成成功。后续按需启用表单验证、数据表格或主题切换,都是在此基础上扩展。










