用.NET进行客户端Web开发?看这个Bootstrap风格的BlazorUI组件库

点击上方“Dotnet9”添加关注哦

Blazor

一、前言

今天在下班的路上(地铁上),站长习惯性的掏出手机,就收到知乎向站长推送的一篇BlazorUI组件库推荐文章,是码云官方的:原文链接[1],于是我立即打开码云了解,才知道这款BlzaorUI组件库(BootstrapBlazor)是如此优秀,已完成的组件是如此丰富,应用实战开发也是可以的。

该库十分优秀,所谓酒香不怕巷子深,今天我还是来简单介绍下,希望能让更多的人知道它、使用它。

下面是码云官方推荐文章截图(本文标题照搬,并且大部分荐文参考该仓库README.MD而来):

码云官方知乎推荐

下面是BootstrapBlazor在码云上的截图:

BootstrapBlazor项目情况

二、Blazor是什么?

Blazor为数百万.NET开发人员带来了WebAssembly的世界,允许他们编写在浏览器上运行的C#。

多年来,如果您想编写代码以在浏览器中运行,您的选择是JavaScript。对于某些浏览器上的几个短暂时期,您可以使用其他语言,但它们并不重要:IE上的VBScript和特殊版Chrome上的Dart。

还有一些语言可以编译成JavaScript(TypeScript,CoffeeScript,...),但它们仍然是真正的JavaScript。JavaScript单一文化的日子随着WebAssembly(Wasm)的出现而打破。对于.NET开发人员,Wasm以Blazor的形式到达。

...

三、关于BootstrapBlazor UI组件库

一个使用 .NET 生成交互式客户端 Web UI 的框架,如果你想学习学习的话不妨接着往下看。

项目名称: BootstrapBlazor

项目作者: Longbow

作者QQ号: 5196060(技术交流,欢迎勾兑)

微信号: 可添加站长微信号,给你搭桥

开源许可协议: LGPL-3.0

项目地址: https://gitee.com/LongbowEnterprise/BootstrapBlazor

四、项目简介

4.1 使用.NET

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架:

  1. 使用 C# 代替 JavaScript 来创建丰富的交互式 UI。

  2. 共享使用 .NET 编写的服务器端和客户端应用逻辑。

  3. 将 UI 呈现为 HTML 和 CSS,已支持众多浏览器,其中包括移动浏览器。

4.2 使用.NET的优势

使用 .NET 进行客户端 Web 开发可提供以下优势:

  1. 使用 C# 代替 JavaScript 来编写代码。

  2. 利用现有的 .NET 库生态系统。

  3. 在服务器和客户端之间共享应用逻辑。

  4. 受益于 .NET 的性能、可靠性和安全性。

  5. 始终高效支持 Windows、Linux 和 macOS 上的 Visual Studio。

  6. 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。

本项目是利用 Bootstrap 样式进行封装的 UI 组件库。

4.3 组件

Blazor应用基于组件。Blazor 中的组件是指 UI 元素,例如页面、对话框或数据输入窗体。

组件是内置到 .NET 程序集的 .NET 类,用来:

  1. 定义灵活的 UI 呈现逻辑。

  2. 处理用户事件。

  3. 可以嵌套和重用。

  4. 可以作为 Razor 类库或 NuGet 包共享和分发。

4.4 内置组件

内置组件 传送门[2]

4.5 分支说明

  1. master 稳定分支

  2. dev 开发功能分支

  3. publish 与演示网站同步

  4. 其他 均为临时分支

4.6 演示地址

blazor.sdgxgz.com

点击跳转 BootstrapBlazor[3]

4.7 项目截图

下面是部分截图,欲了解更多,请点击上面链接查看。

  1. Toggle开关

Toggle开关
  1. Toast轻量弹窗

Toast轻量弹窗
  1. 卡片式预览

卡片式预览
  1. 堆栈式文件上传进度

堆栈式文件上传进度
  1. Bar图

Bar图
  1. Pie图

Pie图
  1. Doughnut图

Doughnut图

目前这个项目仍然在不断地完善中, 如果你想参与进来,或者想看看这个项目更详细的情况,那就点击后面的链接去项目主页看看吧。

[1]

原文链接: https://zhuanlan.zhihu.com/p/147193082?utm_source=wechat_session&utm_medium=social&utm_oi=714039936084344832

[2]

传送门: http://blazor.sdgxgz.com/alerts

[3]

BootstrapBlazor: http://blazor.sdgxgz.com

关注Dotnet9,分享更多好文

如果本文对你有用,

不妨点个“在看”或者转发朋友圈

????点击查看Bootstrap Blazor演示网站

猜你喜欢

转载自blog.csdn.net/HenryMoore/article/details/106821946