Bootstrap 教程第五课：制作下拉菜单

在Bootstrap教程第二课制作网站菜单中，提到了制作下拉菜单的相关代码（ Bootstrap教程第二课：制作网站导航条），只是没有细细讲解，这节，我们来说说下拉菜单的制作。

首页，制作一个按钮，可以是a标签，也可以是button按钮，代码如下：

下拉菜单

我们可以在btn的后面添加上 .btn-default 或 .btn-primary 类，使得这个按钮看起来更漂亮一些。
现在我们需要在“下拉菜单”这几个文字后面添加上一个向下的箭头图标，表示这是一个下拉菜单，代码如下：

现在在这个按钮的下方，添加下拉菜单，需要给这个菜单的ul添加.dropdown-menu类，示例代码：

            
功能导航
            
功能导航一
            
功能导航
            
功能导航要
        

最后，给button按钮添加上触发 data-toggle="dropdown"，再将下拉按钮和下拉菜单都包裹在.dropdown里。完整代码如下：

        下拉菜单
            
        
        

            
功能导航
            
功能导航一
            
功能导航
            
功能导航要
        
    

效果图：



我们还可以根据自己的要求，使用 .dropdown-menu-left 或 .dropdown-menu-right 类来控制下拉菜单的左或右对齐。

还可以给下拉菜单添加下拉菜单的标题，来说明这组下拉菜单的功能：

    
Dropdown header

还可以添加分割线，将下拉菜单中的功能进行分组：

还可以给li元素添加.disabled类，从而禁止使用相应的菜单功能：

 
Disabled link