如何将 bootstrap 5 设置到 Blazor 客户端项目

Question

BlazorWebAssembly 的 VS 模板项目包含 Bootstrap4。任何人都可以帮助将 bootstrap 5 设置到 BlazorWeb assembly 项目吗

Answer 1

将文件复制到项目中不是正确的方法。

相反，请使用 Visual Studio 的内置机制。

右键单击 Blazor 项目 > 添加 > 客户端库...

作为提供商，选择“unpkg”并搜索“bootstrap： 客户端库对话框”

完成该步骤后，您可以看到 Bootstrap 库已添加到目标位置下。也许之前删除旧的 Bootstrap 版本会更好。

在index.html中，您需要包含引导CSS文件和/或引导脚本文件...

    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />

...

    <script src="bootstrap/dist/js/bootstrap.min.js"></script>

注意。对于 Bootstrap 脚本，您还需要最新版本的 popper.js。您可以使用与 Bootstrap 相同的方式包含它，或者直接在 index.html 中引用它

 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js" integrity="sha512-BmM0/BQlqh02wuK5Gz9yrbe7VyIVwOzD1o40yi1IsTjriX/NGF37NyXHfmFzIlMmoSIBXgqDiG1VNU6kB5dBbA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

顺便说一句：在您的项目中，应该有一个名为 libman.json 的文件。在这个文件中，有所有加载的其他版本号的库。右键单击该文件，您可以清理或恢复客户端库。

Answer 2

使用开箱即用的服务器或 WASM 安装：

1. 从https://getbootstrap.com/docs/5.0/getting-started/download/下载 Bootstrap 5 文件
2. 将wwwroot/css/bootstrap中的bootstrap.min.css和bootstrap.min.css.map替换为/bootstrap-5.0.2/dist/css/中 zip 文件中的副本

就是这样。据我所知，Navmenu.razor中只有一处小的 css 更改

第 1 行用 ps-4 替换 pl-4 - 左边现在是开始 [s] 右边现在是结束 [e]。

<div class="top-row ps-4 navbar navbar-dark">

请注意，这将继续使用site.css中定义的 OpenIconic 图标。