Bootstrap Blazor 組件入門

本文轉載自查看原文 2020-11-30 18:33 1967 BootstrapBlazor/ Blazor

Bootstrap Blazor 是一套企業級 UI 組件庫，適配移動端支持各種主流瀏覽器，已經在多個交付項目中使用。通過本套組件可以大大縮短開發周期，節約開發成本。目前已經開發、封裝了 70 多個組件，歡迎有興趣的同學試用。

Gitee 開源地址為：https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github 開源地址為：https://github.com/ArgoZhang/BootstrapBlazor

在線演示網站：https://www.blazor.zone

安裝指南

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

項目模板

安裝模板

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

使用項目模板創建新項目

dotnet new bbapp

bbapp 是 BootstrapBlazor App 的縮寫

卸載項目模板

dotnet new -u Bootstrap.Blazor.Templates

現有項目中集成 BootstrapBlazor

從 Nuget.org 獲取 BootstrapBlazor 包

dotnet add package BootstrapBlazor

添加樣式文件與腳本到項目文件中 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>

注冊服務 ~/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
    }
}