Bootstrap每天必学之下拉菜单(3)

Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名，如下所示：

复制代码 代码如下:

<ul role="menu" aria-labelledby="dropdownMenu1">

上面代码中的“pull-right”类可以用“dropdown-menu-right”代替，两个类的作用是一样的，可从下面的源代码中看出。

实现原理：

对应的样式如下：

/源码请查看bootstrap.css文件第3030行～第3033行和3082行～第3085行/

.dropdown-menu.pull-right { right: 0; left: auto; } .dropdown-menu-right { right: 0; left: auto; }

同时一定要为.dropdown添加float:leftcss样式。

.dropdown{ float: left; }

运行效果如下所示：

下拉菜单与父容器左边对齐:

与此同时，还有一个类名刚好与“dropdown-menu-right”相反的类名“dropdown-menu-left”，其效果就是让下拉菜单与父容器左边对齐，其实就是默认效果。

/请查看bootstrap.css文件第3086行～第3089行/

.dropdown-menu-left { right: auto; left: 0; }

六、下拉菜单（菜单项状态）

下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）：

/查看bootstrap.css文件第3049行～第3054行/

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #262626; text-decoration: none; background-color: #f5f5f5; }

下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名：

<div> <button type="button" data-toggle="dropdown"> 下拉菜单 <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> …. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>

运行效果如下：

对应的样式代码也非常简单：

/请查看bootstrap.css文件第3055行～第3075行/ .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #fff; text-decoration: none; background-color: #428bca; outline: 0; } .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { color: #999; } .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { text-decoration: none; cursor: not-allowed; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); }

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程