Bootstrap入门（八）组件2：下拉菜单

先引入本地的CSS文件和JS文件（注：1.bootstrap是需要jQuery支持的。2.需要在<body>当中添加）

<link href="css/bootstrap.min.css" rel="stylesheet">

<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>

下拉菜单，首先，在容器div中创建一个class为dropdown的div

        <div class="dropdown">
          ...
        </div>

1.为下拉菜单添加内容

点击的下拉菜单，触发器是一个按钮，而下拉菜单的详细内容有<ul><li> 标签的组合来完成

　　　　<div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

效果

2.有时候我们希望分类放，那就需要一条线来分割，新添加

<li role="presentation" class="divider"></li>

效果：（可能看的不清楚，可以先尝试）

3.下拉菜单的对齐

比如说希望按钮和按钮内容都在右边，可以在<div>和<button>的class添加一个pull-right 属性，在<ul>标签中的class添加一个 dropdown-menu-right属性。（在<button> 中添加pull-right 属性是为了让按钮移动到右边，，在<ul>添加一个 dropdown-menu-right属性是为了把内容移动到右边，而如果没有在<div>添加pull-right 属性会使点击后，会出现内容遮挡住按钮的情况）

修改为：

　　　 　<div class="dropdown pull-right">
            <button class="btn btn-default dropdown-togglet" type="button" id="dropdownMenu1" data-toggle="dropdown">
                右边显示
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="presentation" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

效果为：

4.给下拉菜单内容添加标题

当下拉菜单内容多了之后，希望添加标题对他进行说明或者引导，可以添加标题

新添加

<li role="presentation" class="dropdown-header">标题内容</li>

操作：

　　　　<div class="dropdown">
            <button class="btn btn-default dropdown-togglet" type="button" id="dropdownMenu1" data-toggle="dropdown">
                带标题显示
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li role="presentation" class="dropdown-header">标题1</li>
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="presentation" class="dropdown-header">标题2</li>
                <li><a href="#">Action2</a></li>
                <li><a href="#">Another action2</a></li>
                <li><a href="#">Something else here2</a></li>
                <li role="presentation" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

效果为：

5.部分下拉菜单不可用

只需要在需要禁用的内容添加disabled

<li class="disabled"><a href="#">内容</a></li>

操作：

　　　　<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" aria-labelledby="dropdownMenu1">
                <li class="disabled"><a href="#">Action</a></li>
                <li class="disabled"><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="presentation" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

效果为，禁用内容显示淡灰色，鼠标移动上去显示一个禁止的符号