adding bootstrap theme superhero into visual studio 2017 C# mvc project
Question
I originally had a vs2015 project and I decided to change the theme to bootstraps bootswatch theme superhero. I presumed it was simple enough as I've done this before, usually a case of replacing four files, being two bootstrap css files and two bootstrap js files, once I replaced these it broke my drop-down navigation menu.
So what I've done now is completely started a new project using vs2017, it's an C# MVC app, like the template-style one Microsoft gives you, it has the standard-ish looking theme. Now all I want to do is start by introducing the theme from bootswatch, so I replace the four files like I have done in the past and low n behold I'm still getting the same issue, the menu on the drop-down doesn't work. I have shown a screenshot below:
I can't be the only one who has experienced this, I must still be needing to import some files somewhere, if anyone can list the steps they have taken to get it working that would really help. I would post code but to be honest there is no point at this stage as I'm not making any changes to the app code per-say I'm just wanting to use a new bootstrap theme. Shall include the template code anyway below:
_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>
Edit: So in the end I've decided I'm going to use a different theme, if anyone ever gets this working would love to know. I checked out the tutorial below, it is the same theme with code provided though if you down this code it still doesn't work! The menu will dropdown but doesn't look the same as it does on bootswatch
1 answers
solution1
0 2018-02-26 23:52:31
Try this
<!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>
If you notice the toggle on the button of class navbar-toggler is associated with the data-target
You can also place other @Html.Actionlink s in place of the <a> tags
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.