526互联

BootstrapBlazor组件保姆级教程

发布时间 2023-05-03 14:45:59作者: 代码搬运工old-li

BootstrapBlazor 组件库保姆级使用教程

BootstrapBlazor组件库官网 https://www.blazor.zone/components

BootstrapBlazor组件库github仓库地址 https://github.com/dotnetcore/BootstrapBlazor

BootstrapBlazor组件库gitee仓库地址 https://gitee.com/LongbowEnterprise/BootstrapBlazor

1、先创建一个Blazor Server项目

2、在项目中添加BootstrapBlazor和BootstrapBlazor.FontAwesomenuget包
img

img

img

3、接下来在Program.cs中添加这行代码：builder.Services.AddBootstrapBlazor();
img

4、打开_Imports.razor文件，导入BootstrapBlazor组件库命名空间：@using BootstrapBlazor.Components
img

5、接下来打开Pages文件夹，打开_Host.cshtml文件，添加css和JavaScript引用

CSS 引用代码

css 引用一定要放在<link href="css/site.css" rel="stylesheet" />这行代码上面

    <!-- 引用 BootstrapBlazor.FontAwesome 字体库包 !-->
    <link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引用 BootstrapBlazor 组件库包 !-->
    <link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">

JavaScript 引用代码

    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>

img

5、接下最后一步，在App.razor文件中添加<BootstrapBlazorRoot>组件。

img

完成以上步骤后，就可以愉快的使用BootstrapBlazor组件库啦！