Skip to content

Commit 2bc40b7

Browse files
ArgoZhangArgoZhang
committed
doc: 更新 readme 文档
1 parent 88e446f commit 2bc40b7

File tree

2 files changed

+92
-234
lines changed

2 files changed

+92
-234
lines changed

‎README.md

+46-127
Original file line numberDiff line numberDiff line change
@@ -19,166 +19,85 @@ English | <a href="README.zh-CN.md">中文</a>
1919
[<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)
2020
<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>
2121

22-
## Features
23-
- Enterprise-class UI designed for web applications.
24-
- A set of high-quality Blazor components out of the box.
25-
- Supports WebAssembly-based client-side and SignalR-based server-side UI event interaction.
26-
- Supports Progressive Web Applications (PWA).
27-
- Build with C#, a multi-paradigm static language for an efficient development experience.
28-
- .NET Standard 2.1 based, with direct reference to the rich .NET ecosystem.
29-
- Supports NET5. (Server-Side, WASM)
30-
- Seamless integration with existing ASP.NET Core MVC and Razor Pages projects.
31-
3222
## Online Examples
33-
[![website](https://img.shields.io/badge/China-https://www.blazor.zone-success.svg?color=red&logo=buzzfeed&logoColor=red)](https://www.blazor.zone)
34-
[![website](https://img.shields.io/badge/Github-https://argozhang.github.io-success.svg?logo=buzzfeed&logoColor=green)](https://argozhang.github.io)
23+
[![website](https://img.shields.io/badge/site-https://www.blazor.zone-success.svg?color=green&logo=buzzfeed&logoColor=red)](https://www.blazor.zone)
3524

36-
## Installation Guide
25+
## Environment
3726

3827
- Install .net core sdk [Offical website](https://dotnet.microsoft.com/download)
3928
- Install Visual Studio 2022 lastest [Offical website](https://visualstudio.microsoft.com/vs/getting-started/)
4029

41-
## Create a new project from the dotnet new template
42-
43-
1. Install the template
44-
45-
`dotnet new install Bootstrap.Blazor.Templates::*`
46-
47-
2. Create the Boilerplate project with the template
48-
49-
`dotnet new bbapp`
50-
51-
## Install Bootstrap Blazor Project Template
52-
53-
1. Download Project Template
54-
55-
Microsoft Market [link](https://marketplace.visualstudio.com/items?itemName=Longbow.BootstrapBlazorUITemplate)
56-
57-
2. Double Click **BootstrapBlazor.UITemplate.vsix**
58-
59-
## Import Bootstrap Blazor into an existing project
30+
## Quick Installation Guide
6031

61-
1. Go to the project folder of the application and install the Nuget package reference
32+
### Install Package
33+
```
34+
dotnet add package BootstrapBlazor
35+
```
6236

63-
`dotnet add package BootstrapBlazor`
37+
### Add the following to `_Imports.razor`
38+
```
39+
@using BootstrapBlazor.Components
40+
```
6441

65-
2. **Add** the `stylesheet` `javascripts` file to your main index file - `Pages/_Host.cshtml (Server)` or `wwwroot/index.html (WebAssembly)`
42+
### Add the following to the `MainLayout.razor`
43+
```html
44+
<BootstrapBlazorRoot>
45+
@Body
46+
</BootstrapBlazorRoot>
47+
```
6648

67-
**HTML**
49+
### Add the following to your HTML head section
50+
it's either **index.html** or **_Layout.cshtml/_Host.cshtml/App.razor** depending on whether you're running WebAssembly or Server
51+
```html
52+
<link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" />
53+
```
6854

69-
```HTML
70-
<!DOCTYPE html>
71-
<html lang="en">
72-
<head>
73-
. . .
74-
<link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css">
75-
</head>
76-
<body>
77-
. . .
78-
<script src="_framework/blazor.server.js"></script>
79-
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
80-
</body>
81-
</html>
55+
### Add the following script at the end of the body
56+
```html
57+
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
8258
```
8359

84-
3. Open the `~/Startup.cs` file in the and register the `Bootstrap Blazor` service:
60+
### Add the following to the relevant sections of `Program.cs`
61+
```csharp
62+
builder.Services.AddBootstrapBlazor();
63+
```
8564

86-
**C#**
65+
## Usage
66+
```razor
67+
<Display Value="@_text"></Display>
68+
<Button Text="Button" OnClick="@ClickButton"></Button>
8769
88-
```csharp
89-
namespace BootstrapBlazorAppName
90-
{
91-
public class Startup
70+
@code {
71+
private string? _text;
72+
private void ClickButton(MouseEventArgs e)
9273
{
93-
public void ConfigureServices(IServiceCollection services)
94-
{
95-
//more code may be present here
96-
services.AddBootstrapBlazor();
97-
}
98-
99-
//more code may be present here
74+
_text = DateTime.Now.ToString();
10075
}
10176
}
10277
```
10378

104-
## Visual Studio Integration
105-
106-
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.
107-
108-
1. Get the Wizard
109-
110-
To use the Create New Project Wizard, install the `Bootstrap Blazor` UI for Blazor Visual Studio Extensions. You can get it from the:
111-
112-
- Visual Studio Marketplace (for Windows)
113-
114-
2. Start the Wizard
115-
116-
To start the wizard, use either of the following approaches
117-
118-
### Using the Project menu:
119-
120-
- Click File > New > Project.
121-
- Find and click the C# Blazor Application option (you can use the search, or filter by Blazor templates).
122-
- Follow the wizard.
123-
124-
## Supported browsers
125-
126-
![chrome](https://img.shields.io/badge/chrome->%3D57-success.svg?logo=google%20chrome&logoColor=red)
127-
![firefox](https://img.shields.io/badge/firefox->522-success.svg?logo=firefox%20browser&logoColor=red)
128-
![edge](https://img.shields.io/badge/edge->%3D16-success.svg?logo=microsoft%20edge&logoColor=blue)
129-
![ie](https://img.shields.io/badge/ie->%3D11-success.svg?logo=internet%20explorer&logoColor=blue)
130-
![Safari](https://img.shields.io/badge/safari->%3D14-success.svg?logo=safari&logoColor=blue)
131-
![Andriod](https://img.shields.io/badge/andriod->%3D4.4-success.svg?logo=android)
132-
![oper](https://img.shields.io/badge/opera->%3D4.4-success.svg?logo=opera&logoColor=red)
133-
134-
### Mobile devices
135-
136-
![ios](https://img.shields.io/badge/ios-supported-success.svg?logo=apple&logoColor=white)
137-
![Andriod](https://img.shields.io/badge/andriod-suported-success.svg?logo=android)
138-
![windows](https://img.shields.io/badge/windows-suported-success.svg?logo=windows&logoColor=blue)
139-
140-
| | **Chrome** | **Firefox** | **Safari** | **Android Browser & WebView** | **Microsoft Edge** |
141-
| ------- | --------- | --------- | ------ | ------------------------- | -------------- |
142-
| **iOS** | Supported | Supported | Supported | N/A | Supported |
143-
| **Android** | Supported | Supported | N/A | Android v5.0+ supported | Supported |
144-
| **Windows 10 Mobile** | N/A | N/A | N/A | N/A | Supported |
145-
146-
### Desktop browsers
147-
148-
![macOS](https://img.shields.io/badge/macOS-supported-success.svg?logo=apple&logoColor=white)
149-
![linux](https://img.shields.io/badge/linux-suported-success.svg?logo=linux&logoColor=white)
150-
![windows](https://img.shields.io/badge/windows-suported-success.svg?logo=windows)
151-
152-
| | Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari |
153-
| ------- | --------- | --------- | ----------------- | -------------- | --------- | ------------- |
154-
| Mac | Supported | Supported | N/A | N/A | Supported | Supported |
155-
| Linux | Supported | Supported | N/A | N/A | N/A | N/A |
156-
| Windows | Supported | Supported | Supported, IE11+ | Supported | Supported | Not supported |
157-
158-
## Screenshots
79+
## Install CLI Template
80+
1. Install the template
81+
```
82+
dotnet new install Bootstrap.Blazor.Templates::*
83+
```
15984

160-
![Toggle](https://raw.githubusercontent.com/ArgoZhang/Images/master/BootstrapBlazor/Toggle.png "Toggle.png")
161-
![Toast](https://raw.githubusercontent.com/ArgoZhang/Images/master/BootstrapBlazor/Toast.png "Toast.png")
162-
![Upload](https://raw.githubusercontent.com/ArgoZhang/Images/master/BootstrapBlazor/Upload.png "Upload.png")
163-
![Upload2](https://raw.githubusercontent.com/ArgoZhang/Images/master/BootstrapBlazor/Upload2.png "Upload2.png")
164-
![Bar](https://raw.githubusercontent.com/ArgoZhang/Images/master/BootstrapBlazor/Bar.png "Bar.png")
165-
![Pei](https://raw.githubusercontent.com/ArgoZhang/Images/master/BootstrapBlazor/Pie.png "Pei.png")
166-
![Doughnut](https://raw.githubusercontent.com/ArgoZhang/Images/master/BootstrapBlazor/Doughnut.png "Doughnut.png")
85+
2. Create the Boilerplate project with the template
86+
```
87+
dotnet new bbapp
88+
```
16789

16890
## Contribution
169-
17091
1. Fork
17192
2. Create Feat_xxx branch
17293
3. Commit
17394
4. Create Pull Request
17495

17596
## Code of Conduct
176-
17797
This project has adopted the code of conduct defined by the Contributor Covenant to clarify expected behavior in our community.
17898
For more information see the [.NET Foundation Code of Conduct](https://dotnetfoundation.org/code-of-conduct).
17999

180100
## Donate
181-
182101
If this project is helpful to you, please scan the QR code below for a cup of coffee.
183102

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

0 commit comments

Comments
 (0)