bootstrap菜单、按钮及导航学习笔记5-3

最新推荐文章于 2024-06-02 17:21:14 发布

hellochenlu

最新推荐文章于 2024-06-02 17:21:14 发布

阅读量393

点赞数

分类专栏： Bootstrap

Bootstrap 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>，并且给这

个<li>添加类名“divider”来实现添加下拉分隔线的功能。对应的样式代码：

/*源码bootstrap.css文件第3034行～第3039行*/

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

效果如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉分隔线</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>

<body>
 <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"><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"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div> 
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

hellochenlu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap菜单、按钮及导航学习笔记5-3

在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的，并且给这个添加类名“divider”来实现添加下拉分隔线的功能。对应的样式代码：/*源码bootstrap.css文件第3034行～第3039行*/.dropdown-menu .divider { height: 1px; margin: 9px 0; o
复制链接

扫一扫

专栏目录