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

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

青灯夜游転載: 2021-03-12 10:22:512697ブラウズ

この記事では、Bootstrap Blazor コンポーネントの使用法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Bootstrap Blazor は、モバイル向けに調整されたエンタープライズレベルの UI コンポーネントライブラリのセットです。サポートさまざまな主流ブラウザが複数の配信プロジェクトで使用されています。このコンポーネントのセットにより、開発サイクルが大幅に短縮され、開発コストが節約されます。現在、70 を超えるコンポーネントが開発およびパッケージ化されており、興味のある学生はぜひ試してみてください。

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

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

インストールガイド

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 (サーバー) または 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
    }
}