css - 如何在 razor pages 应用程序中安装和引用 bootstrap 版本 5
问题描述
我怀疑这很简单,但我搜索并没有找到和/或不明白。我正在开发 Razor Pages 应用程序来学习 Web 开发,并且我正在尝试在 _Layout.cshtml 中放置一个导航栏,但是虽然它的默认声明工作正常,但如果我将其更改为“navbar-inverse”引导程序类然后它不再工作了。我想它是否可能是引导程序的版本,然后我将最新的(引导程序 5)安装为 Nuget 包。我现在需要的是如何在我的 _Layout.cshtml 文件(<link rel="..." 和 <script src="...")中引用新版本的引导程序 5,并且我想从文件中引用系统(或任何有效的系统)。另外,我希望您确认我的代码中的问题是否实际上是由于 bootstrap 旧版本。带有“
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - WebAppPersonas</title>
<link rel="stylesheet" href="~/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="~/lib/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script src="~/js/bootstrap.js"> </script>
@RenderSection("Head", false)
</head>
<body>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<header>
<nav class="navbar navbar-inverse">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">WebAppPersonas</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - WebAppPersonas - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
提前谢谢你巴勃罗
解决方案
从 nuget 使用引导程序时,您可以使用解决方案资源管理器查看 nuget 文件所在的位置。点击Dependencies
> Packages
> bootstrap
> Content Files
。
在那里,您应该会看到如下图所示的链接:any/any/wwwroot/css/bootstrap.css
。由于 asp.net 核心在默认情况下将 wwwroot 文件夹中的静态文件存储并查找为根文件夹,因此您的 css 链接将如下所示:
<link rel="stylesheet" href="~/css/bootstrap.css" />
js文件的模拟:
<script src="~/js/bootstrap.bundle.min.js"></script>
推荐阅读
- r - 如何合并R中具有不同列名的两个数据集?
- ios - 为什么 UIAccessibilityNotification 不转向正确的论点?
- powershell - 使用 GitHub 包注册表作为 PowerShell 包存储库
- quarkus - Quarkus 异常处理程序
- java - 在 Chrome 中运行 selenium 测试用例时无法从弹出框加载扩展
- node.js - Mongodb服务器选择超时与nginx,nodejs
- docker - 有没有办法查看完整的 Docker 映像继承?
- swift - 是否可以使用 SwiftUI 将键盘上的“返回”键更改为“完成”?
- c# - 用重复的代码重构静态类c#
- python - 合并排序算法中的中断递归