Wanted a horizontal menu for my application. Used Bootstrap to create it using the
this http://www.bootply.com/113314 example. it is not working though. Also need help to understand how the button identifies the appropriate list without specifying id or name anywhere given the fact that there are more than one in the document
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</head>
<body>
<div align="center">
<a href="home.erp">
<img title="Home" class="img-rounded" src="images/empireSmall.png">
</a>
</div>
<div align="right">
<button class="btn btn-danger" onclick="logout()">Logout</button>
</div>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Administration
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li> Invoice Application</li>
<li> Karate Student</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
System
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li> User Application</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Just to confirm for anyone else finding the same issue - ensure jQuery is referenced prior to Bootstrap JavaScript (e.g. bootstrap.min.js), as this is a dependency.
Related
How do i make a link to antoher page with asp.net MVC? I want to link to an page named overview through my homepage(index page). I have made an view function with my HomeController. When i click "Go To View" my overview page show up. But my hyperlink still dont work on my index page. Anyone have an idea?
Thanks!
Here are my controller
public IActionResult Overview()
{
return View();
}
Here are my hyperlink
Overview
here are my overview page i want to display
#{
ViewData["Title"] = "Overview";
}
#{
ViewBag.Title = "Overview";
Layout = "~/Views/Home/Overview";
}
<h1>Overview</h1>
#RenderBody()
Code for my Layout Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>BugTracker</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<!--FontAwsome Link-->
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
</head>
<body>
#RenderBody()
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><h2>Hello<i class="fas fa-bug"></h2></i></div>
<div class="list-group list-group-flush">
Dashboard
Overview
Profile
Projects
Tickets
Status
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle"><i class="fas fa-align-justify"></i></button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-home"></i> <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-user"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-chevron-circle-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Projects</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Tickets</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Overview</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<h1 class="mt-4">Welcome User <i class="fas fa-bug"></i></h1>
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript -->
<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
Why are you using IActionResult?
Try:
public ActionResult Overview()
{
return View();
}
and in view part remove the #RendorBody(), Layout = "~/Views/Home/Overview";
use this instead :
#{
ViewData["Title"] = "Overview";
}
#{
ViewBag.Title = "Overview";
}
<h1>Overview</h1>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<!--FontAwsome Link-->
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
About the static file 404 error, I think the issue is related to the file path.
I have created a new Asp.net core 3.1 applications on my side, and try to create a new layout page using your code, generally, the client-side library (such as JQuery and Bootstrap) was installed in the lib folder as below, but in your code, you want to load the js and css file from the vender folder,
So, if I using your code, the related JS and CSS file will show 404 error. Try to check the structure in the wwwroot folder, and load the Jquery and Boostrap from the lib folder.
In my sample, I'm using the default installed library, and install the font-awesome in the lib folder, so, my custom layout as below:
_CustomLayout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>BugTracker</title>
<!-- Bootstrap core CSS -->
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="~/css/simple-sidebar.css" rel="stylesheet">
<!--FontAwsome Link-->
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
</head>
<body>
#RenderBody()
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><h2>Hello<i class="fas fa-bug"></h2></i></div>
<div class="list-group list-group-flush">
Dashboard
Overview
Profile
Projects
Tickets
Status
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle"><i class="fas fa-align-justify"></i></button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-home"></i> <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-user"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-chevron-circle-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Projects</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Tickets</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Overview</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<h1 class="mt-4">Welcome User <i class="fas fa-bug"></i></h1>
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
Code in the Home controller:
public IActionResult About()
{
return View();
}
public IActionResult OverView()
{
return View();
}
public IActionResult Privacy()
{
return View();
}
Code in the About.cshtml page (using the default layout page):
#{
ViewData["Title"] = "About";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>About</h1>
Overview
Code in the OverView.cshtml page:
#{
ViewData["Title"] = "OverView";
Layout = "~/Views/Shared/_CustomLayout.cshtml";
}
<h1>OverView</h1>
The result like this:
I am using Bootstrap 4 to toggle the collapse of dropdown menu for small screens (sm) in my navbar. But the toggling doesn't work, nothing happens when I click on the toggle button.
I made sure to import all the assets/links in correct order. Can any one see what's wrong?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<environment include="Development">
<link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</environment>
<link href="~/css/site.css" rel="stylesheet" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" asp-action="index" asp-action="home">
<img src="~/images/leon.jpg" height="30" width="30" />
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" datatarget="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a asp-action="index" asp-action="home" class="nav-link">List</a>
</li>
<li class="nav-item">
<a asp-action="create" asp-action="home" class="nav-link">Create</a>
</li>
</ul>
</div>
</nav>
<div>
#RenderBody()
</div>
</div>
#if (IsSectionDefined("Scripts"))
{
#RenderSection("Script", required: false)
}
</body>
</html>
You have a wrong syntax on datatarget, it should be data-target.
Change this:
datatarget="#collapsibleNavbar"
To this:
data-target="#collapsibleNavbar"
Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
For some reason my Navbar seems to have 0 top padding and be slightly off to the right.
The HTML is almost a directly copy & paste from the example, I cannot for the life of my figure out why it isn't working.
Messed up navbar
<%# Master Language="C#" AutoEventWireup="true"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="" />
<meta name="author" content="" />
<title>Main master</title>
</head>
<body>
<div class="container">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Test Demo</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>GitHub</li>
<li>NuGet</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Demos <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>demo</li>
<li>demo</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<asp:ContentPlaceHolder ID="ContentSection" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
You have 2 <div class="container"></div>, which both have an offset. Remove one of them and see if that solves your issue.
<%# Master Language="C#" AutoEventWireup="true"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="" />
<meta name="author" content="" />
<title>Main master</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Test Demo</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>GitHub</li>
<li>NuGet</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Demos <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>demo</li>
<li>demo</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<asp:ContentPlaceHolder ID="ContentSection" runat="server">
</asp:ContentPlaceHolder>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap would appear to need custom .css files for some properties, in this case the navbar top handling was handled by "navbar.css"
body {
padding-top: 20px;
padding-bottom: 20px;
}
.navbar {
margin-bottom: 20px;
}
creating this file and linking it in the header seemed to fix the issue.
How to create following nav/brand logo responsive behavior based on the standard bootstrap nav code, please?
Illustration: Responsive nav behavior
Code: http://www.bootply.com/8suUu6W5ZB#
Thanks for any help!
I have not used bootply before, So I don't know whether tags for html, body is included by bootply automatically. But I could not see those tags in your html, but could see styles for those. Basic structure of the html with bootstrap would like this. I have included a nav bar for you. So use this as a template to work on your project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 user-scalable=none">
<title>Trying out bootstrap </title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">A WV Gates Corporation</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Make sure to include the files of bootstrap and jquery in the appropriate paths!
I found the menu bar will overwrite some content of first line. When I click the dropdown 'first', it will locate to the first list item, but it was overwritten by menu bar. I've try apply one solution Posted in jsbin, but failed.
original html is here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap theme</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>first</li>
<li>end</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<ul>
<li id="first">first</li>
<li>a2</li><li>a3</li><li>a4</li><li>a5</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
<li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
<li id="end">end</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
SOLUTION demo (as answer)
Try this:
DEMO
Use padding top in the <li>
<li id="first" style="padding-top: 50px;">first</li>
Protip: Read the docs!
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.