From 2bc40b7983ec632a70a490c12a43926845084d9e Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 12 Mar 2025 09:49:38 +0800 Subject: [PATCH 1/2] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=20readme=20?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 173 +++++++++++++----------------------------------- README.zh-CN.md | 153 +++++++++++++----------------------------- 2 files changed, 92 insertions(+), 234 deletions(-) diff --git a/README.md b/README.md index 5287331e5b6..43155b5042c 100644 --- a/README.md +++ b/README.md @@ -19,166 +19,85 @@ English | 中文 [](https://dotnetfoundation.org/projects/project-detail/bootstrap-blazor)

This project is part of the .NET Foundation and operates under their code of conduct.

-## Features -- Enterprise-class UI designed for web applications. -- A set of high-quality Blazor components out of the box. -- Supports WebAssembly-based client-side and SignalR-based server-side UI event interaction. -- Supports Progressive Web Applications (PWA). -- Build with C#, a multi-paradigm static language for an efficient development experience. -- .NET Standard 2.1 based, with direct reference to the rich .NET ecosystem. -- Supports NET5. (Server-Side, WASM) -- Seamless integration with existing ASP.NET Core MVC and Razor Pages projects. - ## Online Examples -[![website](https://img.shields.io/badge/China-https://www.blazor.zone-success.svg?color=red&logo=buzzfeed&logoColor=red)](https://www.blazor.zone) -[![website](https://img.shields.io/badge/Github-https://argozhang.github.io-success.svg?logo=buzzfeed&logoColor=green)](https://argozhang.github.io) +[![website](https://img.shields.io/badge/site-https://www.blazor.zone-success.svg?color=green&logo=buzzfeed&logoColor=red)](https://www.blazor.zone) -## Installation Guide +## Environment - Install .net core sdk [Offical website](https://dotnet.microsoft.com/download) - Install Visual Studio 2022 lastest [Offical website](https://visualstudio.microsoft.com/vs/getting-started/) -## Create a new project from the dotnet new template - -1. Install the template - -`dotnet new install Bootstrap.Blazor.Templates::*` - -2. Create the Boilerplate project with the template - -`dotnet new bbapp` - -## Install Bootstrap Blazor Project Template - -1. Download Project Template - -Microsoft Market [link](https://marketplace.visualstudio.com/items?itemName=Longbow.BootstrapBlazorUITemplate) - -2. Double Click **BootstrapBlazor.UITemplate.vsix** - -## Import Bootstrap Blazor into an existing project +## Quick Installation Guide -1. Go to the project folder of the application and install the Nuget package reference +### Install Package +``` +dotnet add package BootstrapBlazor +``` -`dotnet add package BootstrapBlazor` +### Add the following to `_Imports.razor` +``` +@using BootstrapBlazor.Components +``` -2. **Add** the `stylesheet` `javascripts` file to your main index file - `Pages/_Host.cshtml (Server)` or `wwwroot/index.html (WebAssembly)` +### Add the following to the `MainLayout.razor` +```html + + @Body + +``` - **HTML** +### Add the following to your HTML head section +it's either **index.html** or **_Layout.cshtml/_Host.cshtml/App.razor** depending on whether you're running WebAssembly or Server +```html + +``` -```HTML - - - - . . . - - - - . . . - - - - +### Add the following script at the end of the body +```html + ``` -3. Open the `~/Startup.cs` file in the and register the `Bootstrap Blazor` service: +### Add the following to the relevant sections of `Program.cs` +```csharp +builder.Services.AddBootstrapBlazor(); +``` - **C#** +## Usage +```razor + + -```csharp -namespace BootstrapBlazorAppName -{ - public class Startup +@code { + private string? _text; + private void ClickButton(MouseEventArgs e) { - public void ConfigureServices(IServiceCollection services) - { - //more code may be present here - services.AddBootstrapBlazor(); - } - - //more code may be present here + _text = DateTime.Now.ToString(); } } ``` -## Visual Studio Integration - -To create a new `Bootstrap Blazor` UI for Blazor application, use the Create New Project Wizard. The wizard detects all installed versions of `Bootstrap Blazor` for Blazor and lists them in the Version combobox—this enables you to start your project with the desired version. You can also get the latest version to make sure you are up to date. - -1. Get the Wizard - -To use the Create New Project Wizard, install the `Bootstrap Blazor` UI for Blazor Visual Studio Extensions. You can get it from the: - -- Visual Studio Marketplace (for Windows) - -2. Start the Wizard - -To start the wizard, use either of the following approaches - -### Using the Project menu: - -- Click File > New > Project. -- Find and click the C# Blazor Application option (you can use the search, or filter by Blazor templates). -- Follow the wizard. - -## Supported browsers - -![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=firefox%20browser&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) - -### Mobile devices - -![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 | - -### Desktop browsers - -![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 | - -## Screenshots +## Install CLI Template +1. Install the template +``` +dotnet new install Bootstrap.Blazor.Templates::* +``` -![Toggle](https://raw.githubusercontent.com/ArgoZhang/Images/master/BootstrapBlazor/Toggle.png "Toggle.png") -![Toast](https://raw.githubusercontent.com/ArgoZhang/Images/master/BootstrapBlazor/Toast.png "Toast.png") -![Upload](https://raw.githubusercontent.com/ArgoZhang/Images/master/BootstrapBlazor/Upload.png "Upload.png") -![Upload2](https://raw.githubusercontent.com/ArgoZhang/Images/master/BootstrapBlazor/Upload2.png "Upload2.png") -![Bar](https://raw.githubusercontent.com/ArgoZhang/Images/master/BootstrapBlazor/Bar.png "Bar.png") -![Pei](https://raw.githubusercontent.com/ArgoZhang/Images/master/BootstrapBlazor/Pie.png "Pei.png") -![Doughnut](https://raw.githubusercontent.com/ArgoZhang/Images/master/BootstrapBlazor/Doughnut.png "Doughnut.png") +2. Create the Boilerplate project with the template +``` +dotnet new bbapp +``` ## Contribution - 1. Fork 2. Create Feat_xxx branch 3. Commit 4. Create Pull Request ## Code of Conduct - This project has adopted the code of conduct defined by the Contributor Covenant to clarify expected behavior in our community. For more information see the [.NET Foundation Code of Conduct](https://dotnetfoundation.org/code-of-conduct). ## Donate - If this project is helpful to you, please scan the QR code below for a cup of coffee. diff --git a/README.zh-CN.md b/README.zh-CN.md index 27920efeeaa..b49ade2959d 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -20,27 +20,7 @@ [](https://dotnetfoundation.org/projects/project-detail/bootstrap-blazor)

该项目属于 .NET 基金会 ，并根据其 行为准则 运作。

-## 项目介绍 -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 组件库 - ## 社区与项目 - 目前 `BootstrapBlazor` 团队由六名热爱开源的技术达人组成，其中有四名 **微软最有价值专家(Microsoft MVP)** ；成立了大约 2000 人的 `Blazor 中文社区` 积极响应，只讨论 Blazor 相关技术 本组件库内置 **200** 多个组件，作者所在几家公司的项目均在重度使用，大多数组件都是在实际项目中提炼出来，非常适合国人操作习惯，大大节约开发时间，不像有些开源作品甚至作者本人都不使用，遇到问题从根本上无法解决，提交 Issue 也是让其自行解决并帮忙 PR 到其仓库 @@ -54,10 +34,9 @@ Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架： - Argo Zhang [链接地址](https://mvp.microsoft.com/en-us/PublicProfile/5004174) - Alex Chow [链接地址](https://mvp.microsoft.com/en-us/PublicProfile/5005078) - Guohao Wang [链接地址](https://mvp.microsoft.com/en-us/PublicProfile/5005089) -- Xiang ju [链接地址](https://mvp.microsoft.com/en-us/PublicProfile/5005108) +- Xiang Ju [链接地址](https://mvp.microsoft.com/en-us/PublicProfile/5005108) ## 生态伙伴 - WTM 快速开发框架，设计的核心理念就是 "尽一切可能提高开发效率"。WTM框架把常规编码结构化，重复编码自动化，它不仅是一个框架，它是强有力的生产力工具！目前 WTM 快速开发框架已深度集成 Blazor 欢迎大家使用 [传送门](https://wtmdoc.walkingtec.cn) @@ -65,51 +44,76 @@ WTM 快速开发框架，设计的核心理念就是 "尽一切可能提高开 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) +3. 获取本项目代码 [BootstrapBlazor](https://github.com/dotnetcore/BootstrapBlazor?wt.mc_id=DT-MVP-5004174) ### 克隆代码 - ```shell git clone https://github.com/dotnetcore/BootstrapBlazor.git cd BootstrapBlazor/src/BootstrapBlazor.Server dotnet run ``` -### CLI - -**Install Template** +## 快速安装指南 -```c# -dotnet new install Bootstrap.Blazor.Templates +### 安装包 +```shell +dotnet add package BootstrapBlazor ``` -**Create Project** +### 添加默认命名空间到 `_Imports.razor` +```razor +@using BootstrapBlazor.Components +``` -```shell -dotnet new bbapp +### 添加 `BootstrapBlazorRoot` 到 `MainLayout.razor` +```razor + + @Body + ``` -**Run** +### 添加样式到 HTML Head 中 +具体是 **index.html** 或者 **_Layout.cshtml/_Host.cshtml/App.razor** 取决项目类型 `WebAssembly` 还是 `Server` +```razor + +``` -```shell -dotnet run +### 增加脚本到 Html Body 结尾处 +```razor + ``` -### 项目模板 +### 增加服务 `Program.cs` +```csharp +builder.Services.AddBootstrapBlazor(); +``` -- [微软市场](https://marketplace.visualstudio.com/items?itemName=Longbow.BootstrapBlazorUITemplate) -- [码云镜像](https://gitee.com/LongbowEnterprise/BootstrapBlazorVsix/raw/master/dist/BootstrapBlazor.UITemplate.vsix) +## 用法示例 +```razor + + + +@code { + private string? _text; + private void ClickButton(MouseEventArgs e) + { + _text = DateTime.Now.ToString(); + } +} +``` -### 更多文档 +## 安装项目模板 +```cscharp +dotnet new install Bootstrap.Blazor.Templates::* +``` +## 更多文档 - [项目模板](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) @@ -128,77 +132,12 @@ dotnet run 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=firefox%20browser&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 | - +[![website](https://img.shields.io/badge/site-https://www.blazor.zone-success.svg?color=green&logo=buzzfeed&logoColor=red)](https://www.blazor.zone) ## 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/dotnetcore/BootstrapBlazor.svg?logo=git&logoColor=red)](https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/master/LICENSE) From 084dca3870a353aa2b50a416577573521b8a433a Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 12 Mar 2025 10:27:30 +0800 Subject: [PATCH 2/2] =?UTF-8?q?doc:=20=E6=9B=B4=E6=AD=A3=E5=8D=95=E8=AF=8D?= =?UTF-8?q?=E6=8B=BC=E5=86=99=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 43155b5042c..79a3c9cf101 100644 --- a/README.md +++ b/README.md @@ -24,8 +24,8 @@ English | 中文 ## Environment -- Install .net core sdk [Offical website](https://dotnet.microsoft.com/download) -- Install Visual Studio 2022 lastest [Offical website](https://visualstudio.microsoft.com/vs/getting-started/) +- Install .net core sdk [Official website](https://dotnet.microsoft.com/download) +- Install Visual Studio 2022 latest [Official website](https://visualstudio.microsoft.com/vs/getting-started/) ## Quick Installation Guide