Import the "Bootstrap.css" in the head section , "jQuery.js" and "Bootstrap.js" above body end. The order of reference is first jQuery.js then Bootstrap.js.
NOTE:
1)Download the bootstrap folder structure with contents from the website.
2)Download jQuery.min.js(1.11.1) from the site then impliment it.
CSS class Tiers:
xs - Phones
sm - Tablets
md - Desktops
lg - Larger desktops
Extra small devices Phones (<768px)
Small devices Tablets (=768px)
Medium devices Desktops (=992px)
Large devices Desktops (=1200px)
Container width : None (auto) 750px 970px 1170px
Class prefix : .col-xs- .col-sm- .col-md- .col-lg-
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
.content{
min-height:355px;
max-height:auto;
}
</style>
</head>
<body>
@{Html.RenderPartial("_PartialDoctorHeader");}
<div class="content">
@RenderBody()
</div>
@{Html.RenderPartial("_PartialDoctorFooter");}
<script src="~/Scripts/jQuery.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.js"></script>
</body>
</html>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<a href="#" class="navbar-brand"><img src="~/YourLogo.png" width="170" height="35" /></a>
<div class="navbar-header">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Conact Us</a></li>
<li>@Html.ActionLink("Login","","")</li>
</ul>
</div>
</div>
</nav>
Used CSS class :
navbar-static-top : Used for removing the curve from corner.
navbar-brand: For logo or Text.
container-fluid:Used for removing left padding from header.
navbar-header:Used for Header Menus.
nav navbar-nav: Used in "ul" of menus.
navbar: Used for navigation bar in Header section.
navbar-default:Used for default color and background
navbar-inverse:Used for dark/ inverse color background
navbar-right:It aligns the elements of menu to right side.
container:It is a container for contents of page.
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Finance</a></li>
<li><a href="#">E-Kart</a></li>
<li><a href="#">chatting</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Desktop App</a></li>
</ul>
</li>
data-toggle: Property binds the dropdown elements.
Used CSS class :
dropdown: Used for showing the data in dropdown(It enables the dropdown list).
divider: Used as a separator between the menus in dropdown list.
<div class="container-fluid">
// For Mobile Device
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navbar-Menu-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 href="#" class="navbar-brand"><img src="~/Images/DoctorsToYouLogo.png" width="170" height="35" /></a>
</div>
//Put all menus under a single div and take class as "collapse navbar-collapse" and define an Id. In the navigation bar header section define a button and set the class as "navbar-toggle collapsed" and set the 'data-target' property same as the Id(prifixed by #) which is given to the div containing menus.
<div class="collapse navbar-collapse" id="Navbar-Menu-collapse" >
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Conact Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Finance</a></li>
<li><a href="#">E-Kart</a></li>
<li><a href="#">chatting</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Desktop App</a></li>
</ul>
</li>
<li>@Html.ActionLink("Login","","")</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
@*<p>This is My Footer.</p>*@
<div class="col-md-5">
<h4>Contact Address:</h4>
<address>
Plot No-2432,<br />
Ameerpet,Hydrabad,<br />
Pin-751003
</address>
</div>
</div>
<div class="bottom-footer">
<div class="col-md-5">© Copyright Doctor's Portal 2016.</div>
<div class="col-md-7">
<ul class="footer-nav">
<li>Home</li>
<li>Blog</li>
<li>Contacts</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
</footer>
Footer css:
<style type="text/css">
.content{
min-height:355px;
max-height:auto;
}
.no-margin{
margin:0px;
}
.no-padding{
padding:0px;
}
.site-footer{
background-color:#000000;
color:#fff;
margin-top:30px;
padding-top:30px;
}
.bottom-footer{
margin-top:10px;
padding-top:10px;
border-top:1px solid #b2b2b2;
color:#b2b2b2;
}
.footer-nav{
text-align:right;
list-style:none;
}
.footer-nav li{
display:inline;
}
.footer-nav li:not(:first-child):before {
content:'|';
padding: 10px;
}
.footer-nav a {
color:#b2b2b2;
}
.footer-nav a:hover {
color: #fff;
text-decoration:none;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-5">
<div class="panel panel-default">
<div class="panel-body">
<h4>The Content Header :</h4>
<p>Content :1 </p>
<p>Content :2 </p>
</div>
</div>
</div>
<div class="col-md-3 col-md-pull-8">
<div class="panel panel-default">
<div class="panel-body">
<h4>Sidebar Links :</h4>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS Used :
panel-body : It is used for displaying the content of the page with panel body margin and padding.
panel panel-default: It is used for giving border outside the content making a group.
col-md-pull-8: To pull the content to 8 columns (total columns in a row 12)
col-md-push-5: To push the content to 5 columns (total columns in a row 12)
<div class="container">
<img src="~/Images/imagecare-icon-doctor.png" height="270" width="270" class="pull-left" />
<h3 style="color:black">Online Clinic</h3>
<p>Web based clinic management is an online portal developed for multi specialty clinics. This portal allows patients to register to a clinic using Internet by entering all their details such as personal, family, insurance and past &present medical history. Patient can also fix their appointment with a physician of their choice. The physician or the staff at the clinic can access all this information. After physical examination of the patient, the physician can save all this information for future reference.</p>
<p><a class="btn btn-primary btn-lg">Learn More</a></p>
</div>
</div>
CSS Used:
pull-left:Pulling the content/element to left
<div class="row">
<div class="col-md-9 col-md-push-5">
<div class="panel panel-default">
<div class="panel-body">
<h4>The Content Header :</h4>
<p>Content Here.</p>
<p>Content Here.</p>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Employee Details :</div>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed ">
<tbody>
<tr>
<th>Emp No</th>
<th>Emp Name</th>
<th>Emp Job</th>
<th>Emp Salary</th>
</tr>
<tr>
<td>001</td>
<td>A</td>
<td>IT Manager</td>
<td class="success">40000</td>
</tr>
<tr>
<td>002</td>
<td>B</td>
<td>JR.Developer</td>
<td class="danger">12000</td>
</tr>
<tr>
<td>003</td>
<td>C</td>
<td>SR.Developer</td>
<td class="warning">32000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-3 col-md-pull-8">
<div class="panel panel-default">
<div class="panel-body">
<h4>Sidebar Links :</h4>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS Ussed :
table-striped:Used for giving background color to alternate rows.
table-bordered:Used for giving border to the table.
table-hover:Used for hover effect when mouse over.
table-condensed:It is used for the larger data contained table for reducing padding around each data in the table.
table-responsive:It is used for displaying larger tables in which the data in the smaller devices can not be arrenged properly so by using this the table will get a scrollbar for viewing the data in the small devices.
Panel CSS:
panel-body:Defines the body part of the panel. (Do not use this during table designing)
panel-heading:Defines the head section of the panel.
panel-default:It is used for providing default styling of Css.
panel-success:It is used for providing success styling of Css.
panel-info:It is used for providing Information styling of Css.
panel-warning:It is used for providing warning styling of Css.
panel-danger:It is used for providing danger styling of Css.
NOTE:
1)Download the bootstrap folder structure with contents from the website.
2)Download jQuery.min.js(1.11.1) from the site then impliment it.
CSS class Tiers:
xs - Phones
sm - Tablets
md - Desktops
lg - Larger desktops
Extra small devices Phones (<768px)
Small devices Tablets (=768px)
Medium devices Desktops (=992px)
Large devices Desktops (=1200px)
Container width : None (auto) 750px 970px 1170px
Class prefix : .col-xs- .col-sm- .col-md- .col-lg-
Structure of page :
<!DOCTYPE html><html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
.content{
min-height:355px;
max-height:auto;
}
</style>
</head>
<body>
@{Html.RenderPartial("_PartialDoctorHeader");}
<div class="content">
@RenderBody()
</div>
@{Html.RenderPartial("_PartialDoctorFooter");}
<script src="~/Scripts/jQuery.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.js"></script>
</body>
</html>
Header Section :
Now create the html template for the header as follows,<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<a href="#" class="navbar-brand"><img src="~/YourLogo.png" width="170" height="35" /></a>
<div class="navbar-header">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Conact Us</a></li>
<li>@Html.ActionLink("Login","","")</li>
</ul>
</div>
</div>
</nav>
Used CSS class :
navbar-static-top : Used for removing the curve from corner.
navbar-brand: For logo or Text.
container-fluid:Used for removing left padding from header.
navbar-header:Used for Header Menus.
nav navbar-nav: Used in "ul" of menus.
navbar: Used for navigation bar in Header section.
navbar-default:Used for default color and background
navbar-inverse:Used for dark/ inverse color background
navbar-right:It aligns the elements of menu to right side.
container:It is a container for contents of page.
DropDown List(In the menu bar) :
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Finance</a></li>
<li><a href="#">E-Kart</a></li>
<li><a href="#">chatting</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Desktop App</a></li>
</ul>
</li>
data-toggle: Property binds the dropdown elements.
Used CSS class :
dropdown: Used for showing the data in dropdown(It enables the dropdown list).
divider: Used as a separator between the menus in dropdown list.
Responsive Menubar (With Custom button):
<nav class="navbar navbar-inverse navbar-static-top" role="navigation"><div class="container-fluid">
// For Mobile Device
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navbar-Menu-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 href="#" class="navbar-brand"><img src="~/Images/DoctorsToYouLogo.png" width="170" height="35" /></a>
</div>
//Put all menus under a single div and take class as "collapse navbar-collapse" and define an Id. In the navigation bar header section define a button and set the class as "navbar-toggle collapsed" and set the 'data-target' property same as the Id(prifixed by #) which is given to the div containing menus.
<div class="collapse navbar-collapse" id="Navbar-Menu-collapse" >
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Conact Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Finance</a></li>
<li><a href="#">E-Kart</a></li>
<li><a href="#">chatting</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Desktop App</a></li>
</ul>
</li>
<li>@Html.ActionLink("Login","","")</li>
</ul>
</div>
</div>
</nav>
Footer :
<footer class="site-footer"><div class="container">
<div class="row">
@*<p>This is My Footer.</p>*@
<div class="col-md-5">
<h4>Contact Address:</h4>
<address>
Plot No-2432,<br />
Ameerpet,Hydrabad,<br />
Pin-751003
</address>
</div>
</div>
<div class="bottom-footer">
<div class="col-md-5">© Copyright Doctor's Portal 2016.</div>
<div class="col-md-7">
<ul class="footer-nav">
<li>Home</li>
<li>Blog</li>
<li>Contacts</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
</footer>
Footer css:
<style type="text/css">
.content{
min-height:355px;
max-height:auto;
}
.no-margin{
margin:0px;
}
.no-padding{
padding:0px;
}
.site-footer{
background-color:#000000;
color:#fff;
margin-top:30px;
padding-top:30px;
}
.bottom-footer{
margin-top:10px;
padding-top:10px;
border-top:1px solid #b2b2b2;
color:#b2b2b2;
}
.footer-nav{
text-align:right;
list-style:none;
}
.footer-nav li{
display:inline;
}
.footer-nav li:not(:first-child):before {
content:'|';
padding: 10px;
}
.footer-nav a {
color:#b2b2b2;
}
.footer-nav a:hover {
color: #fff;
text-decoration:none;
}
</style>
Container Including Panel :
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-5">
<div class="panel panel-default">
<div class="panel-body">
<h4>The Content Header :</h4>
<p>Content :1 </p>
<p>Content :2 </p>
</div>
</div>
</div>
<div class="col-md-3 col-md-pull-8">
<div class="panel panel-default">
<div class="panel-body">
<h4>Sidebar Links :</h4>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS Used :
panel-body : It is used for displaying the content of the page with panel body margin and padding.
panel panel-default: It is used for giving border outside the content making a group.
col-md-pull-8: To pull the content to 8 columns (total columns in a row 12)
col-md-push-5: To push the content to 5 columns (total columns in a row 12)
Jumbotron:
<div class="jumbotron"><div class="container">
<img src="~/Images/imagecare-icon-doctor.png" height="270" width="270" class="pull-left" />
<h3 style="color:black">Online Clinic</h3>
<p>Web based clinic management is an online portal developed for multi specialty clinics. This portal allows patients to register to a clinic using Internet by entering all their details such as personal, family, insurance and past &present medical history. Patient can also fix their appointment with a physician of their choice. The physician or the staff at the clinic can access all this information. After physical examination of the patient, the physician can save all this information for future reference.</p>
<p><a class="btn btn-primary btn-lg">Learn More</a></p>
</div>
</div>
CSS Used:
pull-left:Pulling the content/element to left
Table In Bootstrap:
<div class="container" style="margin:10px"><div class="row">
<div class="col-md-9 col-md-push-5">
<div class="panel panel-default">
<div class="panel-body">
<h4>The Content Header :</h4>
<p>Content Here.</p>
<p>Content Here.</p>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Employee Details :</div>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed ">
<tbody>
<tr>
<th>Emp No</th>
<th>Emp Name</th>
<th>Emp Job</th>
<th>Emp Salary</th>
</tr>
<tr>
<td>001</td>
<td>A</td>
<td>IT Manager</td>
<td class="success">40000</td>
</tr>
<tr>
<td>002</td>
<td>B</td>
<td>JR.Developer</td>
<td class="danger">12000</td>
</tr>
<tr>
<td>003</td>
<td>C</td>
<td>SR.Developer</td>
<td class="warning">32000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-3 col-md-pull-8">
<div class="panel panel-default">
<div class="panel-body">
<h4>Sidebar Links :</h4>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS Ussed :
table-striped:Used for giving background color to alternate rows.
table-bordered:Used for giving border to the table.
table-hover:Used for hover effect when mouse over.
table-condensed:It is used for the larger data contained table for reducing padding around each data in the table.
table-responsive:It is used for displaying larger tables in which the data in the smaller devices can not be arrenged properly so by using this the table will get a scrollbar for viewing the data in the small devices.
Panel CSS:
panel-body:Defines the body part of the panel. (Do not use this during table designing)
panel-heading:Defines the head section of the panel.
panel-default:It is used for providing default styling of Css.
panel-success:It is used for providing success styling of Css.
panel-info:It is used for providing Information styling of Css.
panel-warning:It is used for providing warning styling of Css.
panel-danger:It is used for providing danger styling of Css.
