Bootstrap源码解读下拉菜单（4）

对齐方式

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

不过这样的话，下拉列表会跑到页面的最右边去，我们显然不希望这样，所以一定要为.dropdown添加float:left的css样式：

另外，还有个类名“dropdown-menu-left”，其实就是下拉菜单与父容器左边对齐的默认效果，

实现源码：

菜单项状态

下拉菜单项的默认的状态有悬浮状态（:hover）和焦点状态（:focus），实现源码如下：

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

另外还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项

• 上添加对应的类名“active”或“disabled”。

  实现源码如下：

  .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); }

  本文系列教程整理到： 专题中，欢迎点击学习。

  以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

  （编辑：李大同）

  【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!