AngularJS体验式编程系列文章 ，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。
张丹(Conan), 程序员Java,R,PHP,Javascript weibo：@Conan_Z
blog:&http://blog.fens.me
转载请注明出处：
http://blog.fens.me/bootstrap-angularjs-navbar/
前言 导航菜单是一个网站中必备的一个组件，不仅能给用户提供方便的网站浏览指引，还能为SEO提供良好爬取路径。基于AngularJS+Bootstrap3的网站越来越流行，应该怎么实现导航菜单呢？看本文的介绍。 目录
Bootstrap3中的导航菜单 AngularJS中的导航菜单 – 点击事件 AngularJS中的导航菜单 – 路过事件1. Bootstrap3中的导航菜单 从 Bootstrap3的文档 中我们可以看到，默认提供的导航菜单支持下拉功能，单击触发，支持2级菜单，如下图所示。
实现文档中的效果，我们可以快速创建一个静态的HTML的项目，创建细节不多解释，参考文章: 快速搭建Web环境 Angularjs + Express3 + Bootstrap3 ， bower解决js的依赖管理 创建项目目录~ mkdir D:/workspace/javascript/angular-navbar/~ cd D:/workspace/javascript/angular-navbar/创建依赖配置文件bower.json~ vi D:/workspace/javascript/angular-navbar/bower.json{ &name&: &angular-navbar&, &version&: &0.0.1&, &author&: &Conan Zhang&, &dependencies&: { }}下载依赖包~ D:/workspace/javascript/angular-navbar&bower install bootstrap --savebower bootstrap#* cached git:///twbs/bootstrap.git#3.1.1bower bootstrap#* validate 3.1.1 against git:///twbs/bootstrap.git#*bower jquery#&= 1.9.0 cached git:///jquery/jquery.git#2.1.1bower jquery#&= 1.9.0 validate 2.1.1 against git:///jquery/jquery.git#&= 1.9.0bower bootstrap#~3.1.1 install bootstrap#3.1.1bower jquery#&= 1.9.0install jquery#2.1.1bowerno-json No bower.json file to save to, use bower init to create onebootstrap#3.1.1 bower_components/bootstrap└── jquery#2.1.1创建HTML文件:page1.html~ vi D:/workspace/javascript/angular-navbar/page1.html&!DOCTYPE html&&html lang=&zh-cn&&&head& &meta charset=&utf-8&& &title&Bootstrap导航菜单&/title& &link rel=&stylesheet& href=&/bower_components/bootstrap/dist/css/bootstrap.min.css&&&/head&&body&&div class=&container&& &div class=&row&&
&nav class=&navbar navbar-default& role=&navigation&&
&div class=&navbar-header&&
&a class=&navbar-brand& href=&#&&Brand&/a&
&div class=&collapse navbar-collapse& id=&bs-example-navbar-collapse-1&&
&ul class=&nav navbar-nav&&
&li class=&active&&&a href=&#&&Link&/a&&/li&
&li&&a href=&#&&Link&/a&&/li&
&li class=&dropdown&&
&a href=&#& class=&dropdown-toggle& data-toggle=&dropdown&&Dropdown &b class=&caret&&&/b&&/a&
&ul class=&dropdown-menu&&
&li&&a href=&#&&Action&/a&&/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&
&li class=&divider&&&/li&
&li&&a href=&#&&One more separated link&/a&&/li&
&/nav& &/div&&/div&&script src=&/bower_components/jquery/dist/jquery.min.js&&&/script&&script src=&/bower_components/bootstrap/dist/js/bootstrap.min.js&&&/script&&/body&&/html& 项目目录结构： 启动静态服务器，并查看page1.html的预览效果。~ D:/workspace/javascript/angular-navbar&anywhereRunning at http://192.168.1.12:8000
第一步我们就现实了Bootstrap3的导航菜单。2. AngularJS中的导航菜单 – 点击事件接下来，我们把项目改造成AngularJS的项目，并让Bootstrap配合Angularjs一起使用，实现导航菜单的效果，并对菜单点击事件进行处理，通过切换选中菜单样式。增加Angularjs的依赖包~ D:/workspace/javascript/angular-navbar&bower install angular --save~ D:/workspace/javascript/angular-navbar&bower install angular-route --save~ D:/workspace/javascript/angular-navbar&bower install angular-bootstrap --save新建HTML文件Page2.html，通过ng-class，来设置导航菜单的选中样式。~ vi D:/workspace/javascript/angular-navbar/page2.html&!DOCTYPE html&&html lang=&zh-cn&&&head& &meta charset=&utf-8&& &title&Bootstrap导航菜单&/title& &meta name=&description& content=&Bootstrap导航菜单&& &meta http-equiv=&X-UA-Compatible& content=&IE=edge&& &meta name=&viewport& content=&width=device-width, initial-scale=1.0&& &meta name=&fragment& content=&!& /& &link rel=&stylesheet& href=&/bower_components/bootstrap/dist/css/bootstrap.min.css&&&/head&&body ng-app=&page2&&&div class=&container&& &div class=&row& ng-controller=&NavbarCtrl&&
&nav class=&navbar navbar-default& role=&navigation&&
&div class=&navbar-header&&
&a class=&navbar-brand& href=&/&&Brand&/a&
&div class=&collapse navbar-collapse& id=&bs-example-navbar-collapse-1&&
&ul class=&nav navbar-nav&&
&li ng-class=&{active:isActive('/abc')}&&&a href=&/abc&&ABC&/a&&/li&
&li ng-class=&{active:isActive('/123')}&&&a href=&/123&&123&/a&&/li&
&li ng-class=&{active:isActive('/dropdown')}& class=&dropdown&&
&a href=&/dropdown& class=&dropdown-toggle& data-toggle=&dropdown&&Dropdown &b class=&caret&&&/b&&/a&
&ul class=&dropdown-menu&&
&li&&a href=&/dropdown/label1&&label1&/a&&/li&
&li&&a href=&/dropdown/label2&&label2&/a&&/li&
&li&&a href=&/dropdown/label3&&label3&/a&&/li&
&li class=&divider&&&/li&
&li&&a href=&/dropdown/label4&&label4&/a&&/li&
&li class=&divider&&&/li&
&li&&a href=&/dropdown/label5&&label5&/a&&/li&
&/nav& &/div&&/div&&script src=&/bower_components/jquery/dist/jquery.min.js&&&/script&&script src=&/bower_components/angular/angular.min.js&&&/script&&script src=&/bower_components/bootstrap/dist/js/bootstrap.min.js&&&/script&&script src=&/bower_components/angular-route/angular-route.min.js&&&/script&&script src=&/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js&&&/script&&script src=&/js/app.js&&&/script&&/body&&/html&新建Angularjs文件控制app.js~ vi D:/workspace/javascript/angular-navbar/js/page2.html'use strict';var page2 = angular.module('page2', ['ui.bootstrap', 'ngRoute']);page2.config(['$routeProvider', '$locationProvider', '$sceProvider', function ($routeProvider, $locationProvider, $sceProvider) { $routeProvider
.when('/', {controller: 'DemoCtrl'})
.when('/abc', {controller: 'DemoCtrl'})
.when('/123', {controller: 'DemoCtrl'})
.otherwise({redirectTo: '/'}); $locationProvider.html5Mode(true);}]);page2.controller('NavbarCtrl', function ($scope, $location) { $scope.isActive = function (route) {
if ($location.path().indexOf('/dropdown') == 0) {
returnroute === '/dropdown';
return route === $location.path(); }});page2.controller('DemoCtrl', function () { // nothing}); 查看运行效果，这样就可以实现菜单选中的效果了！ 3. 导航菜单的鼠标路过事件使用AngularJS框架后，导航菜单就实现了动态的特性，通过点击实现样式的切换。Dropdown的控件需要鼠标点击，才会下拉出二级菜单，如果用鼠标路过事件就触发可能会更方便，那么下面继续对下拉列表控件改造。实现方式有好几种，比如通过jQuery增加对鼠标路过事件的监听，或者开发一个AngularJS的插件。不过，还有一种更简单的实现方式，就是通过css来控制。我们增加一段css代码。.dropdown:hover .dropdown-menu {display:}简简单单一行定义就完成了，再看看效果。当鼠标路过Dropdown时，下拉菜单就自动弹出了。
代码已上传到github： /bsspirit/angular-navbar ，同学可以根据需要自行下载，也可以直接通过命令下载代码。 git clone /bsspirit/angular-navbar.gitcd angular-navbarbower installanywhere本文介绍了导航菜单在Angularjs和Bootstrap3的结合使用，这只是第一步，下一篇文章将介绍多级导航菜单的实现。bootstrap的多级列表（树形）应该用什么方式？ - 开源中国社区
当前访客身份：游客 [
当前位置：
比如机构，怎么样来展示这个列表？
如果直接用列表看不出层级，其他的插件又和bootsrap主题不搭配。
共有6个答案
<span class="a_vote_num" id="a_vote_num_
自己动手改源码 或者写个插件
<span class="a_vote_num" id="a_vote_num_
用列表，然后做个样式！就行了！
<span class="a_vote_num" id="a_vote_num_
就没个什么bootsrap样式的插件么 ，自己写好烦
<span class="a_vote_num" id="a_vote_num_
--- 共有 2 条评论 ---
推荐用ZTree，，果然开发的，交流也方便，非常棒！
(2年前)&nbsp&
是列表，就是包括什么名称啊，简称啊，电话啊什么的
(3年前)&nbsp&
<span class="a_vote_num" id="a_vote_num_
/weblog//jquery-bootstrap-tree-list/
http://jsfiddle.net/jhfrench/GpdgF/
过去很久了，但是这两个链接可以参考
<span class="a_vote_num" id="a_vote_num_
基于bootstrap的 metronic 提供了层级的UI，很棒
更多开发者职位上
有什么技术问题吗？
AstonM...的其它问题
类似的话题Index of /debs/
Index of /debs/开发快报： 页面打印功能，websocket 强制下线功能，玩转websocket技术&&【金牌】 获取【下载地址】& &QQ:
A 代码生成器(开发利器);&& & &增删改查的处理类，service层，mybatis的 & &就不用写搬砖的代码了,生成的放到项目里，可以直接运行 B 阿里巴巴数据库连接池 &&数据库连接池&&阿里巴巴的 druid。Druid在监控、可扩展性、稳定性和性能方面都有明显的优势 C 安全权限框架 &&Shiro 是一个用 Java 语言实现的框架，通过一个简单易用的 API 提供身份验证和授权，更安全，更可靠 D ehcache 自定义二级缓存; &&是一个纯Java的进程内缓存框架，具有快速、精干等特点 &&是一种广泛使用的开源Java分布式缓存。 E 微信接口开发(2.5版本新增)（后续会加入Activiti5 工作流 ） ------------------------------------------------------------------------------------------------------------------------- 1. 模块化、服务化，流程化，耦合度低、扩展性好，灵活度高，工具类封装完整，干净利索，调用简单方便 2. 提供Rest服务，支持APP手机应用(android和ios)接口、php、.net、易语言、VB等第三方接口调用 3. 全新高大尚HTML5+css3.0+bootstrap响应式开发界面UI，( 手机 PC 平板 截图在下面)、前沿.&&spring restful 风格 4. 框架搭建完善成熟，在此基础上做过很多项目，系统具有并发处理、分布式、稳定性。 5. 系统功能完善，此为框架平台，文档、注释齐全，提供技术支持，专门供二次开发 6. 在此基础上可二次开发(OA、ERP、CRM ,医疗管理、金融、网站后台、APP后台、电子商务、商城(赠送UI)等等 7.我们这边是公司，主要业务是定制开发,&&此系统为我们平时给客户做项目用的，经过很多项目实战考验 &&-------------------------------------------------------------------------------------------------------------------------系统模块 1. 组织管理：角色管理，分角色组和成员，有组权限和成员权限。 2. 系统用户：对各个基本的组会员增删改查，单发、群发邮件短信，导入导出excel表格，批量删除 3. 会员管理：对前台用户管理，分配会员级别，到期时间，状态，联系信息等资料 4. 菜单管理：增删改查菜单 ztree（自定义菜单）业务菜单和系统菜单分离 5. 数据字典：无限级别，支持多级别无限分类。内设编号，排序等 6. 系统设置：修改系统名称，邮件服务器配置，短信账号设置，图片水印配置，微信配置 7. 代码生成：打开代码生成器模块& &&& 8. 图库管理：对批量上传的图片统一管理 9. 性能监控：监控整个系统的性能，SQL监控，SQL防火墙，URL监控，SPRING监控，SESSION监控等 10. 接口测试：POST or GET 方式检测系统接口，参数加密，json返回结果，计算服务器响应时间 11. 发送邮件：单发，群发邮件& & 12. 置二维码：生成 or&&解析二维码& &&& 13.地图工具：经纬度操作 14.即时通讯：打开即时聊天窗口 15.在线管理：(统计在线人数和在线列表，可强制某用户下线)，同一用户只能在一个客户端登录 16.打印测试：页面打印预览测试------------------------------------------------------------------------------------------------------------------------- 菜单权限：分配给每个角色不同的菜单权限, 每个角色看到的菜单不同 按钮权限：独立分配不同的角色不同的功能权限，增删改查权限分配具体到不同的菜单 支持多用户分权限管理后台,&&权限具体到不同的菜单不同的按钮 --------------------------------------------------------------------------------------------------------------信息模块(小项目代码中) 新闻管理：新闻的维护、发布、权重排序等 采用百度ueditor富文本框 公告管理：公告的维护、发布 广告管理：广告的维护、发布，状态维护，上传广告图片 友情链接：友情链接的维护、状态维护 特别推荐：特别推荐、状态维护 微信模块 关注回复：微信用户关注公众号回复 文本回复：匹配关键词进行文本回复 图文回复：匹配关键词进行图文回复 应用命令：匹配关键词进行命令操作，例如微信发送命令，执行服务器重启、关机、锁定等操作 ------------------------------------------------------------------------------------------------------------------------- 技术点 1. 导出 导入 excel 文件 2&&导出word文件 3. IO 流上传下载文件 4. 群发邮件，可以发html、纯文本格式，可以发给任意邮箱(实现批量发送广告邮件) 5. 群发or单独 发送短信，支持两种第三方短信商接口 6. spring& &aop&&事物处理 7. 代码生成器 (freemarker)， 代码 zip 压缩打包 8. MD5加密 SHA加密（登录密码用此加密）接口加密身份校验 9. 数据库连接池&&阿里的 druid。Druid在监控、可扩展性、稳定性和性能方面都有明显的优势,支持并发 10.加入安全框架 shiro (登录授权)(session管理) 11.根据汉字 解析汉字的全拼(拼音)和首字母(导入excel到用户表，根据用户的汉字姓名生成拼音的用户名) 12.app接口@ResponseBody（支持与其它语言数据交互） 13.极光推送 (推送给APP及时消息，APP不启动也能收到) 14.微信接口(身份验证，文本、图文回复等) 微信远程控制服务器重启、锁定、其它应用程序 15.java Quartz 定时器 （定时执行某程序，精确到秒，可设置周期） 16.java websocket 即时通讯技术，点对点，群聊，单聊，EXT4对话框 17.新增Lucene全文检索 18.Base64传输图片 19.图片加水印(图片水印，文字水印） 20.生成 or&&解析 二维码 21.HTML5 + JAVAEE&&WebSocket 通信技术，WebSocket 验证用户登录，强制某用户下线 22.批量异步上传图片，可预览，有进度条，支持拖拽上传(百度webuploader )。列表动态滑动放大展示。 23.ehcache 自定义二级缓存 ，选择缓存存放目录，处理并发，增加系统性能 24.服务器内部GET POST 请求 25.uploadify 上传插件，单条、批量上传多线程，带进度条，异步，图片、视频, 其它文件格式均可上传 26.地图选点获取经纬度坐标，根据俩经纬度计算距离 27.tab标签页面功能，标签自由切换，不重复操作数据库 ------------------------------------------------------------------------------------------------------------------------- 系统框架为：springmvc + mybaits 3.2 有 maven 版本和 非maven 版本 jdk 1.6 1.7 1.8&&tomcat 6 7 8 数据库：oracle 版本 和 msyql 版本 ( spring3.0 和4.02&&mybaits 3.2)& &&&开发工具：myeclipse&&eclipse 均可 赠送 同UI& && &springmvc + hibernate&&SpringSecurity Lucene Quartz MySQL、Oracle、SQL Server
------------------------------------------------------------------------------------------------------------------------- 系统演示视频：/s/1kTDvAn1 之前录的(有点粗糙, 凑合着看) qq：
-------------------------------------------------------------------------------------------------------------------- PC实物截图如下 登录界面背景用HTML5特效自动切换(百叶窗，幕布等多种切换方式)
获取【下载地址】& &QQ: &&&
、 、 、 、 、bootstrap的多级列表应该用什么方式_百度知道
bootstrap的多级列表应该用什么方式
提问者采纳
你好。 自己动手改源码 或者写个插件 用列表，然后做个样式！就订鸡斥课俪酒筹旬船莫行了！ 至于bootsrap样式的插件么 ，我反正是没见过。 如果我的回答没能帮助您，请继续追问。 ..
来自团队：
其他类似问题
为您推荐：
bootstrap的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁