客户端渲染模式
组件引用
组件引用有多种方法,可以参阅 类库安装
.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>