zoukankan      html  css  js  c++  java
  • Bootstrap手风琴悬浮下拉框,直接拷~~~

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
        <style>
                .box{
                     400px;
                    height: 600px;
                    margin-top: 100px;
                }
            </style>
    </head>
    <body>
    
    
            <div class="container box">
                <div class="panel-group">
    
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"> 
                                <a href="#ding" data-toggle="collapse" data-parent="#accordion">订单管理</a>
                            </h4>
                        </div>
                        <div id="ding" class="panel-collapse collapse in">
                            <div class="panel-body">
                                <ul class="nav">
                                    <li>
                                        <a href="#">衣服管理</a>
                                    </li>
                                    <li>
                                        <a href="#">鞋子管理</a>
                                    </li>
                                    <li>
                                        <a href="#">水果管理</a>
                                    </li>
                                    <li>
                                        <a href="#">蔬菜管理</a>
                                    </li>
                                    <li>
                                        <a href="#">电脑管理</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"> 
                                <a href="#hui"  data-toggle="collapse" data-parent="#accordion">会员管理</a>
                            </h4>
                        </div>
                        <div id="hui" class="panel-collapse collapse">
                            <div class="panel-body">
                                <ul class="nav">
                                    <li>
                                        <a href="#">衣服管理</a>
                                    </li>
                                    <li>
                                        <a href="#">鞋子管理</a>
                                    </li>
                                    <li>
                                        <a href="#">水果管理</a>
                                    </li>
                                    <li>
                                        <a href="#">蔬菜管理</a>
                                    </li>
                                    <li>
                                        <a href="#">电脑管理</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"> 
                                <a href="#cai"  data-toggle="collapse" data-parent="#accordion">财务管理</a>
                            </h4>
                        </div>
                        <div id="cai" class="panel-collapse collapse">
                            <div class="panel-body">
                                <ul class="nav">
                                    <li>
                                        <a href="#">衣服管理</a>
                                    </li>
                                    <li>
                                        <a href="#">鞋子管理</a>
                                    </li>
                                    <li>
                                        <a href="#">水果管理</a>
                                    </li>
                                    <li>
                                        <a href="#">蔬菜管理</a>
                                    </li>
                                    <li>
                                        <a href="#">电脑管理</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
    
                </div>
            </div>
        </body>
    </html>
  • 相关阅读:
    结巴分词 0.14 版发布,Python 中文分词库
    Lazarus 1.0.2 发布,Pascal 集成开发环境
    Android全屏 去除标题栏和状态栏
    服务器日志现 Android 4.2 传将添多项新特性
    Percona XtraBackup 2.0.3 发布
    长平狐 Android 强制设置横屏或竖屏 设置全屏
    NetBeans 7.3 Beta 发布,全新的 HTML5 支持
    CppDepend现在已经支持Linux
    GromJS 1.7.18 发布,服务器端的 JavaScript
    Apache OpenWebBeans 1.1.6 发布
  • 原文地址:https://www.cnblogs.com/mofujin/p/11062355.html
Copyright © 2011-2022 走看看