Movatterモバイル変換

[0]ホーム
URL:

Skip to main content
⭐️ If you like Blazor Bootstrap, give it a star onGitHub! ⭐️

Getting started - Blazor WebAssembly (.NET 8)

Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks.

Install Nuget Package​

Looking to quickly addBlazor Bootstrap to your project? Use NuGet package manager.

Install-Package Blazor.Bootstrap -Version3.4.0

Add CSS references​

After the<base href="/" /> tag in thehead section of thewwwroot/index.html file, add the following references:

<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr"crossorigin="anonymous">
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<linkhref="_content/Blazor.Bootstrap/blazor.bootstrap.css"rel="stylesheet"/>

Add script references​

Insert the following references into thebody section of thewwwroot/index.html file, immediately after the_framework/blazor.webassembly.js reference:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
<!--Add chart.js referenceif chart components are usedin your application.-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--Add chartjs-plugin-datalabels.min.js referenceif chart componentswith data label feature is usedin your application.-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--Add sortable.js referenceifSortableList component is usedin your application.-->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
tip

Thechart.js reference is optional. Include it only when theChart components are used in the application.

Register services​

Add Blazor Bootstrap service in theProgram.cs

builder.Services.AddBlazorBootstrap();

Register tag helpers in_Imports.razor

@usingBlazorBootstrap;

Remove default references​

The default Blazor template includes demonstration code and Bootstrap. To remove these components, follow these steps:

  1. Delete thebootstrap folder from thewwwroot directory:

    • Delete thewwwroot/css/bootstrap folder.

  2. Remove the following line fromwwwroot/index.html file:

    <linkhref="css/bootstrap/bootstrap.min.css"rel="stylesheet"/>

Starter template​

GitHub Repo: Blazor Bootstrap - Blazor WebAssembly Standalone App (.NET 8)

Blazor Bootstrap - Blazor WebAssembly Standalone App

Sample Code​

index.html​

<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="utf-8"/>
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
<title>NET8.BlazorWebAssemblyStandaloneApp</title>
<basehref="/"/>
<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr"crossorigin="anonymous">
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<linkhref="_content/Blazor.Bootstrap/blazor.bootstrap.css"rel="stylesheet"/>
<linkrel="stylesheet"href="css/app.css"/>
<linkrel="icon"type="image/png"href="favicon.png"/>
<linkhref="NET8.BlazorWebAssemblyStandaloneApp.styles.css"rel="stylesheet"/>
</head>

<body>
<divid="app">
<svgclass="loading-progress">
<circler="40%"cx="50%"cy="50%"/>
<circler="40%"cx="50%"cy="50%"/>
</svg>
<divclass="loading-progress-text"></div>
</div>

<divid="blazor-error-ui">
        An unhandled error has occurred.
<ahref=""class="reload">Reload</a>
<aclass="dismiss">🗙</a>
</div>
<scriptsrc="_framework/blazor.webassembly.js"></script>
<scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"crossorigin="anonymous"></script>
<!-- Add chart.js reference if chart components are used in your application. -->
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"integrity="sha512-ZwR1/gSZM3ai6vCdI+LVF1zSq/5HznD3ZSTk7kajkaj4D292NLuduDCO1c/NT8Id+jE58KYLKT7hXnbtryGmMg=="crossorigin="anonymous"referrerpolicy="no-referrer"></script>
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig=="crossorigin="anonymous"referrerpolicy="no-referrer"></script>
<!-- Add sortable.js reference if SortableList component is used in your application. -->
<scriptsrc="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<scriptsrc="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
</body>

</html>

Program.cs​

usingMicrosoft.AspNetCore.Components.Web;
usingMicrosoft.AspNetCore.Components.WebAssembly.Hosting;
usingNET8.BlazorWebAssemblyStandaloneApp;

var builder= WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp=>newHttpClient{ BaseAddress=newUri(builder.HostEnvironment.BaseAddress)});

builder.Services.AddBlazorBootstrap();

await builder.Build().RunAsync();

_Imports.razor​

@usingSystem.Net.Http
@usingSystem.Net.Http.Json
@usingMicrosoft.AspNetCore.Components.Forms
@usingMicrosoft.AspNetCore.Components.Routing
@usingMicrosoft.AspNetCore.Components.Web
@usingMicrosoft.AspNetCore.Components.Web.Virtualization
@usingMicrosoft.AspNetCore.Components.WebAssembly.Http
@usingMicrosoft.JSInterop
@usingNET8.BlazorWebAssemblyStandaloneApp
@usingNET8.BlazorWebAssemblyStandaloneApp.Layout
@usingBlazorBootstrap;

MainLayout.razor​

@inheritsLayoutComponentBase

<divclass="bb-page">

<Sidebar@ref="sidebar"
IconName="IconName.BootstrapFill"
Title="Blazor Bootstrap"
DataProvider="SidebarDataProvider"/>

<main>
<divclass="bb-top-row px-4 d-flex justify-content-end">
<ahref="https://docs.microsoft.com/aspnet/"target="_blank">About</a>
</div>

<articleclass="content px-4">
<divclass="py-2">@Body</div>
</article>
</main>

</div>

@code{
Sidebar sidebar;
IEnumerable<NavItem> navItems;

privateasyncTask<SidebarDataProviderResult>SidebarDataProvider(SidebarDataProviderRequest request)
{
if(navItemsisnull)
            navItems=GetNavItems();

returnawait Task.FromResult(request.ApplyTo(navItems));
}

privateIEnumerable<NavItem>GetNavItems()
{
        navItems=newList<NavItem>
{
newNavItem{ Id="1", Href="/", IconName= IconName.HouseDoorFill, Text="Home", Match=NavLinkMatch.All},
newNavItem{ Id="2", Href="/counter", IconName= IconName.PlusSquareFill, Text="Counter"},
newNavItem{ Id="3", Href="/weather", IconName= IconName.Table, Text="Fetch Data"},
};

return navItems;
}
}
[8]ページ先頭
©2009-2025 Movatter.jp