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