前言：
此时同学们对“bootstrap基础教程 源代码”大约比较注重，小伙伴们都想要知道一些“bootstrap基础教程 源代码”的相关内容。那么小编同时在网摘上收集了一些对于“bootstrap基础教程 源代码””的相关资讯，希望姐妹们能喜欢，小伙伴们一起来了解一下吧！1. 建立工程 bh004_BootstrapBlazorUI
源码 BlazorHybrid/bh100days/bh004_BootstrapBlazorUI at master · densen2014/BlazorHybrid · GitHub
2. 添加 nuget 包
<PackageReference Include="BootstrapBlazor" Version="7.*" /><PackageReference Include="BootstrapBlazor.FontAwesome" Version="7.*" />3. 添加样式表文件
wwwroot/index.html
在宿主文件中增加主题样式表
<!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>bh004_BootstrapBlazorUI</title> <base href="/" /> <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="_content/BootstrapBlazor/css/motronic.min.css" rel="stylesheet"> <link href="css/app.css" rel="stylesheet" /> <link href="bh004_BootstrapBlazorUI.styles.css" rel="stylesheet" /></head><body> <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"><i class="fa-solid fa-xmark"></i></a> </div> <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script> <script src="_framework/blazor.webview.js" autostart="false"></script></body></html>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<App>() .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<WeatherForecastService>(); return builder.Build(); } }}5. 增加命名空间引用_Imports.razor
@using BootstrapBlazor.Components6. 增加 BootstrapBlazorRoot 组件
Main.razor
<BootstrapBlazorRoot> <Router AppAssembly="@typeof(Main).Assembly"> <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> <FocusOnNavigate RouteData="@routeData" Selector="h1" /> </Found> <NotFound> <LayoutView Layout="@typeof(MainLayout)"> <p role="alert">Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router></BootstrapBlazorRoot>7. 在页面中增加一个 Button 按钮
Pages\Index.razor
<Button Color="Color.Primary" Icon="fa-solid fa-font-awesome" Text="测试" />8. 运行9. 相关资料
如何远程调试 MAUI blazor / Blazor Hybrid
BootstrapBlazor 官网教程
关联项目
FreeSql
BA & Blazor
Maui Blazor 中文社区
知识共享许可协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名AlexChow（包含链接： ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系 。
转载声明
作者：周创琳 AlexChow，转载请注明原文链接：
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #bootstrap基础教程 源代码
