Bootstrap 5 下拉列表
Bootstrap 2023-08-10 09:26:5312小码哥的IT人生shichen
Bootstrap 5 下拉列表
基础的下拉列表
下拉菜单是一种可切换菜单，允许用户从预定义列表中选择值：
示例代码：
<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> 下拉按钮 </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">链接 1</a></li> <li><a class="dropdown-item" href="#">链接 2</a></li> <li><a class="dropdown-item" href="#">链接 3</a></li> </ul> </div>
完整实例【亲自试一试】：
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>下拉列表</h2> <p>.dropdown 类指示下拉菜单。</p> <p>请使用 .dropdown-menu 类来实际构建下拉菜单。</p> <p>如需打开下拉菜单，请使用设置了 .dropdown-toggle 类和 data-toggle="dropdown" 属性的按钮或链接。</p> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">链接 1</a></li> <li><a class="dropdown-item" href="#">链接 2</a></li> <li><a class="dropdown-item" href="#">链接 3</a></li> </ul> </div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子解释
.dropdown 类指示下拉菜单。
如需打开下拉菜单，请使用设置了 .dropdown-toggle 类和 data-toggle="dropdown" 属性的按钮或链接。
将 .dropdown-menu 类添加到 <div> 元素，可实际构建下拉菜单。然后将 .dropdown-item 类添加到下拉菜单中的每个元素（链接或按钮）。
下拉列表分隔线
.dropdown-divider 类用于通过水平细边框分隔下拉菜单中的链接：
示例代码：
<li><hr class="dropdown-divider"></hr></li>
完整实例【亲自试一试】：
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>下拉菜单</h2> <p>.dropdown-divider 类用于通过水平细边框分隔下拉菜单中的链接：</p> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">链接 1</a></li> <li><a class="dropdown-item" href="#">链接 2</a></li> <li><a class="dropdown-item" href="#">链接 3</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">另一个链接</a></li> </ul> </div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
下拉列表标题
.dropdown-header 类用于在下拉菜单中添加标题：
示例代码：
<li><h5 class="dropdown-header">Dropdown header 1</h5></li>
完整实例【亲自试一试】：
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>下拉菜单</h2> <p>The .dropdown-header class is used to add headers inside the dropdown menu:</p> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Dropdown button </button> <ul class="dropdown-menu"> <li><h5 class="dropdown-header">下拉标题 1</h5></li> <li><a class="dropdown-item" href="#">链接 1</a></li> <li><a class="dropdown-item" href="#">链接 2</a></li> <li><a class="dropdown-item" href="#">链接 3</a></li> <li><h5 class="dropdown-header">下拉标题 2</h5></li> <li><a class="dropdown-item" href="#">另一个链接</a></li> </ul> </div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
禁用的和活动的项目
请使用 .active 类突出显示特定的下拉项（添加蓝色背景色）。
如需禁用下拉列表中的某个项目，请使用 .disabled 类（在悬停时获得浅灰色文本颜色和 "no-parking-sign" 图标）。
示例代码：
<li><a class="dropdown-item" href="#">普通的</a></li> <li><a class="dropdown-item active" href="#">活动的</a></li> <li><a class="dropdown-item disabled" href="#">禁用的</a></li>
完整实例【亲自试一试】：
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>下拉菜单</h2> <p>.active 类为活动链接添加蓝色背景色。</p> <p>.disabled 类禁用下拉项（灰色文本颜色和悬停时的禁止停车标志）。</p> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">普通的</a></li> <li><a class="dropdown-item active" href="#">活动的</a></li> <li><a class="dropdown-item disabled" href="#">禁用的</a></li> </ul> </div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
下拉列表位置
您还可以通过将 .dropend 或 .dropstart 类添加到下拉元素，来创建 "dropend" 或 "dropstart" 菜单。请注意，插入符号/箭头是自动添加的：
Dropright
<div class="dropdown dropend">
完整实例【亲自试一试】：
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>下拉菜单</h2> <p>在下拉菜单旁边添加 .dropend 类，可右对齐下拉菜单。请注意，插入符号/箭头是自动添加的：</p> <div class="dropdown dropend"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Dropend </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Normal</a></li> <li><a class="dropdown-item active" href="#">Active</a></li> <li><a class="dropdown-item disabled" href="#">Disabled</a></li> </ul> </div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Dropleft
<div class="dropdown dropstart">
完整实例【亲自试一试】：
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>下拉菜单</h2> <p>在下拉菜单旁边添加 .dropstart 类，可左对齐下拉菜单。请注意，插入符号/箭头是自动添加的。另请注意，我们将下拉菜单向右浮动：</p> <div class="dropdown dropstart text-end"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Dropstart </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">普通的</a></li> <li><a class="dropdown-item active" href="#">活动的</a></li> <li><a class="dropdown-item disabled" href="#">禁用的</a></li> </ul> </div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
下拉列表右对齐
如需右对齐下拉菜单，请将 .dropdown-menu-end 类添加到带有 .dropdown-menu 的元素：
示例代码：
<div class="dropdown-menu dropdown-menu-end">
完整实例【亲自试一试】：
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>下拉菜单</h2> <p>将 .dropdown-menu-end 类添加到 .dropdown-menu 可右对齐下拉菜单。</p> <div class="dropdown dropdown-menu-end"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> 用于演示此例的宽的下拉按钮 </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">链接 1</a></li> <li><a class="dropdown-item" href="#">链接 2</a></li> <li><a class="dropdown-item" href="#">链接 3</a></li> </ul> </div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
上拉列表
如果您希望下拉菜单向上展开而不是向下展开，请将 class="dropdown" 的 <div> 元素更改为 "dropup"：
示例代码：
<div class="dropup">
完整实例【亲自试一试】：
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>下拉菜单</h2> <p>.dropup 类使下拉菜单向上而不是向下展开：</p> <p>必须有上拉菜单展开的空间。所以我们添加了一些额外的文本。额外的文本。额外的文本。额外的文本。额外的文本。额外的文本。</p> <p>额外的文本。额外的文本。额外的文本。额外的文本。额外的文本。额外的文本。额外的文本。额外的文本。额外的文本。额外的文本。</p> <div class="dropup"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> 上拉按钮 </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">链接 1</a></li> <li><a class="dropdown-item" href="#">链接 2</a></li> <li><a class="dropdown-item" href="#">链接 3</a></li> </ul> </div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
下拉文本
.dropdown-item-text 类用于为下拉项添加纯文本，或用于为链接添加默认链接样式。
示例代码：
<ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">链接 1</a></li> <li><a class="dropdown-item" href="#">链接 2</a></li> <li><a class="dropdown-item" href="#">链接 3</a></li> <li><a class="dropdown-item-text" href="#">文本链接</a></li> <li><span class="dropdown-item-text">纯文本</span></li> </ul>
完整实例【亲自试一试】：
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>下拉菜单</h2> <p>.dropdown-item-text 类用于向下拉列表添加纯文本，或用于链接的默认链接样式。</p> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">链接 1</a></li> <li><a class="dropdown-item" href="#">链接 2</a></li> <li><a class="dropdown-item" href="#">链接 3</a></li> <li><a class="dropdown-item-text" href="#">文本链接</a></li> <li><span class="dropdown-item-text">纯文本</span></li> </ul> </div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
组合按钮和下拉列表
示例代码：
<div class="btn-group"> <button type="button" class="btn btn-primary">华为</button> <button type="button" class="btn btn-primary">大疆</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">小米</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">手机</a></li> <li><a class="dropdown-item" href="#">平板电脑</a></li> </ul> </div> </div>
完整实例【亲自试一试】：
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>嵌套按钮组</h2> <p>嵌套按钮组可创建下拉菜单：</p> <div class="btn-group"> <button type="button" class="btn btn-primary">华为</button> <button type="button" class="btn btn-primary">大疆</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">小米</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">手机</a></li> <li><a class="dropdown-item" href="#">平板电脑</a></li> </ul> </div> </div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
垂直组合按钮和下拉列表
示例代码：
<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">华为</button> <button type="button" class="btn btn-primary">大疆</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">小米</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">手机</a></li> <li><a class="dropdown-item" href="#">平板电脑</a></li> </ul> </div> </div>
完整实例【亲自试一试】：
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>带下拉菜单的垂直按钮组</h2> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">华为</button> <button type="button" class="btn btn-primary">大疆</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">小米</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">手机</a></li> <li><a class="dropdown-item" href="#">平板电脑</a></li> </ul> </div> </div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
