Home >Web Front-end >Bootstrap Tutorial >Does bootstrap have a tree menu?
Does bootstrap have a tree menu?
- (*-*)浩Original
- 2019-07-18 11:39:493214browse
bootstrap-treeview.js is a powerful tree menu plug-in. This article demonstrates the calling method of bootstrap-treeview.js.
It can load data all at once or asynchronously. It supports Checkbox, selectable, node cascading, etc., and can also carry big data.
How to use (recommended learning: Bootstrap video tutorial)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>treeview+bootstrap多级下拉树插件</title>
<link href="//cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.shouce-header{margin-bottom: 15px;font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;}
.shouce-icon{color: #fff;}
</style>
<!--[if IE]>
<script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div id="treeview1"></div>
<script>
var defaultData = [
{
text: 'Parent 1',
href: '#parent1',
tags: ['4'],
nodes: [
{
text: 'Child 1',
href: '#child1',
tags: ['2'],
nodes: [
{
text: 'Grandchild 1',
href: '#grandchild1',
tags: ['0']
},
{
text: 'Grandchild 2',
href: '#grandchild2',
tags: ['0']
}
]
},
{
text: 'Child 2',
href: '#child2',
tags: ['0']
}
]
},
{
text: 'Parent 2',
href: '#parent2',
tags: ['0']
},
];
$('#treeview1').treeview({
data: defaultData
});
</script>
</body>
</html>
For more Bootstrap related technical articles, please visit Bootstrap tutorial column for learning!
The above is the detailed content of Does bootstrap have a tree menu?. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Is bootstrap a js framework?Next article：Is bootstrap a js framework?