Bootstrap实现面包屑导航。

最新推荐文章于 2024-08-23 06:08:02 发布

浅浅一笑^*^

最新推荐文章于 2024-08-23 06:08:02 发布

阅读量840

点赞数

文章标签： bootstrap css3

原文链接：https://www.runoob.com/bootstrap/bootstrap-breadcrumbs.html

版权

在这里插入图片描述
示例：

//class会被自动添加
.breadcrumb > li + li:before {
    color: #CCCCCC;
    content: "/ ";
    padding: 0 5px;
}

展示效果图:
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 面包屑导航</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	//这里有引入Jquery
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	//这里是bootstrap
	<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="#">2020</a></li>
	//class：active动态的class属性
	<li class="active">十一月</li>
</ul>

</body>
</html>

菜鸟教程:https://www.runoob.com/bootstrap/bootstrap-breadcrumbs.html