Bootstrap—按钮下拉菜单

最新推荐文章于 2024-12-13 10:57:56 发布

原创最新推荐文章于 2024-12-13 10:57:56 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap #下拉菜单 #按钮下拉菜单

Bootstrap 同时被 2 个专栏收录

17 篇文章

订阅专栏

Bootstrap学习之路

17 篇文章

订阅专栏

本文介绍了如何使用Bootstrap创建按钮下拉菜单。内容包括基本的按钮下拉菜单实现，通过在.btn-group中放置按钮和下拉菜单元素，以及如何调整按钮大小。此外，还讲解了如何创建向上弹出的下拉菜单，只需在.btn-group中添加.dropup类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按钮下拉菜单，顾名思义，就是一个按钮，点击按钮，弹出下拉菜单。使用bootstrap制作按钮下拉菜单，只需要在一个.btn-grounp中放置按钮和下拉菜单即可。

一般的按钮下拉菜单是这样的：

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮下拉菜单</title>
    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
    <script src="../libs/jquery-3.1.1.js"></script>
    <script src="../libs/bootstrap-3.3.7/js/bootstrap.js"></script>
</head>
<body>
    <div class="container" style="margin-top: 20px">
        <div class="btn-group">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">服务<span class="caret"></span></button>
            <ul class="dropdown-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>
                <li><a href="#">菜单选项5</a></li>
                <li><a href="#">菜单选项6</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

代码中可以看出，这里使用了一个<div class="btn-group">包裹按钮和下拉菜单，在很多网站中你可能经常看到这样的下拉菜单：

图中可以看到，当点击左边按钮时，是不弹出菜单的，点击右边菜单时弹出。

实现这样的效果是在右边添加了一个按钮：

 <button class="btn btn-primary">服务</button>
 <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>

跟一般的按钮一样，按钮下拉菜单中的按钮也可以通过.btn-lg btn-sm .btn-xs来改变大小。这里不再给出演示。

有向下弹出的下拉菜单，当然也应该有向上弹出的下拉菜单。实现向上弹出的下拉菜单很简单，首先要保证上方有足够的空间让下拉菜单显示出来，然后在<div class="btn-group">中加上一个dropup,如<div class="btn-group dropup">即可实现。

<div class="btn-group dropup">
            <button class="btn btn-primary">服务</button>
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
            <ul class="dropdown-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>
                <li><a href="#">菜单选项5</a></li>
                <li><a href="#">菜单选项6</a></li>
            </ul>
 </div>

效果如下：