Bootstrap教程(19)--下拉菜单、按钮式下拉菜单

Bertha 。 2022-11-03 11:28 115阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 概述
 *  2. 下拉菜单
 *   *  2.1 普通下拉菜单
     *  2.2 更换颜色
     *  2.3 更换尺寸
     *  2.4 添加分割线
     *  2.5 菜单分组
     *  2.6 上拉菜单
 *  3. 按钮式下拉菜单
 *  4. 小结

# 1. 概述 #

下拉菜单使用频率也是比较高的，比较常见的使用场景是在导航菜单栏，某个主菜单含有下拉的子菜单。

Bootstrap为下拉菜单提供了两种实现方式，即普通的下拉菜单还有按钮式的下拉菜单。我们先看一张图观察下，从图中可以看出，普通下拉菜单和按钮式下拉菜单的样式基本相同，唯一比较明显的区别是：普通下拉菜单相当于菜单，前后自动换行；而按钮式的下拉菜单相当于按钮，前后不换行。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

# 2. 下拉菜单 #

## 2.1 普通下拉菜单 ##

先来看下普通下拉菜单的示例代码，通过`dropdown`描述一个下拉菜单，下拉菜单的主按钮通过`dropdown-toggle`类描述，下拉子菜单的部分是`dropdown-menu`类描述的ul元素。最后注意下拉箭头是通过`caret`样式类实现的。

普通下拉菜单：
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                            下发命令
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">命令1</a></li>
                            <li><a href="#">命令2</a></li>
                        </ul>
                    </div>

效果如下：  
![在这里插入图片描述][20210228094808777.png_pic_center]

## 2.2 更换颜色 ##

其实就是更换按钮的样式类，如下代码将默认按钮改为了首选按钮`btn-primary`。

更换颜色:
                    <div class="dropdown">
                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                            下发命令
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">命令1</a></li>
                            <li><a href="#">命令2</a></li>
                        </ul>
                    </div>

效果如下：  
![在这里插入图片描述][20210228094830908.png_pic_center]

## 2.3 更换尺寸 ##

其实就是通过`btn-lg`或`btn-sm`更换按钮的尺寸。

更换尺寸:
                    <div class="dropdown">
                        <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
                            下发命令
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">命令1</a></li>
                            <li><a href="#">命令2</a></li>
                        </ul>
                    </div>

效果如下：  
![在这里插入图片描述][20210228094852131.png_pic_center]

## 2.4 添加分割线 ##

可以在子菜单之间添加分割线，示例代码：

添加分割线：
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                            下发命令
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">命令1</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">命令2</a></li>
                        </ul>
                    </div>

效果如下：  
![在这里插入图片描述][20210228095003428.png_pic_center]

## 2.5 菜单分组 ##

如果子菜单较多，还可以进行分组：

菜单分组：
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                            下发命令
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">分组1</li>
                            <li><a href="#">命令1</a></li>
                            <li><a href="#">命令2</a></li>
                            <li class="dropdown-header">分组2</li>
                            <li><a href="#">命令3</a></li>
                            <li><a href="#">命令4</a></li>
                        </ul>
                    </div>

效果如下：  
![在这里插入图片描述][20210228095053871.png_pic_center]

## 2.6 上拉菜单 ##

这个实现比较奇葩，可以让子菜单弹出方向改变，真实使用场景我都没见过。只需要将dropdown样式类改为dropup即可。

上拉菜单：
                    <div class="dropup">
                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                            下发命令
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">命令1</a></li>
                            <li><a href="#">命令2</a></li>
                        </ul>
                    </div>

![在这里插入图片描述][20210228095242600.png_pic_center]

# 3. 按钮式下拉菜单 #

按钮式下拉菜单的实现，只需要将之前的dropdown样式类改为btn-group即可，有个例外是上拉菜单，需要将dropup改为btn-group和dropup两个样式类。

具体代码如下：

<div class="col-md-12">
                    按钮式下拉菜单：
                    <div class="btn-group">
                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                            下发命令
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">命令1</a></li>
                            <li><a href="#">命令2</a></li>
                        </ul>
                    </div>
                    更换颜色:
                    <div class="btn-group">
                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                            下发命令
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">命令1</a></li>
                            <li><a href="#">命令2</a></li>
                        </ul>
                    </div>
                    更换尺寸:
                    <div class="btn-group">
                        <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
                            下发命令
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">命令1</a></li>
                            <li><a href="#">命令2</a></li>
                        </ul>
                    </div>
                    添加分割线：
                    <div class="btn-group">
                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                            下发命令
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">命令1</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">命令2</a></li>
                        </ul>
                    </div>
                    菜单分组：
                    <div class="btn-group">
                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                            下发命令
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">分组1</li>
                            <li><a href="#">命令1</a></li>
                            <li><a href="#">命令2</a></li>
                            <li class="dropdown-header">分组2</li>
                            <li><a href="#">命令3</a></li>
                            <li><a href="#">命令4</a></li>
                        </ul>
                    </div>
                    上拉菜单：
                    <div class="btn-group dropup">
                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                            下发命令
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">命令1</a></li>
                            <li><a href="#">命令2</a></li>
                        </ul>
                    </div>
                </div>

# 4. 小结 #

在实际使用中，建议是用按钮式的下拉菜单。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/cefbbacd80a9443dbfa60bf02b2c72b1.png
[20210228094808777.png_pic_center]: /images/20221024/bdd9e0e20044490094c95231d942e05f.png
[20210228094830908.png_pic_center]: /images/20221024/543f2b48c11a41a5afc669dc2c2f20f1.png
[20210228094852131.png_pic_center]: /images/20221024/687956286de9454a9da19196bac1453d.png
[20210228095003428.png_pic_center]: /images/20221024/70a117a2f8bb400a8a6e7922d4200da2.png
[20210228095053871.png_pic_center]: /images/20221024/f565227c64ee46ffaebf32f801322ce7.png
[20210228095242600.png_pic_center]: /images/20221024/2570a87398324f228875057e595b2793.png