《Bootstrap多级导航栏(级联导航)的实现代码_》由会员分享，可在线阅读，更多相关《Bootstrap多级导航栏(级联导航)的实现代码_（10页珍藏版）》请在金锄头文库上搜索。
1、Bootstrap多级导航栏(级联导航)的实现代码_ 在bootstrap官方来说，导航最多就是两级，两级以上是无法实现的，大叔找了一些第三方的资料，最终找到一个不错的插件，用法上和效果上都还不错，现在和大家分享一下 先看一下，在后台系统上的显示效果 下面说一下实现的方式 .引用三个JS插件和一个CSS类库 script src=/Content/bootstraps/JS/bootstrap-submenu.js/script script src=/Content/bootstraps/JS/highlight.min.js/script script src=/Content/boots
2、traps/JS/docs.js/script link href=/Content/bootstraps/CSS/bootstrap-submenu.css rel=stylesheet / .插入对应的HTML代码块,本例子没有用法递归生成代码，用法了静态的三级结构，这样看着更清楚，真正的生产环境建议用法递归去生产菜单 ul class=nav nav-pills foreach (var item in Model) if (item.Sons != null item.Sons.Count 0) li class=dropdown a data-submenu= data-toggle
3、=dropdown tabindex=0item.MenuNamespan class=caret/span/a ul class=dropdown-menu foreach (var sub in item.Sons) if (sub.Sons != null item.Sons.Count 0) li class=dropdown-submenu a tabindex=0sub.MenuName/a ul class=dropdown-menu foreach (var inner in sub.Sons) li a href=inner.LinkUrlinner.MenuName/a /
4、li /ul /li li class=divider/li else lia href=sub.LinkUrlsub.MenuName/a/li /ul /li else lia href=item.LinkUrlitem.MenuName/a/li /ul 最终的效果就是第一个图了，值得留意的是，假如盼望每个菜单之间用法分割线，可以添加 li class=divider/li这行代码。 下面给大家推举一段代码有关Bootstrap多级级联菜单 div class=navbar navbar-fixed-top div class=navbar-inner div class=contain
5、er-fluid a data-target=.nav-collapse data-toggle=collapse class=btn btn-navbar span class=icon-bar/span span class=icon-bar/span span class=icon-bar/span /a a href=# class=brandProject name/a div class=nav-collapse ul class=nav li class=active a href=#Home/a /li li a href=#Link/a /li li a href=#Link
6、/a /li li a href=#Link/a /li li class=dropdown a data-toggle=dropdown class=dropdown-toggle href=# Dropdown b class=caret/b /a ul class=dropdown-menu li class=dropdown-submenu a href=#More options/a ul class=dropdown-menu li a href=#Second level link/a /li li a href=#Second level link/a /li li a hre
7、f=#Second level link/a /li li a href=#Second level link/a /li li class=dropdown-submenu a href=#Second level link/a ul class=dropdown-menu li a href=#3333333333/a /li /ul /li /ul /li li a href=#Another action/a /li li a href=#Something else here/a /li li class=divider/li li class=nav-headerNav heade
8、r/li li a href=#Separated link/a /li li a href=#One more separated link/a /li /ul /li /ul form action= class=navbar-search pull-left input type=text placeholder=Search class=search-query span2 /form ul class=nav pull-right li a href=#Link/a /li li class=divider-vertical/li li class=dropdown a class=
9、# href=#Menu/a /li /ul /div!- /.nav-collapse - /div /div /div hr / ul class=nav nav-pills li class=active a href=#Regular link/a /li li class=dropdown a href=# data-toggle=dropdown class=dropdown-toggle Dropdown b class=caret/b /a ul class=dropdown-menu id=menu1 li class=dropdown-submenu a href=#Mor
10、e options/a ul class=dropdown-menu li a href=#Second level link/a /li li a href=#Second level link/a /li li a href=#Second level link/a /li li a href=#Second level link/a /li li a href=#Second level link/a /li /ul /li li a href=#Another action/a /li li a href=#Something else here/a /li li class=divider/li li a href=#Separated link/a /li /ul /li li class=dropdown a href=#Menu/a /li li class=dropdown a href=#Menu/a /li /ul 以上所述是我给大家介绍的Bootstrap多级导航栏(级联导航)的实现代码，盼望对大家有所关心！ .
