首页 > 文章 > web前端 > 浅谈Bootstrap Blazor组件的用法

浅谈Bootstrap Blazor组件的用法

青灯夜游转载: 2021-03-12 10:22:512656浏览

本篇文章给大家介绍一下Bootstrap Blazor组件的用法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

安装指南

安装 dotnet SDK 传送门
安装 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 (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>

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
    }
}