当前位置 : 主页 > 网页制作 > Bootstarp >

Bootstrap手风琴悬浮下拉框,直接拷~~~

来源:互联网 收集:自由互联 发布时间:2021-06-12
!DOCTYPE htmlhtml lang= " en " head meta charset= " UTF-8 " titleTitle/titlescript 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/boot
<!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{
                width: 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>
上一篇:登陆小demo
下一篇:BootStrap-Table主子表
网友评论