BootStrapBlazor 安装教程--Server模式
使用模板
使用模板是最简单的办法。因为项目模板里已经包含了BootStrapBlazor的所有需要配置的内容。
首先我们安装项目模板:
dotnet new -i Bootstrap.Blazor.Templates::6.4.1
这里的6.4.1是版本号,截至到目前Templates的版本号为6.4.1。
然后创建项目
dotnet new bbapp
这里的bbapp是项目名称,你可以换成自己的项目名。
这样一个新鲜的BB项目就建好了。
在现有模板上增加
安装BootstrapBlazor的库
可以使用NuGet
浏览器,也可以使用命令
dotnet add package BootstrapBlazor --version 6.8.17
来安装。发文时的版本号为6.8.17。
添加样式表文件
.net6
默认的cshtml
已经移动到了~/Pages/_Layout.cshtml
文件,不是.net5
的~/Pages/_Host.cshtml
文件了,这里需要注意。
<head>
...
<!-- 需引用 BootstrapBlazor.FontAwesome 包 !-->
<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">
...
<link href="css/site.css" rel="stylesheet">
<link href="BlazorApp1.styles.css" rel="stylesheet">
</head>
这里注意一下,默认BB使用
FontAwesome
作为图标库,同时BB也做了集成,但是集成在了一个子包里面,需要使用NuGet
安装BootstrapBlazor.FontAwesome
。
这里还需要注意,需要删除默认模板带的bootstrap的css文件,否则会有css的冲突。
添加 Javascript 文件
<body>
...
<!-- 增加代码 !-->
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
...
<script src="_framework/blazor.server.js"></script>
</body>
这里需要注意一下,bootstrap的js一定要放在
blazor.server.js
的前面,否则可能出问题。
注册 BootstrapBlazor 服务
顶级语句:Program.cs
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddServerSideBlazor();
// 添加本行代码
builder.Services.AddBootstrapBlazor();
var app = builder.Build();
//more code may be present here
非顶级语句:Starup.cs
namespace MyBlazorAppName
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddServerSideBlazor();
// 添加本行代码
services.AddBootstrapBlazor();
}
}
}
增加命名空间引用
将以下内容添加到 ~/_Imports.razor
文件中,以便 Razor 文件中能识别组件
@using BootstrapBlazor.Components
增加 BootstrapBlazorRoot
组件到 ~/App.razor
文件中
注意,这一步很重要,如果不做,程序在运行时大概率会报错。
<BootstrapBlazorRoot>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<PageTitle>Title</PageTitle>
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p>正在玩命开发中 ...</p>
</LayoutView>
</NotFound>
</Router>
</BootstrapBlazorRoot>
分类:
BootstrapBlazor
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战