【发布时间】：2021-09-15 01:30:56
【问题描述】：
BlazorWebassembly 的 VS 模板化项目包含 Bootstrap4。 任何人都可以帮助将引导程序 5 设置为 BlazorWebassembly 项目
【问题讨论】：
标签： blazor-webassembly bootstrap-5
【发布时间】：2021-09-15 01:30:56
【问题描述】：
使用开箱即用的服务器或 WASM 安装：
- 从https://getbootstrap.com/docs/5.0/getting-started/download/ 下载 Bootstrap 5 文件
- 将 wwwroot/css/bootstrap 中的 bootstrap.min.css 和 bootstrap.min.css.map 替换为 zip 中的副本/bootstrap-5.0.2/dist/css/中的文件
就是这样。据我所知，Navmenu.razor
中只有一个小的 CSS 变化第 1 行将 pl-4 替换为 ps-4 - 左边现在是开始 [s] 右边现在是结束 [e]。
<div class="top-row ps-4 navbar navbar-dark">
请注意，这将继续使用 site.css 中定义的 OpenIconic 图标。
【讨论】：
将文件复制到项目中不是正确的方法。
改为使用 Visual Studio 的内置机制。
右键单击 Blazor 项目 > 添加 > 客户端库...
作为提供商选择“unpkg”并搜索“bootstrap: Client-Side Library Dialog
在该步骤之后，您可以看到 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 的文件。在这个文件中，所有加载的库都具有其他版本号。通过右键单击该文件，您可以清理或恢复您的客户端库。
【讨论】：
有一个您可能感兴趣的 Blazor 的免费开源 Bootstrap 5 组件库 - HAVIT Blazor：
【讨论】：