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

淺談Bootstrap Blazor組件的使用方法

青灯夜游轉載: 2021-06-23 11:45:534958瀏覽

Bootstrap Blazor是一套企業級UI元件庫，這篇文章給大家介紹一下安裝Blazor元件範本、在現有專案中整合BootstrapBlazor，以及Visual Studio中安裝相關外掛程式並使用的方法。

Bootstrap Blazor 是一套企業級 UI 元件庫，適應行動端支援各種主流瀏覽器，已經在多個交付項目中使用。透過本套組件可以大幅縮短開發週期，節省開發成本。目前已經開發、封裝了 70 多個組件。【相關推薦：《bootstrap教學》】

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

線上示範網站：https://www.blazor.zone

安裝指南

安裝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>
<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
    }
}

Visual Studio 外掛程式