@ -1,52 +1,150 @@
# Bootstrap Blazor Component < h1 align = "center" > Bootstrap Blazor Component< / h1 >
English | < a href = "README.zh-CN.md" > 中文< / a >
< div align = "center" >
< h2 > A set of enterprise-class UI components based on Bootstrap and Blazor.< / h2 >
[](https://github.com/ArgoZhang/BootstrapAdmin/actions?query=workflow%3A%22Auto+Build+CI%22+branch%3Amaster)
[](https://www.nuget.org/packages/BootstrapBlazor/)
[](https://www.nuget.org/packages/BootstrapBlazor/)
[](https://github.com/ArgoZhang/BootstrapBlazor/blob/master/LICENSE)
[](https://github.com/ArgoZhang/BootstrapBlazor)
[](https://github.com/ArgoZhang/BootstrapBlazor)
< / div >
---
---
## 项目介绍
English | < a href = "README.zh-CN.md" > 中文< / a >
Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：
## 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.
- Seamless integration with existing ASP.NET Core MVC and Razor Pages projects.
## Online Examples
[](https://blazor.sdgxgz.com)
[](https://argozhang.github.io)
## Installation Guide
- Install .net core sdk [Offical website ](https://dotnet.microsoft.com/download )
- Install Visual Studio 2019 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 -i Bootstrap.Blazor.Templates::*`
2. Create the Boilerplate project with the template
`dotnet new bbapp`
## Import Bootstrap Blazor into an existing project
1. Go to the project folder of the application and install the Nuget package reference
`dotnet add package BootstrapBlazor`
- 使用 C# 代替 JavaScript 来创建丰富的交互式 UI。
2. **Add** the `stylesheet` `javascripts` file to your main index file - `~/Pages/_Host.cshtml`
- 共享使用 .NET 编写的服务器端和客户端应用逻辑。
- 将 UI 呈现为 HTML 和 CSS， ，
使用 .NET 进行客户端 Web 开发可提供以下优势：
**HTML**
- 使用 C# 代替 JavaScript 来编写代码。
```HTML
- 利用现有的 .NET 库生态系统。
<!DOCTYPE html>
- 在服务器和客户端之间共享应用逻辑。
< html lang = "en" >
- 受益于 .NET 的性能、可靠性和安全性。
< head >
- 始终高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
. . .
- 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。
< link rel = "stylesheet" href = "_content/BootstrapBlazor.Chart/css/bootstrap.blazor.chart.bundle.min.css" >
< / head >
< body >
. . .
< script src = "_framework/blazor.server.js" > < / script >
< script src = "_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js" > < / script >
< / body >
< / html >
```
本项目是利用 Bootstrap 样式进行封装的 UI 组件库
3. Open the `~/Startup.cs` file in the and register the `Bootstrap Blazor` service:
## 组件
**C#**
Blazor应用基于组件。 Blazor 中的组件是指 UI 元素，例如页面、对话框或数据输入窗体。
```csharp
namespace BootstrapBlazorAppName
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
//more code may be present here
services.AddBootstrapBlazor();
}
组件是内置到 .NET 程序集的 .NET 类，用来：
//more code may be present here
- 定义灵活的 UI 呈现逻辑。
}
- 处理用户事件。
}
- 可以嵌套和重用。
```
- 可以作为 Razor 类库或 NuGet 包共享和分发。
### 内置组件
## Visual Studio Integration
内置组件 [传送门 ](http://blazor.sdgxgz.com/alerts )
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
- master 稳定分支
To use the Create New Project Wizard, install the `Bootstrap Blazor` UI for Blazor Visual Studio Extensions. You can get it from the:
- dev 开发功能分支
- publish 与演示网站同步
- 其他 均为临时分支
## 演示地址
- Visual Studio Marketplace (for Windows)
[](http://blazor.sdgxgz.com)
## 项目截图
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
### Mobile devices
| | **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
| | 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
@ -56,26 +154,15 @@ Blazor应用基于组件。 Blazor 中的组件是指 UI 元素，例如页面
## 开源协议
## Contribution
[](https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/master/LICENSE)
## 特别鸣谢
### 上海智通建设发展股份有限公司
特别鸣谢胡总对本项目的鼎力赞助 **10000** 元
< img src = "https://gitee.com/LongbowEnterprise/Pictures/raw/master/BootstrapBlazor/Donate@x2.png" width = "552px;" / >
## 参与贡献
1. Fork 本项目
1. Fork
2. 新建 Feat_xxx 分支
2. Create Feat_xxx branch
3. 提交代码
3. Commit
4. 新建 Pull Request
4. Create Pull Request
## 捐助
## Donate
如果这个项目对您有所帮助，请扫下方二维码打赏一杯咖啡。 If this project is helpful to you, please scan the QR code below for a cup of coffee.
< img src = "https://gitee.com/LongbowEnterprise/Pictures/raw/master/WeChat/BarCode@2x.png" width = "382px;" / > < img src = "https://gitee.com/LongbowEnterprise/Pictures/raw/master/WeChat/BarCode@2x.png" width = "382px;" / >
Argo
4 years ago