Step-By-Step Instructions:
1. Open the MvcApp application
2. Open the _Layout.cshtml
3. Inside the <head> tag
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<![endif]-->
The code above says to include the html5shiv.min.js and response.min.js from maxcdn.com if the browser's version is less than IE 9 with the line <!--[if lt IE 9]>. The html5shiv library supports HTML5 elements in IE and the response library supports media queries in IE. Inside the "if" condition it also tells the layout to use JQuery 1.xxx versions for IE.
The complete code should look like the following in the _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@Page.Title</title>
@RenderSection("head", required: false)
@Styles.Render("~/Content/bootstrap")
@Styles.Render("~/Content/css")
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="row">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Products <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Beverages</a></li>
<li><a href="#">Condiments</a></li>
<li><a href="#">Confections</a></li>
<li><a href="#">Dairy Products</a></li>
<li><a href="#">Grains/Cereals</a></li>
<li><a href="#">Meat/Poultry</a></li>
<li><a href="#">Produce</a></li>
<li><a href="#">Seafood</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</nav>
<div class="jumbotron" id="header-jumbotron">
<h2>Northwind Store</h2>
</div>
</header>
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
</body>
</html>
← Previous
Create A Responsive Layout With Bootstrap
Thank you for taking the time to make these instructions! They gave me a good grounding and helped jump-start my webapps.
ReplyDelete