Breadcrumbs in bootstrap are used to show a queue of navigation links to tell the user where he/she is. Try the example to see how it works and for more info refer here
*****SOURCE CODE*****
<!doctype html>
<html>
<!-- head starts here -->
<head>
<meta charset="utf-8">
<title>Title here</title>
<!-- bootstrap use this meta to make our web page responsive by calculating the device size -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap linking to our html page -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
/* it removes the '/' after every item in ol.*/
.breadcrumb > li + li:before {
content: none;
}
/*it make the active link color red.*/
.breadcrumb > li > .active {
color: red;
}
</style>
</head><!-- head ends here -->
<body>
<!-- container class of bootstrap make the content of the page centralised -->
<div class="container">
<!-- row 1 starts here-->
<div class="row">
<!-- column 1 of row 1 starts here-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<h1>Implementing Breadcrumbs:</h1>
<!-- always use ordered list in breadCrumbs-->
<ol class="breadcrumb">
<li><a href="#">HOME </a><span class="glyphicon glyphicon-circle-arrow-right"></span></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#" class="active">CONTACT US</a></li>
</ol><!-- ordered list ends here-->
</div><!-- column 1 of row 1 ends here-->
</div><!--row 1 ends here-->
</div><!-- End Of div Container-->
<!-- javascript files of bootstrap. always include them at the bottom of the page this will improves the speed of our webpage-->
<!-- jquery file -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<html>
<!-- head starts here -->
<head>
<meta charset="utf-8">
<title>Title here</title>
<!-- bootstrap use this meta to make our web page responsive by calculating the device size -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap linking to our html page -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
/* it removes the '/' after every item in ol.*/
.breadcrumb > li + li:before {
content: none;
}
/*it make the active link color red.*/
.breadcrumb > li > .active {
color: red;
}
</style>
</head><!-- head ends here -->
<body>
<!-- container class of bootstrap make the content of the page centralised -->
<div class="container">
<!-- row 1 starts here-->
<div class="row">
<!-- column 1 of row 1 starts here-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<h1>Implementing Breadcrumbs:</h1>
<!-- always use ordered list in breadCrumbs-->
<ol class="breadcrumb">
<li><a href="#">HOME </a><span class="glyphicon glyphicon-circle-arrow-right"></span></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#" class="active">CONTACT US</a></li>
</ol><!-- ordered list ends here-->
</div><!-- column 1 of row 1 ends here-->
</div><!--row 1 ends here-->
</div><!-- End Of div Container-->
<!-- javascript files of bootstrap. always include them at the bottom of the page this will improves the speed of our webpage-->
<!-- jquery file -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
No comments:
Post a Comment