服务器端渲染模式

组件引用

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

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

CSS 文件

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

<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">

JS 文件

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

<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>

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

@using BootstrapBlazor.Components

注册服务

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();

    // 添加本行代码
    services.AddBootstrapBlazor(); 
}

使用组件

razor组件中引用 BootstrapBlazor 组件

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