Bootstrap CSS——按钮式下拉菜单

最新推荐文章于 2023-10-12 15:58:24 发布

Tarkzeng

最新推荐文章于 2023-10-12 15:58:24 发布

阅读量1.9k

点赞数

分类专栏： Bootstrap 文章标签： bootstrap css

本文链接：https://blog.csdn.net/u011350527/article/details/48918617

版权

Bootstrap 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

http://v3.bootcss.com/components/#btn-dropdowns
mark

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <!--单按钮下拉菜单-->
        <div class="btn-group">
            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                按钮式下拉菜单
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">1</a> </li>
                <li><a href="#">2</a> </li>
                <li><a href="#">3</a> </li>
                <li><a href="#">4</a> </li>
            </ul>
        </div>

        <!--分裂式下拉菜单，只需将按钮和向下的箭头拆开，其实就是用两个按钮组合而成-->
        <div class="btn-group">
            <button type="button" class="btn btn-info" data-toggle="dropdown">
                分裂式下拉菜单
            </button>
            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">1</a> </li>
                <li><a href="#">2</a> </li>
                <li><a href="#">3</a> </li>
                <li><a href="#">4</a> </li>
            </ul>
        </div>

        <br>
        <!--箭头向上的下拉菜单，在外层div添加dropup即可-->
        <div class="btn-group dropup">
            <button type="button" class="btn btn-info" data-toggle="dropdown">
                分裂式下拉菜单
            </button>
            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">1</a> </li>
                <li><a href="#">2</a> </li>
                <li><a href="#">3</a> </li>
                <li><a href="#">4</a> </li>
            </ul>
        </div>

    </div>

    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>