bootstrap基础知识（四）－－菜单

菜单

1）基本使用

在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件

如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件

 

  （在body的底部）

特别声明：因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。

（在头标签中）

使用方法：

1、使用一个名为“dropdown”的容器（div）包裹了整个下拉菜单元素

2、使用了一个按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:

3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:

dropdown-menu">




如果要向下小标签：




2）原理分析

下拉菜单的ul即类名为dropdown-menu实际上设置为display:none

当用户第一次点击时，添加一个类名open，第二次点击时就把open删除

源码表示为：

.open > .dropdown-menu {

  display: block;

}




3）下拉菜单（下拉分隔线）

假如菜单中有两个组，需要用分割下分开，可以使用一个空的

• ，并给这个li添加类名为：divder

  
  

  4)下拉菜单（菜单标题)

  为了使分组变得明显，可以使用菜单标题

  使用方法：在需要头标题的li中添加类名：dropdown-header

  
  

  5）下拉菜单（对齐方式）

  菜单默认是左对齐，如果需要右对齐需要在dropdown－menu（就是在ul上面添加）上添加一个类名：“pull－right”或者“dropdown－menu－right” 

  （框框相对于按钮靠右）

  6）下拉菜单（菜单项状态）

  默认状态是悬浮状态和标点状态

  另需添加当前状态和禁用状态需要添加相应的类名
  在li中即菜单项标签中添加类名active表示当前状态

  添加disabled表示禁用状态