bootstrap 下拉菜单

bootstrap 提供了制作下拉菜单的简单方式

主要的几个类

　　.dropdown   / .dropup  下拉菜单，点击按钮时  向下显示/向上显示

　　　　

　　　　.dropdown-menu   下拉菜单的实体  创建下拉菜单     .dropdown-menu-right{right: 0;left: auto;}下拉菜单右对齐（用的是定位）    pull-right(浮动)

　　　　　　下拉菜单的列表

　　　　　　.dropdown-header

　　　　　　.divider[dɪ'vaɪdə]   下拉菜单中的分割线  

　　　　　　.disabled   下拉菜单的禁用项

　　　　　　<div class="dropdown">

　　　　　　　　<button type="button"  class="btn  btn-default   dropdown-toggle"    data-toggle="dropdown">  menu<span class="caret"></span>     　　　　　　　　　</button>　

　　　　　　　　<ul class="dropdown-menu" role="menu">

　　　　　　　　　　<li   role=""   class="dropdown-header">下拉菜单标题</li>

　　　　　　　　　　<li   role=""  ><a href="">HTML</a></li>

　　　　　　　　　　<li   role=""   ><a href="">CSS</a></li>

　　　　　　　　　　<li  role=""   class="divider"></li>   //分割线

　　　　　　　　　　<li role="" ><a href=""> 关于我们</a></li>

　　　　　　　　</ul>

　　　　　　</div>　　

　　简单的下拉菜单  加颜色的为 必用的类

　 <div class="dropdown">
    　　　<button class="btn btn-default dropdown-toggle"   type="button"  data-toggle="dropdown">

　　　　　　教程<span class="caret"></span>

　　　　</button>
   　　 <ul class="dropdown-menu"    role="menu"   aria-labelledby="menu1">

　　　　　　<li role="presentation"  class="dropdown-header">下拉菜单标题</li>
      　　　　<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
     　　　　 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
      　　　　<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
      　　　　<li role="presentation"  class="divider"></li>
      　　　　<li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于我们</a></li>
   　　 </ul>
  </div>

 

.dropdown > .btn-toggle+ ul.dropdown-menu>li*3    [{li.dropdown-header / li.divider/li.disabled}]