ホームページ > 記事 > ウェブフロントエンド > Bootstrap Blazor コンポーネントの使用方法に関する簡単な説明

Bootstrap Blazor コンポーネントの使用方法に関する簡単な説明

青灯夜游転載: 2021-06-23 11:45:534955ブラウズ

Bootstrap Blazor はエンタープライズレベルの UI コンポーネントライブラリのセットです。この記事では、Blazor コンポーネントテンプレートをインストールし、既存のプロジェクトに BootstrapBlazor を統合し、関連するプラグインをインストールして使用する方法を紹介します。 Visual Studio のメソッド。

Bootstrap Blazor は、モバイルデバイスに適合し、さまざまな主流ブラウザーをサポートするエンタープライズレベルの UI コンポーネントライブラリであり、複数の配信プロジェクトで使用されています。このコンポーネントのセットにより、開発サイクルが大幅に短縮され、開発コストが節約されます。これまでに 70 を超えるコンポーネントが開発され、パッケージ化されています。 [関連する推奨事項: "bootstrap チュートリアル "]

Gitee オープンソースのアドレス: https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github オープンソースのアドレス: https ://github .com/ArgoZhang/BootstrapBlazor

オンラインデモ Web サイト: https://www.blazor.zone

インストールガイド

dotnet SDK をインストールするポータル
ポータル

##プロジェクトテンプレート

1. テンプレートをインストールします

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

#2. プロジェクトを使用します新しいプロジェクトを作成するためのテンプレート

dotnet new bbapp

bbapp

は BootstrapBlazor App3 の略称です。プロジェクトテンプレート

dotnet new -u Bootstrap.Blazor.Templates

BootstrapBlazor を既存のプロジェクトに統合する

1. 入手します。 Nuget.org から BootstrapBlazor パッケージ

dotnet add package BootstrapBlazor

2. スタイルファイルとスクリプトをプロジェクトファイルに追加します

Pages/_Host.cshtml (サーバー)

または 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 プラグイン