Bootstrap学习笔记--下拉菜单，折叠，菜单，标签，Pills_<ul class="dropdown-menu dropdown-menu-right">-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38409944/article/details/80458831

这篇博客详细介绍了Bootstrap中的下拉菜单、折叠功能、菜单栏和Pills的使用方法，包括各种类的解释和实例演示。下拉菜单通过和类实现，折叠功能借助和data-toggle属性控制内容的显示隐藏。同时，展示了菜单栏、带有下拉框的标签以及Pills的各种展示形式，包括水平、垂直、动态和响应式布局。

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

下拉菜单：
下拉菜单是比较常见的

直接看源码：
.dropdown表示下拉框
按钮和下拉框都要放在dropdown类的div下
要打开下拉菜单，请使用按钮或具有属性的类.dropdown-toggle和属性data-toggle="dropdown"
span+.caret类可以创建一个插入箭头图标
.dropdown-menu类添加到<ul>元素中变成下拉框元素

<div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 哈哈 
            <span class="caret"></scan></button>
            <ul class="dropdown-menu">
                <li><a href="#">html</a></li>
                <li><a href="#">html</a></li>
                <li><a href="#">html</a></li>
            </ul>
        </div>

效果图：
这里写图片描述
点击就会出现三个下拉框。

divider类

<li class="divider"></li>

在下拉框元素中加入这一行会出现一条横线算是分割线吧效果就是一条灰色的实线
举例：

<ul class="dropdown-menu">
                <li><a href="#">html</a></li>
                <li class="divider"></li>
                <li><a href="#">css</a></li>
                <li><a href="#">js</a></li>
            </ul>

电脑无法截屏……大家自己demo试试

dropdown-header类：
是添加下拉框标题效果是：无法点击的颜色较浅，字体变小的内容
举个栗子：

<ul class="dropdown-menu">
                <li class="dropdown-header">表头</li>
                <li><a href="#">html</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">js</a></li>
            </ul>

.disabled类：
这个类很常见的
增添了一个无法点击的一行
举个栗子：

<ul class="dropdown-menu">
                <li class="disabled"><a href="#">无法点击</a></li>
                <li><a href="#">html</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">js</a></li>
            </ul>

.dropdown-menu-right类：
让下拉框右对齐：
举个栗子：

<ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#">html</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">js</a></li>
            </ul>

效果图：
这里写图片描述
下拉框内容居然出现在了右边不过看起来好别扭哦

dropup类：
要是你不喜欢下拉你也可以把它变成上拉框

很简单 就是将class =“dropdown”的<div>元素更改为"dropup"

举个栗子：

    <div class="dropup">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 哈哈 
            <span class="caret"></scan></button>
            <ul class="dropdown-menu">
                <li><a href="#">html</a></li>
                <li><a href="#">css</