Bootstrap笔记6—下拉菜单

最新推荐文章于 2025-05-08 17:58:16 发布

原创最新推荐文章于 2025-05-08 17:58:16 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

Bootstrap 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用 Bootstrap 创建下拉菜单，并演示了如何在下拉菜单中添加分割线，以及不同方向的按钮组布局。包括水平排列、垂直排列和自适应占满容器的按钮组实现。

1.普通下拉菜单

这里写图片描述

<div class="dropdown">
    <button type="button" class="btn btn-danger" data-toggle="dropdown" ><!--data-toggle="dropdown"使点击展示下拉菜单-->
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu"> <!--class="dropdown-menu"是隐藏下拉菜单的内容-->
        <li><a href="#">文件</a></li>
        <li><a href="#">文件</a></li>
        <li><a href="#">文件</a></li>
        <li><a href="#">文件</a></li>
    </ul>
</div>

2.下拉菜单添加分割线

这里写图片描述

直接在普通下拉菜单的ul下li标签添加<li class="divider"></li>如下：

<ul class="dropdown-menu">
    <li><a href="#">文件</a></li>
    <li class="divider"></li>
    <li><a href="#">文件</a></li>
    <li class="divider"></li>
    <li><a href="#">文件</a></li>
    <li class="divider"></li>
    <li><a href="#">文件</a></li>
</ul>

3.按钮组

3.1 水平方向

这里写图片描述

默认就是水平方向排列。

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮组</button>
    <button type="button" class="btn btn-default">按钮组</button>
    <button type="button" class="btn btn-default">按钮组</button>
</div>

3.2 垂直方向

这里写图片描述

给按钮组添加类btn-group-vertical如下：

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">按钮组</button>
    <button type="button" class="btn btn-default">按钮组</button>
    <button type="button" class="btn btn-default">按钮组</button>
</div>

3.3自适应占满容器

这里写图片描述

占满col-md-6这列。要给按钮组的类添加btn-group-justified

<div class="row">
    <div class="col-sm-6">
        <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button type="button" class="btn btn-default">按钮组</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default">按钮组</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default">按钮组</button>
            </div>
        </div>
    </div>
</div>