bh004- Blazor hybrid / Maui 使用 BootstrapBlazor UI 库快速教程
1. 建立工程 bh004_BootstrapBlazorUI
源码
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();// CodeCommentbuilder.Services.AddBootstrapBlazor();
#if DEBUGbuilder.Services.AddBlazorWebViewDeveloperTools();builder.Logging.AddDebug();
#endifbuilder.Services.AddSingleton<WeatherForecastService>();return builder.Build();}}
}
5. 增加命名空间引用
_Imports.razor
@using BootstrapBlazor.Components
6. 增加 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
https://www.cnblogs.com/densen2014/p/16988516.html
BootstrapBlazor 官网教程
https://www.blazor.zone/install-maui
相关文章：
bh004- Blazor hybrid / Maui 使用 BootstrapBlazor UI 库快速教程
1. 建立工程 bh004_BootstrapBlazorUI 源码 2. 添加 nuget 包 <PackageReference Include"BootstrapBlazor" Version"7.*" /> <PackageReference Include"BootstrapBlazor.FontAwesome" Version"7.*" />3. 添加样式表文…...
k8s挂载映射操作详解
k8s投射数据卷 Projected Volume 在 k8s 中，有几种特殊的 Volume，它们的意义不是为了存放容器里的数据，也不是用来进行容器和宿主机之间的数据交换。"而是为容器提供预先定义好的数据。" 从容器的角度来看，这些 Volume…...
DevOps团队如何提高Kubernetes性能
今天，Kubernetes仍然是开发人员最需要的容器。Kubernets最初由 Google 工程师开发，作为跨本地、公共云、私有云或混合云托管的首选解决方案享誉全球。 来自Statista的报告显示，公共云中的Kubernetes市场份额在过去一年中上升了近30%。并且在…...
springboot整合modbus4J（二）
springboot整合modbus4J（二） maven依赖 <dependency><groupId>com.infiniteautomation</groupId><artifactId>modbus4j</artifactId><version>3.1.0</version> </dependency> <dependency><…...
ROS2之topic
目录 ros2 topic命令行 ros2 topic命令行 查看topic输出： ros2 topic echo <topic_name> 查看topic频率：ros2 topic hz <topic_name>...
C语言数值表示——进制、数值存储方式
进制 进制也就是进位制，是人们规定的一种进位方法对于任何一种进制—X进制，就表示某一位置上的数运算时是逢X进一位 十进制是逢十进一，十六进制是逢十六进一，二进制就是逢二进一，以此类推，x进制就是逢x进位…...
linux————keepalived+LVS（DR模式）
一、作用 使用keepalived解决LVS的单点故障 高可用集群 二、 调度器配置 环境 两台LVS服务 一主一备 两台web服务 采用nginx （实现LVS负载均衡） 服务ip 主LVS 192.168.100.3 备LVS 192.168.100.6 web1 192.…...
8月28日，每日信息差
1、欧拉汽车第40万台整车下线。据介绍品牌与用户共创的最新成果2023款好猫&好猫GT木兰版尊荣型也在同一时间上市，限时12.98万起 2、马克古尔曼：M3款苹果MacBook最早今年10月发布 3、大麦成立“艺展鸿图”展览厂牌。专注于高品质艺术展览、授权等业…...
vue-element-admin最新版4.4实现多个url路由匹配到一个路径时，左侧菜单保持高亮状态
文章目录 环境：需求：原因分析：如何解决： 环境： vue-admin-template-4.4版本（vue2） 需求： 当我访问申请开户时，也希望支付菜单能保持高亮状态。 原因分析： …...
Android自定义view实现横向滚动弹幕
参考文章 此方案使用动画方式实现，只适合轻量级别的弹幕滚动效果实现，数据量过大时会出现内存激增的情况。 效果： 自定义view代码 public class TumbleLayout extends ViewGroup {private final String TAG "TumbleLayout";priva…...
学习ts（十二）Proxy与Reflect
定义 Proxy 为开发者提供了拦截并向基本操作嵌入额外行为的能力。具体的说，可以给目标对象定义一个关联的代理对象，而这个代理对象可以作为抽象的目标对象来使用。在对目标对象的各种操作影响目标对象之前，可以在代理对象中对这些操作加以控…...
性能优化之分库分表
1、什么是分库分表 1.1、分表 将同一个库中的一张表（比如SPU表）按某种方式（垂直拆分、水平拆分）拆分成SPU1、SPU2、SPU3、SPU4…等若干张表，如下图所示： 1.2、分库 在表数据不变的情况下，对…...
每日一学——STP、VRRP 、BFD、POE
STP (Spanning Tree Protocol): STP是一种用于构建安全和冗余的网络拓扑的协议。 它能够检测并防止网络中的环路形成，从而防止数据包在网络中无限循环。STP通过选择一个主桥和确定最短路径来实现拓扑稳定。STP有多种版本，如STP、RSTP和PVST等。 VRRP (V…...
Spring MVC 一 ：从MVC Servlet开始
甩开膀子，继续干活。 今天开始Spring Framework中的另外一部分重头戏：Spring Web MVC，借助Spring Web MVC，Spring Framework可以通过Servlet API轻松构建基于web的应用。 在开始Spring Web MVC之前，我们还是要简单了…...
Ansible学习笔记（二）
3.ansible的使用示例（playbook） 1.创建mysql 账户和mysql 组的 playbook ---#create mysql user and group - hosts: allremote_user: roottasks:- name: create groupgroup: namemysql systemyes gid306- name: create useruser: namemysql systemyes…...
：HTTP请求详解)
Web安全测试(一)：HTTP请求详解
一、前言 结合内部资料，与安全渗透部门同事合力整理的安全测试相关资料教程，全方位涵盖电商、支付、金融、网络、数据库等领域的安全测试，覆盖Web、APP、中间件、内外网、Linux、Windows多个平台。学完后一定能成为安全大佬！ 全部文章请访问专栏：《全栈安全测试教程（0基…...
Android工具条
在底层，所有通过主题得到应用条的活动都使用ActionBar类实现它的应用条。不过最新的应用条特性已经增加到AppCompat支持库中的Toolbar类。这意味着，如果你想在应用中使用最新的应用条特性，就需要使用支持库中的ToolBar类。 如何增加工具条 1…...
【项目实战典型案例】05.前后端分离的好处(发送调查问卷)
目录 一、背景二、思路三、过程1、主要的业务逻辑2、解决问题的思路 四、总结五、面向对象的好处 一、背景 以下流程图是给用户发送调查问的整体流程，将不必要的业务逻辑放到前端进行处理。这样导致逻辑混乱难以维护。前后端分离的其中一个目的是将功能的样式放在了…...
（Deep Learning）准确率和召回率的基础概念
算法模型极大的提升了对各类结果的预测效率。 【算法模型的本质】 算法模型的本质，是基于输入的各类变量因子，通过计算规则（模型or公式），得出预测结果。 典型的预测结果比如： 1.（通过历史行为…...
【业务功能篇85】微服务-springcloud-Nginx-反向代理-网关
Nginx域名 1.hosts文件 在c:/window/system32/drivers/etc/hosts文件，我们在这个文件中添加 192.168.56.100 msb.mall.com注意如果是没有操作权限，那么点击该文件右击属性，去掉只读属性即可 通过这个域名访问到Nginx服务 2.Nginx的方向代…...
微信小程序之bind和catch
这两个呢，都是绑定事件用的，具体使用有些小区别。 官方文档： 事件冒泡处理不同 bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了b…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式（Singleton Pattern&#…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码，专为学校招生场景量身打造，功能实用且操作便捷。 从技术架构来看，ThinkPHP提供稳定可靠的后台服务，FastAdmin加速开发流程，UniApp则保障小程序在多端有良好的兼…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具
第2章 虚拟机性能监控，故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）
上一章用到了V2 的概念，其实 Fiori当中还有 V4，咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)，代理中间件（ui5-middleware-simpleproxy）-CSDN博客…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面，gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
免费数学几何作图web平台
光锐软件免费数学工具，maths,数学制图，数学作图，几何作图，几何，AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...