Skip to content

doc(Readme): update content of readme #5606

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 12, 2025
Merged

doc(Readme): update content of readme #5606

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2bc40b7
doc: 更新 readme 文档
ArgoZhang Mar 12, 2025
084dca3
doc: 更正单词拼写错误
ArgoZhang Mar 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 48 additions & 129 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,166 +19,85 @@ English | <a href="README.zh-CN.md">中文</a>
[<img align="right" src="https://github.com/dotnet-foundation/swag/blob/main/logo/dotnetfoundation_v4.png?raw=true" width="68px" />](https://dotnetfoundation.org/projects/project-detail/bootstrap-blazor)
<p>This project is part of the <a href="https://www.dotnetfoundation.org/">.NET Foundation</a> and operates under their <a href="https://www.dotnetfoundation.org/code-of-conduct">code of conduct</a>. </p>

## 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)

## Installation Guide

- 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
[![website](https://img.shields.io/badge/site-https://www.blazor.zone-success.svg?color=green&logo=buzzfeed&logoColor=red)](https://www.blazor.zone)

Microsoft Market [link](https://marketplace.visualstudio.com/items?itemName=Longbow.BootstrapBlazorUITemplate)
## Environment

2. Double Click **BootstrapBlazor.UITemplate.vsix**
- 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/)

## 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
<BootstrapBlazorRoot>
@Body
</BootstrapBlazorRoot>
```

**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
<link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" />
```

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
. . .
<link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.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>
### Add the following script at the end of the body
```html
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
```

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
<Display Value="@_text"></Display>
<Button Text="Button" OnClick="@ClickButton"></Button>

```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.

<img src="https://raw.githubusercontent.com/ArgoZhang/Images/master/Donate/BarCode%402x.png" width="382px;" />
Expand Down
Loading