Blogger Information
Blog 38
fans 0
comment 0
visits 30686
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
下拉菜单分列式下拉菜单实例——2018年9月29日
图图的博客
Original
1980 people have browsed it

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../lib/dist/css/bootstrap.css">
    <script src="../lib/jquery.js"></script>
    <script src="../lib/dist/js/bootstrap.js"></script>
    <style>
        button{
            margin-top: 50px;
        }
    </style>
    <title>Document</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle btn-warning"  id="dropdownMenu" data-toggle="dropdown" >
                    位置
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
                    <li><a href="">后卫</a></li>
                    <li><a href="">前锋</a></li>
                    <li><a href="">中锋</a></li>
                    <!--分割线-->
                    <li role="separator" class="divider"></li>
                    <li><a href="">替补</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="btn-group">
            <button type="button" class="btn btn-info">分区排名</button>
            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu">
                <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>
                <li><a href="#">西北赛区</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments