Heim > Web-Frontend > Bootstrap-Tutorial > Eine kurze Diskussion über die Verwendung von Bootstrap Blazor-Komponenten

Eine kurze Diskussion über die Verwendung von Bootstrap Blazor-Komponenten

青灯夜游
Freigeben: 2021-03-12 10:22:51
nach vorne
2709 Leute haben es durchsucht

Dieser Artikel stellt Ihnen die Verwendung der Bootstrap Blazor-Komponente vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Eine kurze Diskussion über die Verwendung von Bootstrap Blazor-Komponenten

Verwandte Empfehlungen: „Bootstrap-Tutorial

Bootstrap Blazor ist eine Reihe von UI-Komponentenbibliotheken auf Unternehmensebene, die an mobile Geräte angepasst sind, verschiedene gängige Browser unterstützen und in mehreren Bereitstellungsprojekten verwendet wurden. Dieser Komponentensatz kann den Entwicklungszyklus erheblich verkürzen und Entwicklungskosten sparen. Derzeit wurden mehr als 70 Komponenten entwickelt und verpackt, und interessierte Studierende sind herzlich willkommen, es auszuprobieren.

Gitee Die Open-Source-Adresse lautet: https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github Die Open-Source-Adresse lautet: https://github.com/ArgoZhang/BootstrapBlazor

Online-Demo-Website: https://www .blazor.zone

Installationsanleitung

  • Installieren Sie das Dotnet SDK-Portal
  • Installieren Sie Visual Studio 2019 v16.8+ Portal

Projektvorlagen

1. Installieren Sie Vorlagen

dotnet new -i Bootstrap.Blazor. Vorlagen: :*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 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>
Nach dem Login kopieren

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
    }
}
Nach dem Login kopieren

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 进程,如果有请手动结束

Eine kurze Diskussion über die Verwendung von Bootstrap Blazor-KomponentenEine kurze Diskussion über die Verwendung von Bootstrap Blazor-KomponentenEine kurze Diskussion über die Verwendung von Bootstrap Blazor-Komponenten

4、打开 Visual Studio 2019

Eine kurze Diskussion über die Verwendung von Bootstrap Blazor-KomponentenEine kurze Diskussion über die Verwendung von Bootstrap Blazor-KomponentenEine kurze Diskussion über die Verwendung von Bootstrap Blazor-KomponentenEine kurze Diskussion über die Verwendung von Bootstrap Blazor-Komponenten

5、选中 Server 或者 WebAssembly 工程直接运行 F5

Eine kurze Diskussion über die Verwendung von Bootstrap Blazor-Komponenten2. Erstellen Sie ein neues Projekt mit der Projektvorlage

dotnet new bbapp

bbapp ist die Abkürzung für BootstrapBlazor App3 Deinstallieren Sie die Projektvorlage

🎜dotnet new -u Bootstrap.Blazor.Templates🎜

Integrieren Sie BootstrapBlazor in bestehende Projekte🎜🎜1. Holen Sie sich das BootstrapBlazor-Paket von Nuget.org🎜 🎜dotnet add package BootstrapBlazor🎜🎜2. Fügen Sie Stildateien und Skripte zur Projektdatei Pages/_Host.cshtml (Server) oder wwwroot/index.html hinzu ( WebAssembly)🎜🎜HTML🎜rrreee🎜3. Registrierungsdienst ~/Startup.cs🎜🎜C#🎜rrreee

Visual Studio-Plug-in

🎜Installieren Sie das Visual Studio-Plug-in🎜

Installationspaket

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

Nutzungsanleitung

🎜1. Laden Sie das Installationspaket herunter🎜🎜3. Installieren Sie das vsix-Plugin🎜🎜Doppelklicken Sie auf das BootstrapBlazor.UITemplate. vsix-Datei, stellen Sie bitte sicher, dass Visual Studio IDE und zugehörige Prozesse geschlossen sind. Der Installationsprozess dieses Installationspakets kann sehr langsam sein. Bitte achten Sie besonders darauf, dass dies der Fall ist Wenn längere Zeit keine Antwort erfolgt, überprüfen Sie bitte, ob ein Prozess devenv.exe oder msbuild.exe vorhanden ist. Wenn es einen gibt, beenden Sie ihn bitte manuell🎜🎜Eine kurze Diskussion über die Verwendung von Bootstrap Blazor-KomponentenEine kurze Diskussion über die Verwendung von Bootstrap Blazor-KomponentenEine kurze Diskussion über die Verwendung von Bootstrap Blazor-Komponenten🎜🎜4. Öffnen Sie Visual Studio 2019 🎜🎜Eine kurze Diskussion über die Verwendung von Bootstrap Blazor-KomponentenEine kurze Diskussion über die Verwendung von Bootstrap Blazor-KomponentenEine kurze Diskussion über die Verwendung von Bootstrap Blazor-KomponentenEine kurze Diskussion über die Verwendung von Bootstrap Blazor-Komponenten🎜🎜5. Wählen Sie Server oder WebAssembly und führen Sie das Projekt direkt aus F5🎜🎜🎜🎜🎜6 Im Projekt Ändern Sie die Seite entsprechend Ihren eigenen Bedürfnissen🎜🎜Für weitere programmierbezogene Kenntnisse, Bitte besuchen Sie: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Verwendung von Bootstrap Blazor-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage