Blazor 安装 BootstrapBlazor UI插件

ow.z

已于 2023-10-31 16:54:27 修改

阅读量211

点赞数

分类专栏： Maui 文章标签： wpf ui c#

于 2023-10-31 14:41:03 首次发布

本文链接：https://blog.csdn.net/weixin_45876789/article/details/134140002

版权

Maui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、安装

通过 NuGet 搜索并安装BootstrapBlazor、BootstrapBlazor.FontAwesome

BootstrapBlazor

在这里插入图片描述

BootstrapBlazor.FontAwesome

在这里插入图片描述

二、样式

Maui Blazor

修改 wwwroot/index.html

Blazor Server

修改 Pages/_Host.cshtml

1、移除链接

<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />

2、引用图标

<head>
    ...
    <!-- BootstrapBlazor -->
    <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/app.css" rel="stylesheet" />
    <link href="MauiApp2.styles.css" rel="stylesheet" />
</head>

3、引用Js

<body>
    ...    
    <!-- Javascript -->
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
</body>

4、操作示例

<!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, viewport-fit=cover" />
    <title>MauiApp1</title>
    <base href="/" />

    <!-- BootstrapBlazor -->
    <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/app.css" rel="stylesheet" />
    <link href="MauiApp1.styles.css" rel="stylesheet" />
</head>

<body>

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

    <div class="status-bar-safe-area"></div>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js" autostart="false"></script>

</body>

</html>

三、注册

1、注册

builder.Services.AddBootstrapBlazor();

2、示例

Maui Blazor

修改 MauiProgram.cs

using MauiApp1.Data;
using Microsoft.Extensions.Logging;

namespace MauiApp1
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });

            builder.Services.AddMauiBlazorWebView();

            // BootstrapBlazor
            builder.Services.AddBootstrapBlazor();

            #if DEBUG
                builder.Services.AddBlazorWebViewDeveloperTools();
		        builder.Logging.AddDebug();
            #endif

            builder.Services.AddSingleton<WeatherForecastService>();

            return builder.Build();
        }
    }
}

Blazor Server

修改 Program.cs

using MauiApp2.Web.Data;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

builder.Services.AddBootstrapBlazor();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}


app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

四、命名空间

1、引用

@using BootstrapBlazor.Components

2、示例

_Imports.razor

@using System.Net.Http
@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 MauiApp1
@using MauiApp1.Shared
@using BootstrapBlazor.Components

五、根组件

1、示例

Maui Blazor

Main.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>

Blazor Server

App.razor

<BootstrapBlazorRoot>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</BootstrapBlazorRoot>