bootstrap有树状菜单吗


当前第2页 返回上一页

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

<!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有树状菜单吗的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

bootstrap模态框有什么用

bootstrap和easyui区别

bootstrap基本样式介绍

bootstrap和vue的区别

统计学bootstrap用于解决什么问题

bootstrap模态框怎么关闭事件

bootstrap modal 如何关闭

如何使用bootstrap快速实现登录页面

如何替换bootstrap中的样式

jquery easyui和bootstrap的区别是什么

更多相关阅读请进入《bootstrap》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...