使用模板
使用模板是最简单的办法。因为项目模板里已经包含了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>
