Bootstrap组件---下拉菜单，多级菜单 ,按钮

最新推荐文章于 2022-08-02 18:52:48 发布

GQ_cyan

最新推荐文章于 2022-08-02 18:52:48 发布

阅读量2.2w

点赞数 3

分类专栏： css系列

本文链接：https://blog.csdn.net/gq_cyan/article/details/52474378

版权

web前端同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

css系列

11 篇文章 0 订阅

订阅专栏

下拉菜单

菜单： ,dropdown（.dropup改变这个是上显示） data-toggle="dropdown" (激活文本处) .dropdown-menu .pull-left .pull-right

按钮组：.btn-group(各种类为btn的标签集合) .btn-toolbar（按钮导航条） .btn-group-vertical .btn-mini .btn-small .btn-large .nav-pills（胶囊样式）

导航： .nav .nav-tabs .pull-right .disabled .nav-stacked（堆叠） .nav-list data-toggle="tab" .tabbable(容器) .tabs-left (right , below) .tab-content

注意： .dropdown-submenu(多级导航中，可能bootstrap中没有)自行添加：

<style type="text/css">
        .dropdown-submenu {
            position: relative;
        }
        .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px;
            border-radius: 0 6px 6px 6px;
        }
        .dropdown-submenu:hover > .dropdown-menu {
            display: block;
        }
        .dropdown-submenu > a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #ccc;
            margin-top: 5px;
            margin-right: -10px;
        }
        .dropdown-submenu:hover > a:after {
            border-left-color: #fff;
        }
        .dropdown-submenu.pull-left {
            float: none;
        }
        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }
    </style>

添加这段css即可使.dropdown-submenu有效

实现菜单样式：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="bootstrap-3.3.6/js/jquery.cyan1.js"></script><span style="color:#ff0000;">jquery库文件</span>
<script type="text/javascript" src="bootstrap-3.3.6/js/<span style="color:#ff0000;">dropdown.js</span>"></script>
<link rel="stylesheet" href="bootstrap-3.3.6/dist/css/bootstrap.min.css" />
 <style type="text/css">
        .dropdown-submenu {
            position: relative;
        }
        .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px;
            border-radius: 0 6px 6px 6px;
        }
        .dropdown-submenu:hover > .dropdown-menu {
            display: block;
        }
        .dropdown-submenu > a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #ccc;
            margin-top: 5px;
            margin-right: -10px;
        }
        .dropdown-submenu:hover > a:after {
            border-left-color: #fff;
        }
        .dropdown-submenu.pull-left {
            float: none;
        }
        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }
    </style>
</head>

<body>
<ul class="nav nav-pills">
<li class="dropdown">
    <a href="#" class="btn btn-large" data-toggle="dropdown">cyan111<i class="caret"></i></a>
    <ul class="dropdown-menu">
        <li><a href="#">qiao1</a></li>
        <li><a href="#">qiao2</a></li>
        <li><a href="#">qiao3</a></li>
    </ul>
</li>
<li class="dropdown">
    <a href="#" class="btn btn-large" data-toggle="dropdown">cyan222<i class="caret"></i></a>
    <ul class="dropdown-menu">
        <li><a href="#">gao1</a></li>
        <li><a href="#">gao2</a></li>
        <li class="dropdown-submenu"> <a href="#">gao3</a>
             <ul class="dropdown-menu pull-right">
                  <li><a href="#">qiao1</a></li>
                  <li><a href="#">qiao2</a></li>
                  <li><a href="#">qiao3</a></li>
             </ul>
        </li>
    </ul>
</li>
</ul>
<div class="dropup">
    <a href="#" class="btn btn-large" data-toggle="dropdown">cyan333<i class="caret"></i></a>
    <ul class="dropdown-menu">
        <li><a href="#">chao1</a></li>
        <li><a href="#">chao2</a></li>
        <li><a href="#">chao3</a></li>
    </ul>
</div>
</body>
</html>

结果：

GQ_cyan

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
Bootstrap组件---下拉菜单，多级菜单 ,按钮

下拉菜单 ,dropdown（.dropup改变这个是上显示） data-toggle="dropdown" (激活文本处) .dropdown-menu .pull-left .pull-right 注意： .dropdown-submenu(多级导航中，可能bootstrap中没有)自行添加： .dropdo
复制链接

扫一扫