效果图：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>树形菜单</title>
<style>
@import "css/bootstrap.min.css";
@import "css/bootstrap-treeview.css";
</style>
<script src="js/jquery-2.0.0.min.js"></script>
<script src="js/bootstrap-treeview.js"></script>
</head>
<body>
<div id="tree" style="width: 260px;"></div>
<script>
var tree = [
{
text: "首页",
icon: "glyphicon glyphicon-home",
},
{
text: "用户管理",
icon: "glyphicon glyphicon-user",
nodes: [
{
text: "用户管理",
icon: "glyphicon glyphicon-user"
},
{
text: "角色管理",
icon: "glyphicon glyphicon-user"
},
{
text: "权限管理",
icon: "glyphicon glyphicon-user"
}
]
},
{
text: "资源管理",
icon: "glyphicon glyphicon-folder-close"
},
{
text: "运行监控",
icon: "glyphicon glyphicon-signal"
}
];
$('#tree').treeview({data: tree});
</script>
</body>
</html>bootstrap-treeview参考博客：http://www.jq22.com/jquery-info10461
bootstrap字体图标：http://www.runoob.com/bootstrap/bootstrap-glyphicons.html