响应式折叠导航栏（折叠式车载导航）
本篇文章给大家谈谈响应式折叠导航栏，以及折叠式车载导航对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
bootstrap响应式导航怎么设置折叠的大小？
做法：为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 div 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。
拓展：
1、Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
2、Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
手机端底部导航栏响应式怎么设置
第一步，打开手机“设置”选项。
第二步，在设置列表页面中，打开“系统”选项。
第三步，在系统设置页面中，打开“系统导航”选项。
第四步，在系统导航设置页面中，打开“导航栏”选项。
第五步，在导航栏设置页面中，选择合适“导航栏样式”即可。
折叠形左侧导航栏
一、准备元件
1、打开 Axure 新建文件，从元件栏拖出4个矩形1，左对齐从上往下摆放。宽度一致，为 200 px。高度分别为 80 px，45 px，30 px，30 px;
2、双击矩形，在矩形内分别输入“后台管理”，“用户管理”，“角色列表”，“账户列表”；
3、第2个矩形是一级导航栏，设置背景颜色为 #545C64，字体颜色为 #FFFFF。接着添加1个icon图标，w 30px,h 20px。然后选中矩形、图标，右键组合，并命名为“一级导航_用户管理组合”。
4、第3个矩形是二级导航栏，设置背景色为 #FFFFFF，字体颜色为 #333333.。
5、第4个矩形同样设置。
完成了以上动作，就可以得到一下的展示，看图：
二、设置交互样式
1、全选“角色列表、账户列表 ”，右键点击 交互样式设置 ，选择鼠标悬停 – 填充颜色 – 色值为 #F2F2F2，然后再选 选中 – 填充颜色 – 色值 #AAAAAA 。如图：
2、继续全选“角色列表、账户列表 ”，右键点击设置选项组名称 ，命名为“二级导航_用户管理选项组合”。选择“角色列表”，右键点击 选中（ 默认选中 ），完成 。
三、设置交互用例
1、选择“角色列表 ”，设置鼠标点击时 – 选中 – 选择 This 为 ture ，点击确定。添加目标，选中元件“一级导航_用户管理组合”，选择为true，点击确定。
2、 “账户列表”同上设置，复制粘贴过去即可 。
完成以上设置，我们的选项就可以点击切换的效果了。
3、把 “角色列表、账户列表 ” 选中，右键点击 转换为动态面板，命名为 “二级导航_用户管理选项动面 ” ，点击把该面板隐藏。
4、选中“一级导航_用户管理组合” ，新建交互 – 设置鼠标单击时 – 显示/隐藏 ，选择目标元件“二级导航_用户管理选项组合”；选择：切换，动画：显示时向下滑动 / 隐藏时向上滑动，动画为：线性，250 毫秒 ； 勾上置于顶层 ； 选择：推动元件，方向为下方，动画为：线性，250毫秒。
4、选中“一级导航_用户管理组合” ， 单击时 增加动作：旋转 ，选择目标元件“用户管理展开”；选择：顺时针 180 度，动画：线性，250 毫秒 。
完成以上的制作，我们会看到了单个导航栏已经完成。我们可以给它复制多个这样的导航栏在一起，就可以实现多个并用了。
四、进阶
1、全选除“后台管理”外的所有元件，然后我们给它复制粘贴 1 个（根据需要可以粘贴n个），并把元件的名称修改为需要的名称。这里修改为“日志管理” 。按照以下方式排列：
2、因前面设置“用户管理”的时候，我们已经把 “推动元件 ” 设置好了 ，所以后面无需再设置。但前面我们把 “角色列表 ” 设置为默认选中状态，这里我们又复制了1个，所以我们需要把多复制出来的1个 “系统日志 ”去掉默认选中状态 。
3、选中“一级导航_用户管理组合”和“一级导航_日志管理组合”(如有多个一级导航，则全部选中)，右键选中“选项组”，命名为“一级导航_选项组”。
到这里就完成所有制作了，如有相关问题或建议请在下方留言，谢谢大家观看。
附参考：
响应式折叠导航栏的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于折叠式车载导航、响应式折叠导航栏的信息别忘了在本站进行查找喔。
