Skip to content

doc(Readme): update component readme doc #695

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
ArgoZhang merged 2 commits into from
Nov 13, 2025
Merged

doc(Readme): update component readme doc #695

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
35d070a
chore: 增加 readme 文件链接
ArgoZhang Nov 13, 2025
feb933c
chore: 更新组件 readme
ArgoZhang Nov 13, 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
5 changes: 4 additions & 1 deletion BootstrapBlazor.Extensions.slnx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
<File Path=".gitignore" />
<File Path="exclusion.dic" />
</Folder>
<Folder Name="/docs/">
<File Path="README.md" />
<File Path="README.zh-CN.md" />
Comment on lines +12 to +13
Copy link

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The solution file references README.md and README.zh-CN.md in the /docs/ folder, but these files do not appear to exist in the repository. This will cause build or solution loading issues. Please ensure these files are created or remove these references from the solution file.

Suggested change
<File Path="README.md" />
<File Path="README.zh-CN.md" />

Copilot uses AI. Check for mistakes.
</Folder>
<Folder Name="/props/">
<File Path="Directory.Build.props" />
</Folder>
Expand Down Expand Up @@ -98,7 +102,6 @@
<Project Path="src/middleware/BootstrapBlazor.Middleware/BootstrapBlazor.Middleware.csproj" />
</Folder>
<Folder Name="/src/props/">
<File Path="src/.gitignore" />
<File Path="src/Directory.Build.props" />
<File Path="src/Directory.Build.targets" />
<File Path="src/Frameworks.props" />
Expand Down
118 changes: 47 additions & 71 deletions src/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,103 +16,79 @@
- 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)
- .NET 6.0, with direct reference to the rich .NET ecosystem.
- 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=green)](https://www.blazor.zone)
[![website](https://img.shields.io/badge/China-https://www.blazor.zone-success.svg?logo=buzzfeed&logoColor=green)](https://www.blazor.zone)

## Installation Guide

- Install .net core sdk [Official website](https://dotnet.microsoft.com/download)
- Install Visual Studio 2019 lastest [Official website](https://visualstudio.microsoft.com/vs/getting-started/)
- Install Visual Studio lastest [Official website](https://visualstudio.microsoft.com/vs/getting-started/)
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (typo): Typo: 'lastest' should be 'latest'.

Update the installation guide to use 'latest' instead of 'lastest'.

Suggested change
- Install Visual Studio lastest [Official website](https://visualstudio.microsoft.com/vs/getting-started/)
- Install Visual Studio latest [Official website](https://visualstudio.microsoft.com/vs/getting-started/)

Copy link

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spelling error: "lastest" should be "latest"

Suggested change
- Install Visual Studio lastest [Official website](https://visualstudio.microsoft.com/vs/getting-started/)
- Install Visual Studio latest [Official website](https://visualstudio.microsoft.com/vs/getting-started/)

Copilot uses AI. Check for mistakes.

```shell
git clone https://github.com/dotnetcore/BootstrapBlazor.git
cd BootstrapBlazor/src/BootstrapBlazor.Server
dotnet run
```

## Create a new project from the dotnet new template
## Quick Installation Guide

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

1. Go to the project folder of the application and install the Nuget package reference

`dotnet add package BootstrapBlazor`
### Install Package
```
dotnet add package BootstrapBlazor
```

2. **Add** the `stylesheet` `javascripts` file to your main index file - `Pages/_Host.cshtml (Server)` or `wwwroot/index.html (WebAssembly)`
### Add the following to `_Imports.razor`
```
@using BootstrapBlazor.Components
```

**HTML**
### Add the following to the `MainLayout.razor`
```html
<BootstrapBlazorRoot>
@Body
</BootstrapBlazorRoot>
```

### 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
Copy link

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Grammar issue: The sentence should start with a capital letter. Change "it's either" to "It's either".

Suggested change
it's either **index.html** or **_Layout.cshtml/_Host.cshtml/App.razor** depending on whether you're running WebAssembly or Server
It's either **index.html** or **_Layout.cshtml/_Host.cshtml/App.razor** depending on whether you're running WebAssembly or Server

Copilot uses AI. Check for mistakes.
```html
<link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" />
```
<!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>

```
namespace BootstrapBlazorAppName
{
public class Startup
@code {
private string? _text;
Copy link

Copilot AI Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The comment in the code example includes a nullable reference type annotation (string?), but there's no documentation explaining that this requires nullable reference types to be enabled in the project settings. Consider adding a note about this requirement or removing the ? to avoid confusion for users who may not have nullable reference types enabled.

Suggested change
private string? _text;
private string _text;

Copilot uses AI. Check for mistakes.
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:
## Install CLI Template
1. Install the template
```
dotnet new install Bootstrap.Blazor.Templates::*
```

- 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.
2. Create the Boilerplate project with the template
```
dotnet new bbapp
```
Loading