Friday, July 29, 2016
In our previous blog we created a simple _Layout.cshtml file that does not have any markup just to make things simple. In this blog we will use Bootstrap to make the layout look more professional and responsive, so that it can be viewed in any screen size. The previous layout looks like screenshot below.
The Bootstrap version will look like the screenshot below.
Step-By-Step Instructions:
1. Open the NorthwindCafe.Web project
2. Now we are ready to add the header navigation to the _Layout.cshtml file, which is the layout specified as the default layout in the _ViewStart.cshtml file.
3. Open the _Layout.cshtml file, then type in the following code
The code above defines the viewpoint as the device-width, a viewport is the width of the screen used to determine how bootstrap will display the elements on the screen. The device-width viewport means that the elements will be render to the screen's device width. The rest of the code just links to Bootstrap css and JavaScript files, and jQuery. You can find these files in the wwwroot → lib folder
4. Once we have the head section defined we can define the header section of the layout.
The code above looks complicated, but it's not that complicated. First we use the bootstrap class "navbar navbar-default navbar-fixed-top" to tell the browser that we want the navbar that is fixes on the top of the screen even when the user scrolls. All we have to do is define the class and bootstrap does the rest for us. The navbar class defines the top navigation of the layout like the screenshot below
5. The following section defines the menu when the screen gets really small and the elements have to be stacked because it does not have the width to display everything horizontally.
The menu looks like the following when the screen gets really small
You will notice that in mobile mode the "Products" dropdown menu gets cutoff, we will fix this issue later on in the tutorial with our custom stylesheet.
6. Now we want to define the actual navigation bar, type in the following code to define the "Home", "About","Contact" tabs, and the "Products" drop down.
Like everything else in bootstrap we just have to call class "navbar-collapse collapse" and nest the div with the <ul> element with class "nav navbar-nav" and bootstrap picks it up applies the stylesheets and functionalities automatically. That's the great thing about bootstrap. It makes things easy, but the bad thing is a lot of the sites nowadays have the same bootstrapy look and feel to them. But it's great if you want to throw something together quickly and make it look decent.
So the code below defines the "Home", "About", and "Contact" tab
And the following code defines the "Products" dropdown menu.
7. Now we want to add a jumbotron to make the navigation stand out a little bit.
The code above produces the following output
8. To style the jumbotron we have to create our own stylesheet so that it does not interfere with the default bootstrap styles. So create a new css file in the wwwroot → css folder and give it the name Styles.css.
10. In the Styles.css file type the following code
The code above defines the margin for the navbar and the jumbotron, it also set the text color and background color for the jumbotron.
But what about the issue we had with the dropdown menu being cutoff? To solve this issue we want to add a css property of overflow: visible to the navar class. That just tells css to to make the the dropdown menu visible when it goes outside of it's container. Now you will see that the dropdown menu is displayed even in mobile mode.
9. The complete code for the _Layout.cshtml file is the following
The Bootstrap version will look like the screenshot below.
Step-By-Step Instructions:
1. Open the NorthwindCafe.Web project
2. Now we are ready to add the header navigation to the _Layout.cshtml file, which is the layout specified as the default layout in the _ViewStart.cshtml file.
3. Open the _Layout.cshtml file, then type in the following code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="~/css/Styles.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
@RenderSection("head", required: false)
</head>
The code above defines the viewpoint as the device-width, a viewport is the width of the screen used to determine how bootstrap will display the elements on the screen. The device-width viewport means that the elements will be render to the screen's device width. The rest of the code just links to Bootstrap css and JavaScript files, and jQuery. You can find these files in the wwwroot → lib folder
4. Once we have the head section defined we can define the header section of the layout.
<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>
The code above looks complicated, but it's not that complicated. First we use the bootstrap class "navbar navbar-default navbar-fixed-top" to tell the browser that we want the navbar that is fixes on the top of the screen even when the user scrolls. All we have to do is define the class and bootstrap does the rest for us. The navbar class defines the top navigation of the layout like the screenshot below
5. The following section defines the menu when the screen gets really small and the elements have to be stacked because it does not have the width to display everything horizontally.
<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>
The menu looks like the following when the screen gets really small
You will notice that in mobile mode the "Products" dropdown menu gets cutoff, we will fix this issue later on in the tutorial with our custom stylesheet.
6. Now we want to define the actual navigation bar, type in the following code to define the "Home", "About","Contact" tabs, and the "Products" drop down.
<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 -->
Like everything else in bootstrap we just have to call class "navbar-collapse collapse" and nest the div with the <ul> element with class "nav navbar-nav" and bootstrap picks it up applies the stylesheets and functionalities automatically. That's the great thing about bootstrap. It makes things easy, but the bad thing is a lot of the sites nowadays have the same bootstrapy look and feel to them. But it's great if you want to throw something together quickly and make it look decent.
So the code below defines the "Home", "About", and "Contact" tab
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a
And the following code defines the "Products" dropdown menu.
<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>
7. Now we want to add a jumbotron to make the navigation stand out a little bit.
<div class="jumbotron" id="header-jumbotron">
<h2>Northwind Cafe</h2>
</div>
The code above produces the following output
8. To style the jumbotron we have to create our own stylesheet so that it does not interfere with the default bootstrap styles. So create a new css file in the wwwroot → css folder and give it the name Styles.css.
10. In the Styles.css file type the following code
body {
}
#header-jumbotron{
background-color: #6f5499;
}
#navbar {
margin-left: 50px;
}
#header-jumbotron h2{
margin-left: 40px;
color: #fff;
margin-top: 50px;
}
The code above defines the margin for the navbar and the jumbotron, it also set the text color and background color for the jumbotron.
But what about the issue we had with the dropdown menu being cutoff? To solve this issue we want to add a css property of overflow: visible to the navar class. That just tells css to to make the the dropdown menu visible when it goes outside of it's container. Now you will see that the dropdown menu is displayed even in mobile mode.
#navbar {
margin-left: 50px;
overflow: visible;
}
9. The complete code for the _Layout.cshtml file is the following
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="~/css/Styles.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
</head>
<body>
<div>
<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 Cafe</h2>
</div>
</header>
@RenderBody()
</div>
</body>
</html>
- How To Create An ASP.NET Core Application From Scratch
- ASP.NET Core : Add jQuery, Bootstrap, AngularJS Using bower.json
- Enable MVC On ASP.NET Core Application
- ASP.NET Core : Create Our First Controller and View
- ASP.NET Core : Adding The Default View With _ViewStart.cshtml
- ASP.NET Core : Create A Responsive Layout With Bootstrap
- ASP.NET Core : Adding Font-Awesome For Northwind Cafe Navigation Icons
- ASP.NET Core : Add .json Configuration Files With Microsoft.Extensions.Configuration Library
- ASP.NET Core : Entity Framework Core Models For Northwind Cafe
- ASP.NET Core : Create The NothwindContext ( EntityFrameworkCore )
- ASP.NET Core : Configure project.json File To Support Entity Framework Core
- ASP.NET Core : Add NorthwindContext To Startup Class And Create Database
- ASP.NET Core: Seeding The NorwindCafe Database
- ASP.NET Core: Add Logging To The NorthwindCafe Application
Subscribe to:
Post Comments (Atom)
Thank You So Much, Very Helpful,
ReplyDeletehttps://www.ihost.com.pk/
Aivivu đại lý vé máy bay, tham khảo
ReplyDeletevé máy bay đi Mỹ
vé máy bay từ los angeles về việt nam
từ canada về việt nam quá cảnh ở đâu
vé máy bay từ nhật về việt nam bao nhiêu
giá vé máy bay hàn quốc về việt nam
Vé máy bay từ Đài Loan về Việt Nam
chuyến bay dành cho chuyên gia