526互联

BootstrapBlazor组件库，NET8.0使用教程

发布时间 2023-09-23 13:47:55作者: 代码搬运工lee

BootstrapBlazor组件库，NET8.0使用教程

BootstrapBlazor组件库官网 https://www.blazor.zone/components

BootstrapBlazor组件库github仓库地址 https://github.com/dotnetcore/BootstrapBlazor

BootstrapBlazor组件库gitee仓库地址 https://gitee.com/LongbowEnterprise/BootstrapBlazor

1、先创建一个NET8.0 Blazor WebApp项目

添加包引用

2、在项目中添加BootstrapBlazor和BootstrapBlazor.FontAwesome的nuget引用。

img

<ItemGroup>
    <PackageReference Include="BootstrapBlazor" Version="7.10.8-beta07" />
    <PackageReference Include="BootstrapBlazor.FontAwesome" Version="7.5.0" />
</ItemGroup>

BlazorServer

<Project Sdk="Microsoft.NET.Sdk.Web">
 <PropertyGroup>
  <TargetFramework>net8.0</TargetFramework>
  <Nullable>enable</Nullable>
  <ImplicitUsings>enable</ImplicitUsings>
 </PropertyGroup>

 <ItemGroup>
  <ProjectReference Include="..\BlazorApp1.Client\BlazorApp1.Client.csproj" />
  <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.0-rc.1.23421.29" />
 </ItemGroup>

 <ItemGroup>
  <PackageReference Include="BootstrapBlazor" Version="7.10.8-beta07" />
  <PackageReference Include="BootstrapBlazor.FontAwesome" Version="7.5.0" />
 </ItemGroup>
</Project>

BlazorWebAssembly

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 <PropertyGroup>
  <TargetFramework>net8.0</TargetFramework>
  <ImplicitUsings>enable</ImplicitUsings>
  <Nullable>enable</Nullable>
  <NoDefaultLaunchSettingsFile>true</NoDefaultLaunchSettingsFile>
  <StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>
 </PropertyGroup>

 <ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0-rc.1.23421.29" />
 </ItemGroup>

 <ItemGroup>
  <PackageReference Include="BootstrapBlazor" Version="7.10.8-beta07" />
  <PackageReference Include="BootstrapBlazor.FontAwesome" Version="7.5.0" />
 </ItemGroup>
</Project>

3、在App.razor文件中导入BootstrapBlazor组件库的css和JavaScript引用。

添加CSS引用

css 引用一定要放在<link href="css/site.css" rel="stylesheet" />这行代码上面

<!-- 引用 BootstrapBlazor.FontAwesome 字体库包 !-->
<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
<!-- 引用 BootstrapBlazor 组件库包 !-->
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">

添加JavaScript引用

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

img

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <base href="/" />

    <!-- 删除下面这行bootstrap默认引用 !-->
    <!-- <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />!-->
    <!-- 引用 BootstrapBlazor.FontAwesome 字体库包 !-->
    <link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引用 BootstrapBlazor 组件库包 !-->
    <link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">

    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BlazorApp1.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <!-- 引用 BootstrapBlazor 组件库包 !-->
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
</body>

</html>

添加BootstrapBlazor服务

4、接下来在Program.cs中添加这行代码：builder.Services.AddBootstrapBlazor();

using BlazorApp1.Components;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents()
    .AddServerComponents()
    .AddWebAssemblyComponents();

//AddBootstrapBlazor
builder.Services.AddBootstrapBlazor();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.MapRazorComponents<App>()
    .AddServerRenderMode()
    .AddWebAssemblyRenderMode();

app.Run();

添加_Imports.razor全局引用

5、打开_Imports.razor文件，导入BootstrapBlazor组件库：@using BootstrapBlazor.Components

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using BlazorApp1
@using BlazorApp1.Components
@using BootstrapBlazor.Components

添加BootstrapBlazorRoot组件

6、接下最后一步，在Routes.razor文件中添加<BootstrapBlazorRoot>根组件。

<BootstrapBlazorRoot>
    <Router AppAssembly="@typeof(App).Assembly" AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
    </Router>
</BootstrapBlazorRoot>

完成以上步骤后，就可以愉快的使用BootstrapBlazor组件库啦！

img