bootstrap下拉菜单

一：理解这些单词是什么意思

1、dropdown:下拉

2、toggle:触发器

3、menu:菜单

4、dropdown-toggle:下拉的触发器

5、dropdown-menu:创建下拉菜单

6、data-toggle:指以什么事件来触发

7、data-target:指事件的目标

8、dropdown-header:下拉菜单的标题

9、dropdown-menu-right:右对齐

10、.divider:下拉菜单中的分割线

11、.disable:禁用状态

12、.dropup:向上弹出的下拉菜单

二、实例代码

1、基本框架

<div >

　　<button></button>

　　<ul>

　　<li> </li>

　　</ul>

</div>

2、添加事件和方法

<div class="dropdown">

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

       首页

   　<span class="caret"></span><!--表示下拉箭头图标-->

       </button>

　　<ul class="dropdown-menu dropdown-menu-right">  <!--表示下拉菜单右对齐-->

　　<li class="dropdown-header">回顾历史</li>  <!--表示下拉菜单的标题-->

　　<li><a herf="##">产品展示</a></li>

　　<li><a href="##">联系我们</a></li>

　　<li class="divider"></li>    <!--表示分割线-->

　　<li class="disabled"><a herf="##">公司地址</a></li>   <!--表示下拉菜单的禁列项-->

　　</ul>

</div>

代码运行效果如下：

 

注意事项：data-toggle="值"---后面的值必须和容器名相同

　　　　　.dropdown-header下拉菜单标题，<li>不添加<a></a>标签

　　　　　使用右对齐时，最好添加style      .dropdown{ float:left }