# Bootstrap Blazor Component
## A set of enterprise-class UI components based on Bootstrap and Blazor.
[](https://github.com/ArgoZhang/BootstrapBlazor/blob/main/LICENSE)
[](https://github.com/ArgoZhang/BootstrapBlazor/actions?query=workflow%3A%22Build+Project%22+branch%3Amain)
[](https://github.com/ArgoZhang/BootstrapBlazor)
[](https://github.com/ArgoZhang/BootstrapBlazor)
[](https://codecov.io/gh/dotnetcore/BootstrapBlazor)
---
## 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
[](https://www.blazor.zone)
[](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/)
```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
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`
2. **Add** the `stylesheet` `javascripts` file to your main index file - `Pages/_Host.cshtml (Server)` or `wwwroot/index.html (WebAssembly)`
**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>
```
3. Open the `~/Startup.cs` file in the and register the `Bootstrap Blazor` service:
**C#**
```
namespace BootstrapBlazorAppName
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
//more code may be present here
services.AddBootstrapBlazor();
}
//more code may be present here
}
}
```
## 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.
BootstrapBlazor-main.zip
9 浏览量
2023-03-13
11:21:09
上传
评论
收藏 26.07MB ZIP 举报
BootstrapBlazor-main.zip （2546个子文件） 
pack.cmd 674B sync.cmd 458B push.cmd 207B run.cmd 82B bundle.cmd 17B nginx.conf 2KB NuGet.Config 256B TableTest.cs 272KB Table.razor.cs 36KB LambdaExtensions.cs 35KB Tables.razor.cs 34KB Utility.cs 33KB MenusLocalizerExtensions.cs 31KB Table.razor.Toolbar.cs 30KB UploadTest.cs 28KB EditorFormTest.cs 25KB DateTimePickerTest.cs 25KB LambadaExtensionsTest.cs 24KB CacheManager.cs 24KB UtilityTest.cs 22KB DatePickerBody.razor.cs 21KB DialogTest.cs 21KB ValidateTest.cs 21KB TreeViewTest.cs 20KB ValidateForm.razor.cs 20KB ValidateFormTest.cs 19KB Tab.razor.cs 18KB RouteTableFactory.cs 18KB Table.razor.Edit.cs 18KB ComponentProperties.cs 17KB Uploads.razor.cs 17KB TabTest.cs 17KB ValidateBase.cs 17KB DateTimeRangeTest.cs 14KB TableColumn.cs 14KB Layout.razor.cs 13KB MenuTest.cs 13KB DragDropTest.cs 13KB TreeView.razor.cs 13KB SelectTest.cs 13KB MultiSelectTest.cs 12KB DialogServiceExtensions.cs 12KB JsonStringLocalizerTest.cs 12KB Table.razor.Sort.cs 12KB RouteEntry.cs 11KB Menus.cs 11KB DateTimeRange.razor.cs 11KB TreeViews.razor.cs 11KB ButtonTest.cs 11KB MultiSelect.razor.cs 11KB TableFooterCell.razor.cs 11KB TableFilterTest.cs 11KB TemplateSegment.cs 11KB Table.razor.Localization.cs 10KB TreeNodeCacheTest.cs 10KB TransitionType.cs 10KB Trees.razor.cs 10KB LayoutTest.cs 10KB AutoFillTest.cs 10KB Selects.razor.cs 10KB DataTableDynamicContextTest.cs 10KB BootstrapInputNumber.razor.cs 10KB AutoFill.razor.cs 10KB Dropzone.razor.cs 10KB OnScreenKeyboards.razor.cs 10KB SwalTest.cs 10KB Transfer.razor.cs 9KB AutoComplete.razor.cs 9KB DataTableDynamicContext.cs 9KB Tabs.razor.cs 9KB Table.razor.Search.cs 9KB ConsoleTest.cs 9KB EditorForm.razor.cs 9KB ListViewTest.cs 9KB RibbonTabTest.cs 9KB TableDialogTest.cs 9KB AutoCompleteTest.cs 9KB Camera.razor.cs 9KB Bluetooths.razor.cs 9KB Select.razor.cs 8KB ModalDialog.razor.cs 8KB QueryParameterValueSupplier.cs 8KB CodeSnippetService.cs 8KB Timelines.razor.cs 8KB ObjectExtensionsTest.cs 8KB ObjectExtensions.cs 8KB Display.razor.cs 8KB JsonStringLocalizer.cs 8KB ITableColumnExtensionsTest.cs 8KB ITableColumnExtensions.cs 8KB DropdownTest.cs 8KB UploadFileExtensions.cs 8KB InputTest.cs 8KB UrlValueConstraint.cs 8KB TableFooterCellTest.cs 8KB Tree.razor.cs 8KB TransferTest.cs 7KB ValidateForms.razor.cs 7KB CheckboxList.razor.cs 7KB CheckboxListTest.cs 7KB共 2546 条
- 1
- 2
- 3
- 4
- 5
- 6
- 26
资源评论
