ZUI
  • examples
    • alerts
    • article
    • breadcrumb
    • button-groups
    • buttons
    • cards
    • carousel
    • chosen
    • collapse
    • colorset
    • comment
    • dropdowns
    • forms
    • grid
    • icons
    • input-groups
    • kindeditor
    • labels
    • Lightbox
    • list-group
    • list
    • modals
    • navbars
    • navs
    • pager
    • panels
    • popovers
    • progress
    • tables
    • tabs
    • textbox
    • tooltip
    • type
  • NEXT

下拉菜单

类型

基本类型

将下拉菜单触发器和下拉菜单都包裹在.dropdown里,或者另一个声明了position: relative;的元素。然后添加组成菜单的HTML代码。

通过是否指定data-toggle='dropdown'来开关下拉菜单。

  • Dropdown header
  • 编辑
  • 删除
  • Dropdown header
  • 修改

导航条下来菜单

  • 首页
  • 演示
  • 下载
  • 团队
    • 关于我们
    • 开发计划
    • 开源代码
    • 团队博客

标签下拉菜单

操作
  • 编辑
  • 删除
  • 修改

按钮下拉菜单

  • 编辑
  • 删除
  • 修改
  • 编辑
  • 删除
  • 增加

变化

弹出方式

  • div.btn-group
  • div.btn-group > ul.dropdown-menu.pull-right
  • div.btn-group.dropup
  • div.btn-group.dropup > ul.dropdown-menu.pull-right

下拉菜单的子菜单

  • 关闭
  • 评审
    • 确认通过
    • 有待明确
    • 拒绝
      • 已完成
      • 延期
      • 不做
      • 已取消
      • 设计如此
  • 计划
    • Plan A
    • Plan B
    • Plan C
    • Plan D
    • Plan E
  • 阶段
    • 未开始
    • 已计划
    • 已立项
    • 研发中
    • 研发完毕
    • 测试中
    • 测试完毕
    • 已验收
    • 已发布
  • .pull-left
    • Item1
    • Item2

小标题和禁用

通过li.dropdown-header增加小标题,为li增加.disabled来禁用。

  • 基本操作
  • 编辑
  • 修改
  • 其他操作
  • 增加