Bootstrap—制作常用下拉菜单

最新推荐文章于 2023-10-12 15:58:24 发布

Tiramisu_C

最新推荐文章于 2023-10-12 15:58:24 发布

阅读量3k

点赞数 2

分类专栏： Bootstrap Bootstrap学习之路文章标签： Bootstrap 下拉菜单

本文链接：https://blog.csdn.net/nongweiyilady/article/details/53636483

版权

Bootstrap 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

Bootstrap学习之路

17 篇文章 17 订阅

订阅专栏

项目中常常需要用到下来菜单，下面来讲一下如何使用Bootstrap的下拉菜单组件。

先来看一下效果：

这个demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
    <script type="text/javascript" src="../libs/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../libs/bootstrap-3.3.7/js/bootstrap.js"></script>
</head>
<body>
    <div class="container" style="margin-top:20px">
          <div class="dropdown">
              <button class="btn" id="mydropdownmenu" data-toggle="dropdown">下拉菜单</button>
              <ul class="dropdown-menu"  aria-labelledby="mydropdownmenu" role="menu">
                  <li role="presentation"><a role="menuitem" href="#" ></span>社区</a></li>
                  <li role="presentation"><a role="menuitem" href="#" >服务</a></li>
                  <li role="presentation"><a role="menuitem" href="#" >俱乐部</a></li>
                  <li role="presentation" class="divider"></li> <!--分割线divider-->
                  <li role="presentation"><a role="menuitem" href="#" >交友</a></li>
                  <li role="presentation" class="dropdown-header">友情链接</li> <!--标题dropdown-header-->
                  <li role="presentation"><a role="menuitem" href="#" ></span>邮箱</a></li>
                  <li role="presentation"><a role="menuitem" href="#" >苏宁</a></li>
                  <li role="presentation"><a role="menuitem" href="#" >淘宝</a></li>
                  <li role="presentation" class="disabled" ><a role="menuitem" href="#" >禁用</a></li><!--禁用disabled-->
              </ul>
          </div>
    </div>
</body>
</html>

下面分析代码：

第一步，首先引入脚本文件，注意两个js文件引入的顺序。

    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
    <script type="text/javascript" src="../libs/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../libs/bootstrap-3.3.7/js/bootstrap.js"></script>

第二步，使用一个div包裹住下拉菜单，下拉菜单由一个button来点击弹出下拉菜单ul。分析一下上述代码出现的属性：

role——本质上是增强语义性，代码中去掉role属性不影响效果。

aria-labelledby——方便屏幕阅读器识别，让指定了aria-labelledby=“mydropdownmenu”属性的控件获取焦点时，阅读器同时读取具有id="mydropdownmenu"的控件。代码中去掉aria-labelledby属性不影响效果。

去掉上述两个属性，效果是一样的，代码一目了然。

<div class="dropdown">
        <button class="btn" data-toggle="dropdown">下拉菜单</button>
        <ul class="dropdown-menu">
            <li><a href="#"></span>社区</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">俱乐部</a></li>
            <li class="divider"></li><!--分割线divider-->
            <li><a role="menuitem" href="#">交友</a></li>
            <li class="dropdown-header">友情链接</li>  <!--标题dropdown-header-->
            <li><a href="#"></span>邮箱</a></li>
            <li><a href="#">苏宁</a></li>
            <li><a href="#">淘宝</a></li>
            <li class="disabled"><a href="#">禁用</a></li><!--禁用disabled-->
        </ul>
 </div>

其中：

<div class="dropdown">——指定下拉菜单相对位置的开始，相当于作为一个，参照位置。

data-toggle="dropdown"——使用bootstrap的dropdown组件。没有这个属性，点击按钮不弹出菜单。

<ul class="dropdown-menu">——创建下拉菜单，给ul一个下拉菜单的样式，如果没有这个样式，是很丑的，也没有弹出的效果。

ul中的li都是下拉菜单的列表项，对于列表项我们还可以做如下操作：

<li class="divider">——显示一个分割线，这个分割线不具有获取焦点特性。

<li class="dropdown-header">——列表项标题，同样不获取焦点。不能对他进行操作。

<li class="disabled">——将这一个菜单项禁用，当鼠标落在此菜单项时出现禁用标志。

对于下拉菜单，我们还可以使用dropup的<div class="dropup">来制作向上弹出的下拉菜单，效果如下：