Bootstrap Basic Tutorial

Bootstrap Plugin

Bootstrap Breadcrumb Navigation

Breadcrumbs Navigation is a display method based on the website's hierarchical information. Taking a blog as an example, breadcrumbs navigation can display the publication date, category, or tag. They represent the position of the current page in the navigation hierarchy.

Breadcrumbs Navigation in Bootstrap is a simple navigation bar with .breadcrumb unordered list with class. The separator is automatically added by the class shown below in CSS(bootstrap.min.css):

.breadcrumb > li　+　li:before　{
　　　　color: #CCCCCC;
　　　　content: ";/　";
　　　　padding: 0;　5px;
}

The following examples demonstrate the Breadcrumbs Navigation:

Online Example

Example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap Example　-　Breadcrumbs Navigation</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/script>
</head>
<body>
<ul class="breadcrumb">
	<li><a href="#">Home</a></li>
	<li><a href="#">2012</a></li>
	<li class="active">December</li>
</ul>
</body>
</html>

Test and see ‹/›

The results are as follows:

Bootstrap Pagination Bootstrap Navbar