Bob's Blog

作为非专业做前端和美工的人，我选择用一些第三方组件库，里面有一些非常好的效果。

因为自己曾经用过bootstrap，于是选择了Bootstrap Blazor来做一些美化。当然类似的组件库还有不少，比如Ant Design Blazor，以前用vue的时候就用过ant design，也很优秀。

首先通过nuget安装BootstrapBlazor和BootstrapBlazor.FontAwesome，然后按照官方文档(https://www.blazor.zone/install-maui)配置一些修改，接着就可以用里面的组件了。

修改是：

打开wwwroot/index.html里的<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />删除掉，新增如下：

    <link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">
    <link href="_content/BootstrapBlazor/css/motronic.min.css" rel="stylesheet">

同文件最下面webview.js上面加上js的声明

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

MauiProgram.cs里builder.Build()前加上

builder.Services.AddBootstrapBlazor();

在_Imports.razor里加上

@using BootstrapBlazor.Components

接下来就把账户总览页面做出来并用上bootstrap。以前记录的django做的网页版记账就是bootstrap的样式。