当前位置： 首页 > news >正文

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

news 2026/3/31 9:50:35

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. 添加样式表文…...

编程日记 2023/8/29 3:48:19

k8s挂载映射操作详解

k8s投射数据卷 Projected Volume 在 k8s 中&#xff0c;有几种特殊的 Volume&#xff0c;它们的意义不是为了存放容器里的数据&#xff0c;也不是用来进行容器和宿主机之间的数据交换。"而是为容器提供预先定义好的数据。" 从容器的角度来看&#xff0c;这些 Volume…...

编程日记 2023/8/29 3:47:15

DevOps团队如何提高Kubernetes性能

今天&#xff0c;Kubernetes仍然是开发人员最需要的容器。Kubernets最初由 Google 工程师开发&#xff0c;作为跨本地、公共云、私有云或混合云托管的首选解决方案享誉全球。 来自Statista的报告显示&#xff0c;公共云中的Kubernetes市场份额在过去一年中上升了近30%。并且在…...

编程日记 2023/8/29 3:46:10

springboot整合modbus4J（二）

springboot整合modbus4J&#xff08;二&#xff09; maven依赖 <dependency><groupId>com.infiniteautomation</groupId><artifactId>modbus4j</artifactId><version>3.1.0</version> </dependency> <dependency><…...

编程日记 2023/8/29 3:45:09

ROS2之topic

目录 ros2 topic命令行 ros2 topic命令行 查看topic输出&#xff1a; ros2 topic echo <topic_name> 查看topic频率&#xff1a;ros2 topic hz <topic_name>...

编程日记 2023/8/29 3:44:07

C语言数值表示——进制、数值存储方式

进制 进制也就是进位制&#xff0c;是人们规定的一种进位方法对于任何一种进制—X进制&#xff0c;就表示某一位置上的数运算时是逢X进一位 十进制是逢十进一&#xff0c;十六进制是逢十六进一&#xff0c;二进制就是逢二进一&#xff0c;以此类推&#xff0c;x进制就是逢x进位…...

编程日记 2023/8/29 3:43:05

linux————keepalived+LVS（DR模式）

一、作用 使用keepalived解决LVS的单点故障 高可用集群 二、 调度器配置 环境 两台LVS服务 一主一备 两台web服务 采用nginx &#xff08;实现LVS负载均衡&#xff09; 服务ip 主LVS 192.168.100.3 备LVS 192.168.100.6 web1 192.…...

编程日记 2023/8/29 3:42:04

8月28日，每日信息差

1、欧拉汽车第40万台整车下线。据介绍品牌与用户共创的最新成果2023款好猫&好猫GT木兰版尊荣型也在同一时间上市&#xff0c;限时12.98万起 2、马克古尔曼&#xff1a;M3款苹果MacBook最早今年10月发布 3、大麦成立“艺展鸿图”展览厂牌。专注于高品质艺术展览、授权等业…...

编程日记 2023/8/29 3:41:01

vue-element-admin最新版4.4实现多个url路由匹配到一个路径时，左侧菜单保持高亮状态

文章目录 环境&#xff1a;需求&#xff1a;原因分析&#xff1a;如何解决&#xff1a; 环境&#xff1a; vue-admin-template-4.4版本&#xff08;vue2&#xff09; 需求&#xff1a; 当我访问申请开户时&#xff0c;也希望支付菜单能保持高亮状态。 原因分析&#xff1a; …...

编程日记 2023/8/29 3:39:59

Android自定义view实现横向滚动弹幕

参考文章 此方案使用动画方式实现&#xff0c;只适合轻量级别的弹幕滚动效果实现&#xff0c;数据量过大时会出现内存激增的情况。 效果&#xff1a; 自定义view代码 public class TumbleLayout extends ViewGroup {private final String TAG "TumbleLayout";priva…...

编程日记 2023/8/29 3:38:58

学习ts（十二）Proxy与Reflect

定义 Proxy 为开发者提供了拦截并向基本操作嵌入额外行为的能力。具体的说&#xff0c;可以给目标对象定义一个关联的代理对象&#xff0c;而这个代理对象可以作为抽象的目标对象来使用。在对目标对象的各种操作影响目标对象之前&#xff0c;可以在代理对象中对这些操作加以控…...

编程日记 2023/8/29 3:37:55

性能优化之分库分表

1、什么是分库分表 1.1、分表 将同一个库中的一张表&#xff08;比如SPU表&#xff09;按某种方式&#xff08;垂直拆分、水平拆分&#xff09;拆分成SPU1、SPU2、SPU3、SPU4…等若干张表&#xff0c;如下图所示&#xff1a; 1.2、分库 在表数据不变的情况下&#xff0c;对…...

编程日记 2023/8/29 3:36:53

每日一学——STP、VRRP 、BFD、POE

STP (Spanning Tree Protocol): STP是一种用于构建安全和冗余的网络拓扑的协议。 它能够检测并防止网络中的环路形成&#xff0c;从而防止数据包在网络中无限循环。STP通过选择一个主桥和确定最短路径来实现拓扑稳定。STP有多种版本&#xff0c;如STP、RSTP和PVST等。 VRRP (V…...

编程日记 2023/8/29 3:35:53

Spring MVC 一 ：从MVC Servlet开始

甩开膀子&#xff0c;继续干活。 今天开始Spring Framework中的另外一部分重头戏&#xff1a;Spring Web MVC&#xff0c;借助Spring Web MVC&#xff0c;Spring Framework可以通过Servlet API轻松构建基于web的应用。 在开始Spring Web MVC之前&#xff0c;我们还是要简单了…...

编程日记 2023/8/29 3:34:50

Ansible学习笔记（二）

3.ansible的使用示例&#xff08;playbook&#xff09; 1.创建mysql 账户和mysql 组的 playbook ---#create mysql user and group - hosts: allremote_user: roottasks:- name: create groupgroup: namemysql systemyes gid306- name: create useruser: namemysql systemyes…...

编程日记 2023/8/29 3:33:49

Web安全测试(一)：HTTP请求详解

一、前言 结合内部资料，与安全渗透部门同事合力整理的安全测试相关资料教程，全方位涵盖电商、支付、金融、网络、数据库等领域的安全测试，覆盖Web、APP、中间件、内外网、Linux、Windows多个平台。学完后一定能成为安全大佬！ 全部文章请访问专栏：《全栈安全测试教程（0基…...

编程日记 2023/8/29 3:32:46

Android工具条

在底层&#xff0c;所有通过主题得到应用条的活动都使用ActionBar类实现它的应用条。不过最新的应用条特性已经增加到AppCompat支持库中的Toolbar类。这意味着&#xff0c;如果你想在应用中使用最新的应用条特性&#xff0c;就需要使用支持库中的ToolBar类。 如何增加工具条 1…...

编程日记 2023/8/29 3:31:45

【项目实战典型案例】05.前后端分离的好处(发送调查问卷)

目录 一、背景二、思路三、过程1、主要的业务逻辑2、解决问题的思路 四、总结五、面向对象的好处 一、背景 以下流程图是给用户发送调查问的整体流程&#xff0c;将不必要的业务逻辑放到前端进行处理。这样导致逻辑混乱难以维护。前后端分离的其中一个目的是将功能的样式放在了…...

编程日记 2023/8/29 3:30:44

（Deep Learning）准确率和召回率的基础概念

算法模型极大的提升了对各类结果的预测效率。 【算法模型的本质】 算法模型的本质&#xff0c;是基于输入的各类变量因子&#xff0c;通过计算规则&#xff08;模型or公式&#xff09;&#xff0c;得出预测结果。 典型的预测结果比如&#xff1a; 1.&#xff08;通过历史行为…...

编程日记 2023/8/29 3:29:43

【业务功能篇85】微服务-springcloud-Nginx-反向代理-网关

Nginx域名 1.hosts文件 在c:/window/system32/drivers/etc/hosts文件&#xff0c;我们在这个文件中添加 192.168.56.100 msb.mall.com注意如果是没有操作权限&#xff0c;那么点击该文件右击属性&#xff0c;去掉只读属性即可 通过这个域名访问到Nginx服务 2.Nginx的方向代…...

编程日记 2023/8/29 3:28:41

Fun-ASR语音识别新手入门：3步启动Web服务，麦克风实时转文字实测

Fun-ASR语音识别新手入门&#xff1a;3步启动Web服务&#xff0c;麦克风实时转文字实测 1. 快速认识Fun-ASR Fun-ASR是由钉钉与通义实验室联合推出的语音识别系统&#xff0c;专为中文场景优化设计。与市面上常见的云端语音识别服务不同&#xff0c;它最大的特点是支持本地化…...

编程新知 2026/3/31 9:07:55

小麦联合收割机的设计【说明书+SW三维+CAD图纸】

小麦联合收割机作为现代农业机械化的核心装备&#xff0c;其设计需兼顾效率、可靠性与适应性。该设备通过集成收割、脱粒、清选及集粮功能&#xff0c;实现小麦收获环节的连续作业&#xff0c;显著缩短田间作业周期&#xff0c;降低人工劳动强度。其核心作用体现在三方面&#…...

编程新知 2026/3/31 9:05:53

Pixel Aurora Engine效果展示：像素极光视觉系统渲染的星际战舰系列

Pixel Aurora Engine效果展示&#xff1a;像素极光视觉系统渲染的星际战舰系列 1. 像素极光引擎简介 Pixel Aurora Engine是一款基于AI扩散模型的高端绘图工作站&#xff0c;专为像素艺术创作而设计。它采用独特的复古像素游戏风格界面&#xff0c;通过先进的AI技术将文字描述…...

编程新知 2026/3/31 7:33:23

共享图书借阅系统 Java 源码 + 数据库设计完整方案

以下是一个共享图书借阅系统的Java源码与数据库设计的完整方案&#xff0c;涵盖系统架构、核心功能实现、数据库设计以及安全防护措施等方面&#xff1a;一、系统架构技术栈&#xff1a;后端&#xff1a;Spring Boot 2.x MyBatis-Plus&#xff08;简化数据库操作&#xff09;前…...

编程新知 2026/3/31 7:29:17

PyTorch 2.8镜像一文详解：xFormers+Accelerate+Diffusers全栈预装环境实测

PyTorch 2.8镜像一文详解&#xff1a;xFormersAccelerateDiffusers全栈预装环境实测 1. 镜像概述与核心优势 PyTorch 2.8深度学习镜像是一个经过深度优化的全栈AI开发环境&#xff0c;专为现代深度学习任务设计。这个镜像最显著的特点是开箱即用的完整工具链支持&#xff0c;…...

编程新知 2026/3/31 5:28:13

Swin2SR多帧超分：视频序列的时空信息融合

Swin2SR多帧超分&#xff1a;视频序列的时空信息融合 1. 引言 你有没有遇到过这样的情况&#xff1a;从监控录像中截取的关键画面模糊不清&#xff0c;或者老视频中的珍贵片段分辨率太低&#xff0c;无法看清细节&#xff1f;传统单帧超分技术往往力不从心&#xff0c;因为它…...

编程新知 2026/3/31 5:14:05

程序员必看！用UML类图破解Spring Boot领域模型设计难题

程序员必看&#xff01;用UML类图破解Spring Boot领域模型设计难题 在Spring Boot项目中&#xff0c;领域模型设计往往是决定系统可维护性和扩展性的关键。许多Java开发者虽然熟练使用JPA和MyBatis&#xff0c;但当面对复杂的业务逻辑时&#xff0c;却常常陷入"贫血模型&q…...

编程新知 2026/3/31 2:44:04

AirNgin ESP32 MQTT客户端：面向工业IoT的平台化固件库

1. 项目概述AirNgin ESP32 MQTT Client 是一款专为 ESP32 平台设计的 Arduino 兼容库&#xff0c;面向伊朗本土 IoT 平台 AirNgin 构建。该库并非通用 MQTT 封装&#xff0c;而是深度集成 AirNgin 云平台特有协议栈与管理逻辑的生产级固件组件。其核心价值在于将设备接入、状态…...

编程新知 2026/3/31 2:40:03

用MQTT协议玩转OneNet物联网：STM32F103+ESP8266实现温湿度监控（附心跳包优化技巧）

STM32F103与ESP8266的物联网实战&#xff1a;MQTT协议深度优化与温湿度监控系统设计 1. 资源受限环境下的物联网通信架构设计 在嵌入式物联网设备开发中&#xff0c;资源优化始终是核心挑战。STM32F103C8T6作为经典的Cortex-M3内核微控制器&#xff0c;仅有64KB Flash和20KB RA…...

编程新知 2026/3/31 2:15:27

**AI仿真人剧机构推荐，2025年引领娱乐新潮流**随着科技的飞速发展，AI技术已经渗透到我们生活的方方面面。在娱乐领域，AI仿真人剧机构如同一颗璀璨的新星，正在引领着新一轮的潮流。那么，在众多

随着科技的飞速发展&#xff0c;AI技术已经渗透到我们生活的方方面面。在娱乐领域&#xff0c;AI仿真人剧机构如同一颗璀璨的新星&#xff0c;正在引领着新一轮的潮流。那么&#xff0c;在众多的AI仿真人剧机构中&#xff0c;如何选择一家优质的机构呢&#xff1f;本文将为您揭…...

编程新知 2026/3/31 1:43:16