• 技术文章 >web前端 >Bootstrap教程

    bootstrap有树状菜单吗

    (*-*)浩(*-*)浩2019-07-18 11:42:18原创1688

    bootstrap-treeview.js是一款强大的树菜单插件,本文演示bootstrap-treeview.js的调用方法。

    它可一次性加载数据,也可异步加载。支持Checkbox,selectable,节点级联等,而且还能承载大数据。

    使用方法(推荐学习:Bootstrap视频教程

    <!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>

    更多Bootstrap相关技术文章,请访问Bootstrap教程栏目进行学习!

    以上就是bootstrap有树状菜单吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:bootstrap
    上一篇:bootstrap是js框架吗 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • easyui和bootstrap区别• bootstrap react区别• bootstrap删格系统如何理解• bootstrap col-sm col-md区别
    1/1

    PHP中文网