bootstrap学习笔记-下拉菜单

下拉菜单组件

官网上的一个例子：

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

注意：有很多没怎么见过属性，例如data-* aria-* role

自定义属性

data-* 其实是bootstrap下js接口的一种写法，也就是来进行js交互的。

aria-* 和role其实html5中的属性，增加阅读性的—针对特殊人群，role描述的是一种状态，而aria是对这个状态行为的描述。

-

特定的类

首先对父元素要设定一个类名”.dropdown”或者是”.dropup”一个是向下弹出，一个是向上弹出（都有箭头）

接着对按钮元素要设定一个类名”.dropdown-toggle” ,并且写上属性”data-toggle=”dropdown”“

然后对相应的下拉列表设定类名”.dropdown-menu”

-注意这里下拉菜单显示的时候父元素div会出现一个open的类名，其实这就是控制出现的。

如果想要让菜单向右对齐，可是在ul上使用类”.dropdown-menu-right”,不过要注意的是，这个向右对其是对于他的父元素的（absolute），如果按钮不是btn-block的也有可能会效果不对。当然，btn-block也可以加在ul上

而如果想要li文字居中，则li中增加类”.text-center”

标题

可以在下拉菜单中增加标题（不止一个）

类：”.dropdown-header”

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
<li><a>Action</a></li>
...
</ul>

分割线

类：”.separator”

<ul cla
ad90
ss="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>

禁用菜单项

为li元素增加”.disable”类

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>

嵌套

如果想要把下拉菜单和混合到一些按钮里，那只要把一个.btn-group 放到另一个 .btn-group里面 ，（将原来的dropdown类变为drop-group，其实就是变成了按钮式下拉菜单）

分裂式下拉菜单

实际上就是将”.dropdown-toggle”类和属性”data-toggle=”dropdown”“加到箭头的那个button上。

<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

之前提到的那个data-*，实际上我们可以用jQ来写，而不用自定义方法例如（其实这是一种插件写法）

$(".dropdown-toggle").dropdown();

但这样是和调用自定义方法是有一些区别的。

注意

data-target=”.dropdown” （类名） 它明确的指定了对哪个（些）菜单进行操作，默认的时候就是当前的这个,不过当对一个button设定它的时候，并且这个目标是data-toggle=”dropdown”的，如果它的目标是好多个菜单，而他们菜单使用js控制的，那么也会变成data-toggle=”dropdown”控制的形式