首頁 > 文章 > web前端 > 淺談Bootstrap Blazor組件的用法

淺談Bootstrap Blazor組件的用法

青灯夜游轉載: 2021-03-12 10:22:512662瀏覽

這篇文章跟大家介紹一下Bootstrap Blazor元件的用法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

安裝指南

安裝dotnet SDK 傳送門
安裝Visual Studio 2019 v16.8 傳送門

專案範本

1、安裝範本

dotnet new -i Bootstrap.Blazor.Templates::*

2、使用專案範本建立新專案

dotnet new bbapp

bbapp 是BootstrapBlazor App 的縮寫

3、卸載專案範本

dotnet new -u Bootstrap.Blazor.Templates

現有專案中整合BootstrapBlazor

1、從Nuget.org 取得BootstrapBlazor 套件

dotnet add package BootstrapBlazor

2、新增樣式檔案與腳本到專案檔案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、註冊服務~/Startup. cs

namespace BootstrapBlazorAppName
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            //more code may be present here
            services.AddBootstrapBlazor(); 
        }

        //more code may be present here
    }
}