Bootstrap 折叠(Collapse)插件制作侧边栏导航菜单
2016-07-22 19:05
726 查看
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 方法,如下所示:
$('.collapse').collapse()
结合bootstrap的堆叠导航
您可以为一组链接添加标题,为位于 bootstrap.css 中行号 2201 到 2221 的 .nav-list 定义样式(版本 2.0.1)
href 或 data-target 属性添加到父组件,它的值是子组件的 id。
下表列出了折叠(Collapse)插件用于处理繁重的伸缩的 class:
Class | 描述 | 实例 |
---|---|---|
.collapse | 隐藏内容。 | 尝试一下 |
.collapse.in | 显示内容。 | 尝试一下 |
.collapsing | 当过渡效果开始时被添加,当过渡效果完成时被移除。 |
通过 data 属性:向元素添加 data-toggle="collapse" 和 data-target,自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器,并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的,请添加额外的 class .in。
为了向可折叠控件添加类似折叠面板的分组管理,请添加 data 属性 data-parent="#selector"。
通过 JavaScript:可通过 JavaScript 激活 collapse 方法,如下所示:
$('.collapse').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)
相关文章推荐
- Bootstrap打开Modal后再打开编辑层, 文本框不能输入
- BOOTStrap
- Bootstrap Carousel Plugin
- bootstrap-table只能被调用一次的问题
- bootstrap-paginator分页控件
- 集成学习——Bootstrap Bagging AdaBoost算法
- ASP.NET MVC中 Bootstrap模态框 缓存问题
- bootstrap 响应式布局
- 基于bootstrap实现广告轮播带图片和文字效果
- 改造BOOTSTRAP的TAB(轉)
- 基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
- 基于bootstrap的轮播广告页,带图片和文字
- 基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
- 基于Bootstrap实现下图所示效果的页面,一个白底的带有两个菜单项、一个下拉菜单和一个登录表单的基本导航条
- Flot 在柱状图上显示数字
- 基于Metronic的Bootstrap开发框架经验总结(11)--页面菜单的几种呈现方式
- 基于Metronic的Bootstrap开发框架经验总结(10)--优化Bootstrap图标管理
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- 基于Metronic的Bootstrap开发框架经验总结(8)--框架功能总体界面介绍
- 基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理