bh004- Blazor hybrid / Maui 使用 BootstrapBlazor UI 库快速教程

1. 建立工程 bh004_BootstrapBlazorUI

源码

2. 添加 nuget 包

3. 添加样式表文件

wwwroot/index.html

在宿主文件中增加主题样式表




    
    
    
    
    
    
    
    
    




    


    
Loading...

    

        An unhandled error has occurred.
        Reload
        
    

    
    

4. 注册 BootstrapBlazor 服务

MauiProgram.cs

using bh004_BootstrapBlazorUI.Data;
using Microsoft.Extensions.Logging;

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

            builder.Services.AddMauiBlazorWebView();

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

            builder.Services.AddSingleton();

            return builder.Build();
        }
    }
}

5. 增加命名空间引用

_Imports.razor

@using BootstrapBlazor.Components

6. 增加 BootstrapBlazorRoot 组件

Main.razor


    
        
            
            
        
        
            
                
Sorry, there's nothing at this address.
            
        
    

7. 在页面中增加一个 Button 按钮

Pages\Index.razor

8. 运行

9. 相关资料

如何远程调试 MAUI blazor / Blazor Hybrid
https://www.cnblogs.com/densen2014/p/16988516.html

BootstrapBlazor 官网教程
https://www.blazor.zone/install-maui