집 > 기사 > 웹 프론트엔드 > Bootstrap Blazor 구성 요소를 사용하는 방법에 대한 간략한 설명

Bootstrap Blazor 구성 요소를 사용하는 방법에 대한 간략한 설명

青灯夜游앞으로: 2021-06-23 11:45:534985검색

Bootstrap Blazor는 엔터프라이즈 수준 UI 구성 요소 라이브러리 세트입니다. 이 문서에서는 Blazor 구성 요소 템플릿을 설치하고, Bootstrap Blazor를 기존 프로젝트에 통합하고, Visual Studio에서 관련 플러그인을 설치 및 사용하는 방법을 소개합니다.

Bootstrap Blazor는 모바일 장치에 적합하고 다양한 주류 브라우저를 지원하는 엔터프라이즈급 UI 구성 요소 라이브러리입니다. 이 구성요소 세트는 개발 주기를 크게 단축하고 개발 비용을 절감할 수 있습니다. 지금까지 70개 이상의 구성요소가 개발 및 패키징되었습니다. [관련 추천 : "bootstrap Tutorial"]

Gitee 오픈 소스 주소 : https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github 오픈 소스 주소 : https://github.com/ArgoZhang/BootstrapBlazor

온라인 데모 웹사이트: https://www.blazor.zone

설치 가이드

dotnet SDK 설치 포털 1. 템플릿 설치

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

`dotnet new bbappbbapp`는 BootstrapBlazor App

3의 약어입니다.3. >dotnet new -u Bootstrap.Blazor.Templates

기존 프로젝트 BootstrapBlazor 통합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 插件

安装 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 구성 요소를 사용하는 방법에 대한 간략한 설명

4、打开 Visual Studio 2019

Bootstrap Blazor 구성 요소를 사용하는 방법에 대한 간략한 설명

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

1 Nuget.org에서 BootstrapBlazor 패키지를 가져옵니다 Bootstrap Blazor 구성 요소를 사용하는 방법에 대한 간략한 설명

dotnet add package BootstrapBlazor

2. 프로젝트 파일 Pages/_Host.cshtml(서버) 또는

wwwroot/index.html(WebAssembly)<p><a href="https://www.php.cn/course.html" target="_blank" textvalue="编程教学">HTML</a>rrreee</p>3. 등록 서비스 <code>~/Startup.cs

🎜🎜C#🎜rrreee🎜Visual Studio 플러그인🎜🎜Visual Studio 플러그인 설치🎜

🎜설치 패키지🎜

🎜다운로드 주소🎜🎜https: //gitee.com/Longbow/BootstrapBlazorVsix/raw/master/dist /BootstrapBlazor.UITemplate-5.0.0.zip🎜

🎜Usage Tutorial🎜

🎜1. 설치 패키지 다운로드🎜 🎜2. vsix를 설치합니다. 플러그인🎜🎜BootstrapBlazor.UITemplate.vsix 파일을 두 번 클릭하세요. Visual Studio IDE 및 관련 프로세스가 닫혀 있는지 확인하세요. 설치 패키지의 설치 프로세스입니다. 느려질 수 있으니 조금만 기다려주세요🎜🎜🎜특별한 주의🎜🎜🎜오랜 시간 동안 응답이 없으면 해당 폴더에 devenv.exe 또는 msbuild.exe가 있는지 확인하세요. 작업 관리자 프로세스가 있으면 수동으로 종료해주세요🎜🎜 Bootstrap Blazor 구성 요소를 사용하는 방법에 대한 간략한 설명