BlazorStrap 使用教程

2026-01-19 10:23:32作者：柯茵沙

项目介绍

BlazorStrap 是一个基于 Bootstrap 4 和 Bootstrap 5 的 Blazor 框架组件库。它提供了丰富的 UI 组件，使得开发者能够快速构建现代化的 Web 应用。BlazorStrap 是完全开源的，遵循 Un-license 许可协议，可以在 GitHub 上找到其源码和相关文档。

项目快速启动

安装 BlazorStrap

通过 NuGet 安装 BlazorStrap 包
```
dotnet add package BlazorStrap
```
修改 _Imports.razor 文件
```
@using BlazorStrap
```

在 _Host.cshtml 或 index.html 中添加样式和脚本

<head>
    <link href="_content/BlazorStrap/blazorstrap.css" rel="stylesheet" />
    <link href="path_to_bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <script src="_content/BlazorStrap/popper.min.js"></script>
</body>

在 Program.cs 或 Startup.cs 中添加服务
```
builder.Services.AddBlazorStrap();
```

示例代码

以下是一个简单的 Blazor 页面示例，展示了如何使用 BlazorStrap 组件：

@page "/example"
@using BlazorStrap

<BSNavbar Color="Color.Primary">
    <BSNavbarBrand href="#">BlazorStrap</BSNavbarBrand>
</BSNavbar>

<BSContainer>
    <BSRow>
        <BSCol>
            <h1>欢迎使用 BlazorStrap</h1>
            <BSButton Color="Color.Primary">点击我</BSButton>
        </BSCol>
    </BSRow>
</BSContainer>

应用案例和最佳实践

应用案例

BlazorStrap 可以用于构建各种类型的 Web 应用，包括企业内部管理系统、电子商务平台、博客系统等。以下是一个简单的企业内部管理系统的页面布局示例：

@page "/dashboard"
@using BlazorStrap

<BSNavbar Color="Color.Primary">
    <BSNavbarBrand href="#">企业管理系统</BSNavbarBrand>
</BSNavbar>

<BSContainer>
    <BSRow>
        <BSCol Size="Size.Is3">
            <BSListGroup>
                <BSListGroupItem Href="/dashboard">仪表盘</BSListGroupItem>
                <BSListGroupItem Href="/users">用户管理</BSListGroupItem>
                <BSListGroupItem Href="/settings">系统设置</BSListGroupItem>
            </BSListGroup>
        </BSCol>
        <BSCol Size="Size.Is9">
            <h1>仪表盘</h1>
            <BSRow>
                <BSCol>
                    <BSCard>
                        <BSCardBody>
                            <h5>用户统计</h5>
                            <p>当前用户数：1000</p>
                        </BSCardBody>
                    </BSCard>
                </BSCol>
                <BSCol>
                    <BSCard>
                        <BSCardBody>
                            <h5>系统状态</h5>
                            <p>系统运行正常</p>
                        </BSCardBody>
                    </BSCard>
                </BSCol>
            </BSRow>
        </BSCol>
    </BSRow>
</BSContainer>