客户端渲染模式

组件引用

组件引用有多种方法,可以参阅 类库安装

.NET CLI
dotnet add package BootstrapBlazor --version 5.0.12-beta14

CSS 文件

将 Bootstrap 的 CSS 文件以 <link> 标签的形式添加到 wwwroot/index.html 文件 <head> 标签中,并放置在所有其它样式表之前。

JS 文件

Bootstrap 所提供的许多组件都依赖 JavaScript 才能运行。具体来说,这些组件都依赖 jQuery、Popper.js 以及我们自己的 JavaScript 插件。将以下 <script> 标签放到 wwwroot/index.html 文件尾部且在 </body> 标签之前即可起作用。

添加命名空间到 _Imports.razor 文件

@using BootstrapBlazor.Components

注册服务

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");
        builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

        // 添加本行代码
        builder.Services.AddBootstrapBlazor();

        await builder.Build().RunAsync();
    }
}

使用组件

razor组件中引用 BootstrapBlazor 组件

<Button Color="Color.Primary">主要按钮</Button>
An error has occurred. This application may no longer respond until reloaded. Reload