ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >Bootstrap Blazor コンポーネントの使用方法に関する簡単な説明

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

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

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

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

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

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

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

インストール ガイド

  • dotnet SDK をインストールする ポータル
  • #Visual Studio 2019 v16.8 をインストールする
  • ポータル
##プロジェクト テンプレート

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

C

#
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 プラグイン

Visual Studio プラグインのインストール

インストール パッケージ

ダウンロード アドレス

https://gitee.com/Longbow/BootstrapBlazorVsix/raw/master/dist/BootstrapBlazor.UITemplate-5.0.0.zip

使用方法のチュートリアル

1. インストール パッケージをダウンロードします

2. インストール パッケージを解凍します

3. vsix プラグインをインストールします

ダブルクリック

BootstrapBlazor.UITemplate.vsix

ファイルについては、Visual Studio IDE と関連プロセスが閉じていることを確認してください。このインストール パッケージのインストール プロセスは非常に時間がかかる可能性があります。しばらくお待ちください

特別な注意

時間がかかる場合、応答がない場合は、

devenv.exe

または msbuild.exe があるかどうかを確認してください。タスク マネージャーにプロセスが表示されます。存在する場合は、手動で終了してください。

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

Visual Studio 2019

を開きます。

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

または

WebAssembly を選択し、プロジェクトを直接実行しますF5

6. 必要に応じてプロジェクト内のページを変更しますBootstrap Blazor コンポーネントの使用方法に関する簡単な説明

プログラミング関連の知識については、

プログラミング教育##を参照してください。 #! !

以上がBootstrap Blazor コンポーネントの使用方法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。