Bootstrap 折叠(Collapse)插件制作侧边栏导航菜单
来源:互联网 发布:阿里云域名解析教程 编辑:程序博客网 时间:2024/06/05 20:10
- data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
- href 或 data-target 属性添加到父组件,它的值是子组件的 id。
下表列出了折叠(Collapse)插件用于处理繁重的伸缩的 class:
您可以通过以下两种方式使用折叠(Collapse)插件:
- 通过 data 属性:向元素添加 data-toggle="collapse" 和 data-target,自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器,并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的,请添加额外的 class .in。
为了向可折叠控件添加类似折叠面板的分组管理,请添加 data 属性 data-parent="#selector"。
- 通过 JavaScript:可通过 JavaScript 激活 collapse 方法,如下所示:
<span style="font-size:18px;"> <div class="sidebar-nav"> <form class="search form-inline"> <input type="text" placeholder="Search..."> </form> <a href="#dashboard-menu" class="nav-header" data-toggle="collapse"><i class="icon-dashboard"></i>首页</a> <ul id="dashboard-menu" class="nav nav-list collapse "> <li><a href="/WirelessOrder/home.do?flag=home">报表</a></li> <li><a href="/WirelessOrder/home.do?flag=grzx">个人中心</a></li> </ul> <a href="#table-menu" class="nav-header" data-toggle="collapse"><i class="icon-table"></i>餐桌 </a> <ul id="table-menu" class="nav nav-list collapse in"> <li ><a href="/WirelessOrder/table.do?flag=table">餐桌管理</a></li> </ul></span> <a href="#menu-menu" class="nav-header collapsed" data-toggle="collapse"><i class="icon-reorder"></i>菜谱 </a> <ul id="menu-menu" class="nav nav-list collapse"> <li ><a href="/WirelessOrder/menu.do?flag=menu">菜谱管理</a></li> </ul> <a href="#order-menu" class="nav-header" data-toggle="collapse"><i class="icon-th-large"></i>订单</a> <ul id="order-menu" class="nav nav-list collapse"> <li ><a href="/WirelessOrder/order.do?flag=order">订单管理</a></li> </ul> </div>
结合bootstrap的堆叠导航
您可以为一组链接添加标题,为位于 bootstrap.css 中行号 2201 到 2221 的 .nav-list 定义样式(版本 2.0.1)
2 1
- Bootstrap 折叠(Collapse)插件制作侧边栏导航菜单
- Bootstrap 折叠(Collapse)插件
- Bootstrap 折叠(Collapse)插件
- Bootstrap 折叠(Collapse)插件
- Bootstrap的js插件之折叠(collapse)
- bootstrap之collapse(折叠)
- Bootstrap之侧边导航菜单(可折叠分组)
- 【Bootstrap】选择折叠项collapse
- 简单的折叠侧边栏的制作
- 侧边栏弹出导航插件
- bootstrap侧边栏圆点导航
- bootstrap中jquery插件——collapse折叠效果-手风琴效果
- axure的基本使用方法(侧边导航栏的制作)
- bootstrap 导航栏,有form查询,下拉菜单,响应式折叠,登录注册
- js实现侧边导航栏展开和折叠
- 可伸缩右侧边栏导航菜单
- Notes03:侧边导航菜单
- bootstrap自定义样式-bootstrap侧边导航栏的实现
- oracle恢复某段时间点的数据
- markdown数学符号
- 欢迎使用Markdown编辑器写博客
- 172. Factorial Trailing Zeroes
- 入坑,使用第三方SDK开发mavenJspWeb项目
- Bootstrap 折叠(Collapse)插件制作侧边栏导航菜单
- Openstack的命令
- 百练 马走日
- PHP 使用 Redis
- Android如何把json格式的数据存储到xml中
- Java 递归求阶乘10!
- 7月18号--7月22号
- windows中的shutdown命令
- Linux常用命令及操作(二)查看用户组、更改文件(夹)权限、复制、将用户添加到root