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.FontAwesome
nuget包
3、接下来在Program.cs
中添加这行代码:builder.Services.AddBootstrapBlazor();
4、打开_Imports.razor
文件,导入BootstrapBlazor
组件库命名空间:@using BootstrapBlazor.Components
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>
5、接下最后一步,在App.razor
文件中添加<BootstrapBlazorRoot>
组件。
完成以上步骤后,就可以愉快的使用BootstrapBlazor
组件库啦!