Blazor 怎么使用 Blazorise 组件库

Blazor 使用 Blazorise 组件库需三步：安装 NuGet 包（如 Blazorise.Bootstrap5）、在 Program.cs 注册服务并配置样式链接顺序、在 .razor 文件中用 C# 语法调用组件（如 ），全程无需手写 JS 或 CSS。

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 组件名首字母大写（如 <button></button>），区别于原生 HTML 标签（<button></button>）。用法接近标准 Razor 语法：

标签： css javascript java html js 前端 bootstrap app 工具 ai win 区别 c#