Client Side

Component reference

There are many ways to reference components, please refer to Installation

.NET CLI
dotnet add package BootstrapBlazor --version 5.11.2-beta06
CSS file

Add the Bootstrap CSS file in the form of <link> tags to the wwwroot/index.html file <head> tags, and place them in all Before other style sheets.

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">
JS file

Many components provided by Bootstrap rely on JavaScript to run. Specifically, these components rely on jQuery, Popper.js, and our own JavaScript plug-ins. Put the following <script> tag at the end of the wwwroot/index.html file and before the </body> tag, it will work.

<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>

Add the namespace to the _Imports.razor file

@using BootstrapBlazor.Components

Registration Service

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");
        builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

        // Add this line of code
        builder.Services.AddBootstrapBlazor();

        await builder.Build().RunAsync();
    }
}

Use components

Reference the BootstrapBlazor component in the razor component

<Button Color='Color.Primary'>Button</Button>
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload