点击上方“Dotnet9”添加关注哦
![](https://i-blog.csdnimg.cn/blog_migrate/6dfaf0a1dd13e0260b597a752b037cdc.png)
一、前言
今天在下班的路上(地铁上),站长习惯性的掏出手机,就收到知乎向站长推送的一篇BlazorUI组件库推荐文章,是码云官方的:原文链接[1],于是我立即打开码云了解,才知道这款BlzaorUI组件库(BootstrapBlazor)是如此优秀,已完成的组件是如此丰富,应用实战开发也是可以的。
该库十分优秀,所谓酒香不怕巷子深,今天我还是来简单介绍下,希望能让更多的人知道它、使用它。
下面是码云官方推荐文章截图(本文标题照搬,并且大部分荐文参考该仓库README.MD而来):
![](https://i-blog.csdnimg.cn/blog_migrate/60822066fe519e634b6903762aec3549.png)
下面是BootstrapBlazor在码云上的截图:
![](https://i-blog.csdnimg.cn/blog_migrate/c8b0bbc4bec7dc98ac5ea70447edabff.png)
二、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 的框架:
使用 C# 代替 JavaScript 来创建丰富的交互式 UI。
共享使用 .NET 编写的服务器端和客户端应用逻辑。
将 UI 呈现为 HTML 和 CSS,已支持众多浏览器,其中包括移动浏览器。
4.2 使用.NET的优势
使用 .NET 进行客户端 Web 开发可提供以下优势:
使用 C# 代替 JavaScript 来编写代码。
利用现有的 .NET 库生态系统。
在服务器和客户端之间共享应用逻辑。
受益于 .NET 的性能、可靠性和安全性。
始终高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。
本项目是利用 Bootstrap 样式进行封装的 UI 组件库。
4.3 组件
Blazor应用基于组件。Blazor 中的组件是指 UI 元素,例如页面、对话框或数据输入窗体。
组件是内置到 .NET 程序集的 .NET 类,用来:
定义灵活的 UI 呈现逻辑。
处理用户事件。
可以嵌套和重用。
可以作为 Razor 类库或 NuGet 包共享和分发。
4.4 内置组件
内置组件 传送门[2]
4.5 分支说明
master 稳定分支
dev 开发功能分支
publish 与演示网站同步
其他 均为临时分支
4.6 演示地址
![](https://i-blog.csdnimg.cn/blog_migrate/43c47aa40a04125a6013ac8d3626f3fe.png)
点击跳转 BootstrapBlazor[3]
4.7 项目截图
下面是部分截图,欲了解更多,请点击上面链接查看。
Toggle开关
![](https://i-blog.csdnimg.cn/blog_migrate/77ed7be78796ff888ecce50911e4a1a3.png)
Toast轻量弹窗
![](https://i-blog.csdnimg.cn/blog_migrate/e809bd60ccc584fc36eb9836c27cf102.png)
卡片式预览
![](https://i-blog.csdnimg.cn/blog_migrate/d1adfcec9a0d7a2ef95d02eda72134f1.png)
堆栈式文件上传进度
![](https://i-blog.csdnimg.cn/blog_migrate/ea1d38016a8d38f99d63843e65147e7a.png)
Bar图
![](https://i-blog.csdnimg.cn/blog_migrate/0e741d812e5a80b518525f30dd4243e4.png)
Pie图
![](https://i-blog.csdnimg.cn/blog_migrate/6b5585a4b08ed37c1afe63e69a821cab.png)
Doughnut图
![](https://i-blog.csdnimg.cn/blog_migrate/412e02ae94d4c8cd405ade5baffc3611.png)
目前这个项目仍然在不断地完善中, 如果你想参与进来,或者想看看这个项目更详细的情况,那就点击后面的链接去项目主页看看吧。
[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
不妨点个“在看”或者转发朋友圈
????点击查看Bootstrap Blazor演示网站