阅读(1982) (15)

Bootstrap 下拉菜单之菜单状态

2016-09-09 17:08:11 更新

下拉菜单的默认状态有悬浮状态:​hover​和焦点状态:​focus


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


下拉菜单还有当前状态:​active​和禁用状态​disabled​,这两种状态使用方法只需要在对应的菜单项上添加对应的类名


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