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

菜单

1）基本使用

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

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

  <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> （在body的底部）

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

<link rel="stylesheet" href=“//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>（在头标签中）

使用方法：

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

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

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle=“dropdown">

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

<ul class=“dropdown-menu">

如果要向下小标签：

<span class=“caret”></span>

2）原理分析

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

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

源码表示为：

.open > .dropdown-menu {

  display: block;

}

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

假如菜单中有两个组，需要用分割下分开，可以使用一个空的<li>，并给这个li添加类名为：divder

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

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

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

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

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

（框框相对于按钮靠右）

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

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

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

添加disabled表示禁用状态