下拉菜单（菜单标题），玩转Bootstrap（基础）教程-慕课网

下拉菜单（菜单标题）

上一小节讲解通过添加“divider”可以将下拉菜单分组，为了让这个分组更明显，还可以给每个组添加一个头部（标题）。如下：

<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="dropdown-header">第一部分菜单头部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
…
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">第二部分菜单头部</li>
…
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>

对应的样式如下：

/*查看bootstrap.css文件第3090行～第3096行*/

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}

运行效果如下：

任务

我来试试：完成下面任务

编写代码完成下拉菜单，效果如下图：

备注:这一小节没有正确性验证，请查看结果窗口与任务所给的结果图片是否一致，从而判断输入代码是否正确。

?不会了怎么办

参考代码如下：

<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="dropdown-header">水果</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">蔬菜</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">芹菜</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">萝卜</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">茄子</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">主食</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">米饭</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">馒头</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">面条</a></li>
  </ul>
</div>

问答
评论
笔记
代码

全部精华我要发布

bootstrap下拉菜单怎么选中子菜单

最新回答 / 素小暖

加一个css设置下hover的状态，把下拉菜单设置成block，具体css：.nav>li:hover.dropdown-menu{display:block;}这句css加在bootstrap.min.css之后出现的css中，你试下！

1 回答 2738 浏览

2018-01-12

下拉框没有效果

最新回答 / 玩玩玩哇

把js那里换成下面的：<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>

1 回答 934 浏览

2017-09-01

1 回答 2942 浏览

2017-08-21

例子中的除了bs的样式怎么获得

最新回答 / MatJenin

没有这个样式的老铁

1 回答 794 浏览

2017-05-08

下拉菜单里onmouseover事件改变背景颜色是添加哪个类名做的？还是其他的方法？

最新回答 / web_東

(function mouse() {
    $("li").mouseenter(function () {
        $(this).css("background-color","blue").siblings().css("background-color","#fff ");

    });
    $("li").mouseleave(function () {
        $("li").css("b...

2 回答 1140 浏览

2018-07-22

为什么我的页面没有效果呢粘贴别人的代码也没有效果

最赞回答 / 端木金

把bootstrap.css和bootstrap.min.js的引用方式换成本地引用。即，去网上下载这两个东西，放在本地，然后引用。

2 回答 1094 浏览

2017-02-10

下拉菜单课程代码不能达到效果，谁能帮忙

最新回答 / qq_梦与现实的距离_0

两个script的引用放到div的前面，或者直接放到head标签里

3 回答 703 浏览

2017-03-23

bootstrap的h5与媒体不兼容IE啊

最新回答 / renshenghaohao

没错把

1 回答 735 浏览

2016-09-14

我画矩形的地方每次非要写吗？它们起什么作用？

最新回答 / zonghow

不用必须写，role属性是为了让浏览器知道这是一个什么标签。以便屏幕阅读器更好地为盲人读出网页内容。

1 回答 695 浏览

2016-08-23

<li role="presentation">表示什么意思？

已采纳回答 / 江悦豪

这里是无障碍网页应用的属性，方便一些视力障碍的人士的使用，具体可以参加这个网址，这里有详细的介绍。http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/#ariaRolerole是标签扮演的角色属性，更多的是注明作用，对css样式没影响。presentation在这里表示陈述。具体可以参加

3 回答 11925 浏览

2017-01-12

tabindex=-1在这里有什么作用

已采纳回答 / 慕婉清1957378

不让键盘的Tab键按顺序选中

1 回答 1598 浏览

2016-08-23

分割线问题

+ 我来回答回答最高可+2积分

3 回答 585 浏览

2022-07-07

为啥现在都不用敲代码了

最新回答 / 慕丝6215799

速度快啊~

1 回答 744 浏览

2016-08-23

为什么我的头部与下拉菜单不能对齐

已采纳回答 / 地上的星星

<ul class="nav nav-pills"> ... <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"&g...

1 回答 1104 浏览

2016-12-21

这个下拉菜单如果用在表单添加数据的话，那么button中的值如何变化？？

最新回答 / echo_kinchao

可以变化的你用Jq来动态赋值

1 回答 635 浏览

2016-08-23

全部我要发布

最热最新

只看我的

5-4 下拉菜单（菜单标题）