将引导主题超级英雄添加到 Visual Studio 2017 C# mvc 项目中
Posted
技术标签:
【中文标题】将引导主题超级英雄添加到 Visual Studio 2017 C# mvc 项目中【英文标题】：adding bootstrap theme superhero into visual studio 2017 C# mvc project 【发布时间】：2018-08-06 12:02:21 【问题描述】：我最初有一个 vs2015 项目，我决定将主题更改为 bootstraps bootswatch 主题 superhero。我认为这很简单，因为我以前做过这个，通常是替换四个文件，两个引导 css 文件和两个引导 js 文件，一旦我替换了这些文件，它就破坏了我的下拉导航菜单。
所以我现在所做的是完全使用 vs2017 开始了一个新项目，它是一个 C# MVC 应用程序，就像微软给你的模板风格一样，它有标准的外观主题。现在我想做的就是从 bootswatch 中引入主题，所以我像过去一样替换了四个文件，低 n 看，我仍然遇到同样的问题，下拉菜单上没有'不工作。我在下面显示了一个屏幕截图：
我不能是唯一一个经历过这种情况的人，我一定仍然需要在某个地方导入一些文件，如果有人能列出他们为使其正常工作而采取的步骤，那将是真正有帮助的。我会发布代码，但老实说，在这个阶段没有任何意义，因为我没有对应用程序代码进行任何更改，也就是说我只是想使用一个新的引导主题。无论如何都要在下面包含模板代码：
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new area = "" , new @class = "navbar-brand" )
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
编辑：所以最后我决定我要使用不同的主题，如果有人得到这个工作很想知道。我查看了下面的教程，它与提供的代码的主题相同，但如果您关闭此代码，它仍然无法正常工作！菜单会下拉，但看起来和 bootswatch 上的不一样
https://social.technet.microsoft.com/wiki/contents/articles/37157.customizing-asp-net-mvc-bootstrap-templates.aspx
【问题讨论】：
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 这应该是你的汉堡按钮吧？当你点击它时它会切换菜单吗？
嗨，如果汉堡按钮是指调整页面大小时出现的按钮（堆叠 3 行），那么是的，它应该在那里，但事实并非如此。此按钮不起作用，并且当页面全屏时，下拉菜单也不会出现（如上图所示）
【参考方案1】：
试试这个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body><nav class="navbar navbar-expand-lg navbar-dark bg-primary">
@Html.ActionLink("Application name", "Index", "Home", null, new @class = "navbar-brand" )
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
如果您注意到navbar-toggler 类按钮上的切换与data-target 相关联
您也可以用其他@Html.Actionlinks 代替<a> 标签
【讨论】：
您好，感谢您的回复，我确实尝试了这个，但它没有像我预期的那样给我一个下拉菜单，当我调整页面大小时，菜单也会像引导程序正常那样缩小，但即使那么下拉菜单无法正常工作以上是关于将引导主题超级英雄添加到 Visual Studio 2017 C# mvc 项目中的主要内容，如果未能解决你的问题，请参考以下文章