Bootstrap Blazor 组件库

一套基于 Bootstrap 和 Blazor 的企业级组件库

[![Security Status](https://www.murphysec.com/platform3/v3/badge/1619783039836532736.svg)](https://github.com/ArgoZhang/BootstrapBlazor/blob/main/LICENSE) [![oscs](https://www.oscs1024.com/platform/badge/murphysecurity/murphysec.svg)](https://github.com/ArgoZhang/BootstrapBlazor/blob/main/LICENSE) [![License](https://img.shields.io/github/license/argozhang/bootstrapblazor.svg?logo=git&logoColor=red)](https://github.com/ArgoZhang/BootstrapBlazor/blob/main/LICENSE) [![Nuget](https://img.shields.io/nuget/v/BootstrapBlazor.svg?color=red&logo=nuget&logoColor=green)](https://www.nuget.org/packages/BootstrapBlazor/) [![Nuget](https://img.shields.io/nuget/dt/BootstrapBlazor.svg?logo=nuget&logoColor=green)](https://www.nuget.org/packages/BootstrapBlazor/) [![Repo Size](https://img.shields.io/github/repo-size/ArgoZhang/BootstrapBlazor.svg?logo=github&logoColor=green&label=repo)](https://github.com/ArgoZhang/BootstrapBlazor) [![Commit Date](https://img.shields.io/github/last-commit/ArgoZhang/BootstrapBlazor/main.svg?logo=github&logoColor=green&label=commit)](https://github.com/ArgoZhang/BootstrapBlazor) [![Github build](https://img.shields.io/github/actions/workflow/status/ArgoZhang/BootstrapBlazor/build.yml?branch=main&?label=main&logo=github)](https://github.com/ArgoZhang/BootstrapBlazor/actions?query=workflow%3A%22Build+Project%22+branch%3Amain) [![codecov](https://codecov.io/gh/dotnetcore/BootstrapBlazor/branch/main/graph/badge.svg?token=5SXIWHXZC3)](https://codecov.io/gh/dotnetcore/BootstrapBlazor)
English | 中文 --- ## 项目介绍 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架： - 使用 C# 代替 JavaScript 来创建丰富的交互式 UI。 - 共享使用 .NET 编写的服务器端和客户端应用逻辑。 - 将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。 使用 .NET 进行客户端 Web 开发可提供以下优势： - 使用 C# 代替 JavaScript 来编写代码。 - 利用现有的 .NET 库生态系统。 - 在服务器和客户端之间共享应用逻辑。 - 受益于 .NET 的性能、可靠性和安全性。 - 始终高效支持 Windows、Linux 和 macOS 上的 Visual Studio。 - 支持 Net5 - 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。 本项目是利用 Bootstrap 样式进行封装的 UI 组件库 ## 生态伙伴 WTM 快速开发框架，设计的核心理念就是 "尽一切可能提高开发效率"。WTM框架把常规编码结构化，重复编码自动化，它不仅是一个框架，它是强有力的生产力工具！目前 WTM 快速开发框架已深度集成 Blazor 欢迎大家使用 [传送门](https://wtmdoc.walkingtec.cn) WTM 快速开发框架，设计的核心理念就是 "尽一切可能提高开发效率"。WTM框架把常规编码结构化，重复编码自动化，它不仅是一个框架，它是强有力的生产力工具！目前 WTM 快速开发框架已深度集成 Blazor 欢迎大家使用 [传送门](https://wtmdoc.walkingtec.cn) ## 开发环境搭建 1. 安装 .net core sdk 最新版 [官方网址](http://www.microsoft.com/net/download) 2. 安装 Visual Studio 2022 最新版 [官方网址](https://visualstudio.microsoft.com/vs/getting-started/) 3. 获取本项目代码 [BootstrapBlazor](https://gitee.com/LongbowEnterprise/BootstrapBlazor) ### 克隆代码 ```shell git clone https://gitee.com/LongbowEnterprise/BootstrapBlazor.git cd BootstrapBlazor/src/BootstrapBlazor.Server dotnet run ``` ### CLI **Install Template** ```c# dotnet new install Bootstrap.Blazor.Templates ``` **Create Project** ```shell dotnet new bbapp ``` **Run** ```shell dotnet run ``` ### 项目模板 - [微软市场](https://marketplace.visualstudio.com/items?itemName=Longbow.BootstrapBlazorUITemplate) - [码云镜像](https://gitee.com/LongbowEnterprise/BootstrapBlazorVsix/raw/master/dist/BootstrapBlazor.UITemplate.vsix) ### 更多文档 - [项目模板](https://www.blazor.zone/template) - [快速上手](https://www.blazor.zone/install-server) ## 相关资源 - [Blazor 官方文档](https://docs.microsoft.com/zh-cn/aspnet/core/blazor/?WT.mc_id=DT-MVP-5004174) - [生成 Blazor Web 应用](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/?WT.mc_id=DT-MVP-5004174) - [什么是 Blazor](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/2-understand-blazor-webassembly?WT.mc_id=DT-MVP-5004174) - [练习 - 配置开发环境](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/3-exercise-configure-enviromnent?WT.mc_id=DT-MVP-5004174) - [Blazor 组件](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/4-blazor-components?WT.mc_id=DT-MVP-5004174) - [练习 - 添加组件](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/5-exercise-add-component?WT.mc_id=DT-MVP-5004174) - [数据绑定和事件](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/6-csharp-razor-binding?WT.mc_id=DT-MVP-5004174) - [练习 - 数据绑定和事件](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/7-exercise-razor-binding?WT.mc_id=DT-MVP-5004174) - [总结](https://docs.microsoft.com/zh-cn/learn/modules/build-blazor-webassembly-visual-studio-code/8-summary?WT.mc_id=DT-MVP-5004174) ## QQ交流群 [![QQ](https://img.shields.io/badge/QQ-795206915-green.svg?logo=tencent%20qq&logoColor=red)](https://qm.qq.com/cgi-bin/qm/qr?k=1-jF9-5WA_3GFiJgXem2U_AQfqbdyOlV&jump_from=webapi) [![QQ](https://img.shields.io/badge/QQ-675147445-green.svg?logo=tencent%20qq&logoColor=red)](https://qm.qq.com/cgi-bin/qm/qr?k=Geker7hCXK0HC-J8_974645j_n6w0OE0&jump_from=webapi) ## 视频教程 B 站视频集锦 [传送门](https://space.bilibili.com/660853738/channel/index) ## 组件 Blazor 应用基于组件。 Blazor 中的组件是指 UI 元素，例如页面、对话框或数据输入窗体。 组件是内置到 .NET 程序集的 .NET 类，用来： - 定义灵活的 UI 呈现逻辑。 - 处理用户事件。 - 可以嵌套和重用。 - 可以作为 Razor 类库或 NuGet 包共享和分发。 ### 内置组件 内置组件 [传送门](https://www.blazor.zone/components) ## 分支说明 - master 稳定分支 - dev 开发功能分支 - 其他 均为临时分支 ## 演示地址 [![website](https://img.shields.io/badge/Github-海外-success.svg?logo=buzzfeed&logoColor=red&color=red)](https://argozhang.github.io) [![website](https://img.shields.io/badge/linux-主站-success.svg?logo=buzzfeed&logoColor=green)](https://www.blazor.zone) ## 浏览器支持 ![chrome](https://img.shields.io/badge/chrome->%3D57-success.svg?logo=google%20chrome&logoColor=red) ![firefox](https://img.shields.io/badge/firefox->522-success.svg?logo=mozilla%20firefox&logoColor=red) ![edge](https://img.shields.io/badge/edge->%3D16-success.svg?logo=microsoft%20edge&logoColor=blue) ![ie](https://img.shields.io/badge/ie->%3D11-success.svg?logo=internet%20explorer&logoColor=blue) ![Safari](https://img.shields.io/badge/safari->%3D14-success.svg?logo=safari&logoColor=blue) ![Andriod](https://img.shields.io/badge/andriod->%3D4.4-success.svg?logo=android) ![oper](https://img.shields.io/badge/opera->%3D4.4-success.svg?logo=opera&logoColor=red) ### 移动设备 ![ios](https://img.shields.io/badge/ios-supported-success.svg?logo=apple&logoColor=white) ![Andriod](https://img.shields.io/badge/andriod-suported-success.svg?logo=android) ![windows](https://img.shields.io/badge/windows-suported-success.svg?logo=windows&logoColor=blue) | | **Chrome** | **Firefox** | **Safari** | **Android Browser & WebView** | **Microsoft Edge** | | ------- | --------- | --------- | ------ | ------------------------- | -------------- | | **iOS** | Supported | Supported | Supported | N/A | Supported | | **Android** | Supported | Supported | N/A | Android v5.0+ supported | Supported | | **Windows 10 Mobile** | N/A | N/A | N/A | N/A | Supported | ### 桌面设备 ![macOS](https://img.shields.io/badge/macOS-supported-success.svg?logo=apple&logoColor=white) ![linux](https://img.shields.io/badge/linux-suported-success.svg?logo=linux&logoColor=white) ![windows](https://img.shields.io/badge/windows-suported-success.svg?logo=windows) | | Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | | ------- | --------- | --------- | ----------------- | -------------- | --------- | ------------- | | Mac | Supported | Supported | N/A | N/A | Supported | Supported | | Linux | Supported | Supported | N/A | N/A | N/A | N/A | | Windows | Supported | Supported | Supported, IE11+ | Supported | Supported | Not supported | ## GVP 奖杯 ![项目奖杯](https://images.gitee.com/uploads/images/2021/0112/120620_e596ac3c_554725.png "GVP.png") ## 项目截图 ![登录可查看](https://gitee.com/Longbow/Pictures/raw/master/BootstrapBlazor/Toggle.png "Toggle.png") ![登录可查看](https://gitee.com/Longbow/Pictures/raw/master/BootstrapBlazor/Toast.png "Toast.png") ![登录可查看](https://gitee.com/Longbow/Pictures/raw/master/BootstrapBlazor/Upload.png "Upload.png") ![登录可查看](https://gitee.com/Longbow/Pictures/raw/master/BootstrapBlazor/Upload2.png "Upload2.png") ![登录可查看](https://gitee.com/Longbow/Pictures/raw/master/BootstrapBlazor/Bar.png "Bar.png") ![登录可查看](https://gitee.com/Longbow/Pictures/raw/master/BootstrapBlazor/Pie.png "Pei.png") ![登录可查看](https://gitee.com/Longbow/Pictures/raw/master/BootstrapBlazor/Doughnut.png "Doughnut.png") ## 开源协议 [![Gitee license](https://img.shields.io/github/license/argozhang/bootstrapblazor.svg?logo=git&logoColor=red)](https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/master/LICENSE) ## 特别鸣谢 ### 上海智通建设发展股份有限公司 特别鸣谢胡总对本项目的鼎力赞助 **10000** 元 ## 参与贡献 1. Fork 本项目 2. 新建 Feat_xxx 分支 3. 提交代码 4. 新建 Pull Request ## 捐助 如果这个项目对您有所帮助，请扫下方二维码打赏一杯咖啡。