Bootstrap4 下拉菜单
当用户将鼠标悬停或单击触发元素时，通常在导航标题内使用下拉菜单显示相关链接的列表。您可以使用Bootstrap下拉插件向几乎所有内容（如链接，按钮或按钮组，导航栏，选项卡和药丸导航等）添加可切换的下拉菜单（即单击打开和关闭），而无需编写任何JavaScript代码。
Bootstrap4 下拉菜单依赖于 popper.min.js。
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。
<!DOCTYPEhtml><html><head><title>Bootstrap示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"><h2>下拉菜单</h2><p>.dropdown类用来指定一个下拉菜单。</p><p>.dropdown-menu类来设置实际下拉菜单。</p><p>我们可以使用一个按钮或链接来打开下拉菜单，按钮或链接需要添加.dropdown-toggle和data-toggle="dropdown"属性。</p><divclass="dropdown"><buttontype="button"class="btnbtn-primarydropdown-toggle"data-toggle="dropdown">Dropdownbutton</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Link1</a><aclass="dropdown-item"href="#">Link2</a><aclass="dropdown-item"href="#">Link3</a></div></div></div></body></html>测试看看 ‹/›
运行后效果如下:
示例解析
.dropdown 类用来指定一个下拉菜单。
我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。
<div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加.dropdown-item 类。
我们也可以在 <a> 标签中使用：
<!DOCTYPEhtml><html><head><title>Bootstrap示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"><divclass="dropdown"><aclass="btnbtn-secondarydropdown-toggle"href="#"role="button"id="dropdownMenuLink"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Dropdownlink</a><divclass="dropdown-menu"aria-labelledby="dropdownMenuLink"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Anotheraction</a><aclass="dropdown-item"href="#">Somethingelsehere</a></div></div></div></body></html>测试看看 ‹/›
下拉菜单中的分割线
.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线：
<!DOCTYPEhtml><html><head><title>Bootstrap示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"><h2>下拉菜单中</h2><p>.dropdown-divider类用于在下拉菜单中创建一个水平的分割线：</p><divclass="dropdown"><buttontype="button"class="btnbtn-primarydropdown-toggle"data-toggle="dropdown">Dropdownbutton</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Link1</a><aclass="dropdown-item"href="#">Link2</a><aclass="dropdown-item"href="#">Link3</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Anotherlink</a></div></div></div></body></html>测试看看 ‹/›
下拉菜单中的标题
.dropdown-header 类用于在下拉菜单中添加标题：
<!DOCTYPEhtml><html><head><title>Bootstrap示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"><h2>下拉菜单中</h2><p>.dropdown-header类用于在下拉菜单中添加标题：</p><divclass="dropdown"><buttontype="button"class="btnbtn-primarydropdown-toggle"data-toggle="dropdown">Dropdownbutton</button><divclass="dropdown-menu"><h5class="dropdown-header">Dropdownheader</h5><aclass="dropdown-item"href="#">Link1</a><aclass="dropdown-item"href="#">Link2</a><aclass="dropdown-item"href="#">Link3</a><h5class="dropdown-header">Dropdownheader</h5><aclass="dropdown-item"href="#">Anotherlink</a></div></div></div></body></html>测试看看 ‹/›
下拉菜单中的可用项与禁用项
.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。
如果要禁用下拉菜单的选项，可以使用.disabled 类。
<!DOCTYPEhtml><html><head><title>Bootstrap示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"><h2>下拉菜单</h2><p>.active类会让下拉菜单的选项高亮显示(添加蓝色背景)。</p><p>如果要禁用下拉菜单的选项，可以使用.disabled类。</p><divclass="dropdown"><buttontype="button"class="btnbtn-primarydropdown-toggle"data-toggle="dropdown">Dropdownbutton</button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Normal</a><aclass="dropdown-itemactive"href="#">Active</a><aclass="dropdown-itemdisabled"href="#">Disabled</a></div></div></div></body></html>测试看看 ‹/›
下拉菜单的定位
如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类。
<!DOCTYPEhtml><html><head><title>Bootstrap示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"><h2>下拉菜单</h2><p>如果我们想让下拉菜单右对齐，可以在元素上的.dropdown-menu类后添加.dropdown-menu-right类。</p><divclass="dropdown"><buttontype="button"class="btnbtn-primarydropdown-toggle"data-toggle="dropdown">Dropdownbutton</button><divclass="dropdown-menudropdown-menu-right"><aclass="dropdown-item"href="#">Link1</a><aclass="dropdown-item"href="#">Link2</a><aclass="dropdown-item"href="#">Link3</a></div></div></div></body></html>测试看看 ‹/›
下拉菜单弹出方向设置
下拉菜单弹出方向默认为向下，当然我们也可以设置不同的方向。
指定向右弹出的下拉菜单
如果你希望下拉菜单向右弹出，可以在 div 元素上添加 "dropright" 类:
<!DOCTYPEhtml><html><head><title>Bootstrap示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"><h2>下拉菜单</h2><p>.dropright类用于设置下拉菜单向右弹出：</p><br><!--Defaultdroprightbutton--><divclass="btn-groupdropright"><buttontype="button"class="btnbtn-secondarydropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Dropright</button><divclass="dropdown-menu"><!--Dropdownmenulinks--><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Anotheraction</a><aclass="dropdown-item"href="#">Somethingelsehere</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Separatedlink</a></div></div><!--Splitdroprightbutton--><divclass="btn-groupdropright"><buttontype="button"class="btnbtn-secondary">Splitdropright</button><buttontype="button"class="btnbtn-secondarydropdown-toggledropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">ToggleDropright</span></button><divclass="dropdown-menu"><!--Dropdownmenulinks--><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Anotheraction</a><aclass="dropdown-item"href="#">Somethingelsehere</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Separatedlink</a></div></div></div></body></html>测试看看 ‹/›
指定向上弹出的上拉菜单
如果你希望上拉菜单向上弹出，可以在 div 元素上添加 "dropup" 类:
<!DOCTYPEhtml><html><head><title>Bootstrap示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"><h2>下拉菜单</h2><p>.dropup类用于设置下拉菜单向上弹出：</p><br><br><br><br><br><br><br><br><!--Defaultdropupbutton--><divclass="btn-groupdropup"><buttontype="button"class="btnbtn-secondarydropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Dropup</button><divclass="dropdown-menu"><!--Dropdownmenulinks--><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Anotheraction</a><aclass="dropdown-item"href="#">Somethingelsehere</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Separatedlink</a></div></div><!--Splitdropupbutton--><divclass="btn-groupdropup"><buttontype="button"class="btnbtn-secondary">Splitdropup</button><buttontype="button"class="btnbtn-secondarydropdown-toggledropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">ToggleDropdown</span></button><divclass="dropdown-menu"><!--Dropdownmenulinks--><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Anotheraction</a><aclass="dropdown-item"href="#">Somethingelsehere</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Separatedlink</a></div></div></div></body></html>测试看看 ‹/›
指定向左边弹出的下拉菜单
如果你希望下拉菜单向上弹出，可以在 div 元素上添加 "dropleft" 类:
<!DOCTYPEhtml><html><head><title>Bootstrap示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"style="text-align:center;"><h2>下拉菜单</h2><p>.dropleft类用于设置下拉菜单向左弹出：</p><br><!--Defaultdropleftbutton--><divclass="btn-groupdropleft"><buttontype="button"class="btnbtn-secondarydropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Dropleft</button><divclass="dropdown-menu"><!--Dropdownmenulinks--><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Anotheraction</a><aclass="dropdown-item"href="#">Somethingelsehere</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Separatedlink</a></div></div><br><br><br><!--Splitdropleftbutton--><divclass="btn-groupdropleft"><buttontype="button"class="btnbtn-secondary">Splitdropleft</button><buttontype="button"class="btnbtn-secondarydropdown-toggledropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">ToggleDropleft</span></button><divclass="dropdown-menu"><!--Dropdownmenulinks--><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Anotheraction</a><aclass="dropdown-item"href="#">Somethingelsehere</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Separatedlink</a></div></div></div></body></html>测试看看 ‹/›
按钮中设置下拉菜单
我们可以在按钮中添加下拉菜单：
<!DOCTYPEhtml><html><head><title>Bootstrap示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"><h2>按钮中的下拉菜单</h2><divclass="btn-group"><buttontype="button"class="btnbtn-primary">Primary</button><buttontype="button"class="btnbtn-primarydropdown-toggledropdown-toggle-split"data-toggle="dropdown"><spanclass="caret"></span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Link1</a><aclass="dropdown-item"href="#">Link2</a></div></div><divclass="btn-group"><buttontype="button"class="btnbtn-secondary">Secondary</button><buttontype="button"class="btnbtn-secondarydropdown-toggledropdown-toggle-split"data-toggle="dropdown"><spanclass="caret"></span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Link1</a><aclass="dropdown-item"href="#">Link2</a></div></div><divclass="btn-group"><buttontype="button"class="btnbtn-success">Success</button><buttontype="button"class="btnbtn-successdropdown-toggledropdown-toggle-split"data-toggle="dropdown"><spanclass="caret"></span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Link1</a><aclass="dropdown-item"href="#">Link2</a></div></div><divclass="btn-group"><buttontype="button"class="btnbtn-info">Info</button><buttontype="button"class="btnbtn-infodropdown-toggledropdown-toggle-split"data-toggle="dropdown"><spanclass="caret"></span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Link1</a><aclass="dropdown-item"href="#">Link2</a></div></div><divclass="btn-group"><buttontype="button"class="btnbtn-warning">Warning</button><buttontype="button"class="btnbtn-warningdropdown-toggledropdown-toggle-split"data-toggle="dropdown"><spanclass="caret"></span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Link1</a><aclass="dropdown-item"href="#">Link2</a></div></div><divclass="btn-group"><buttontype="button"class="btnbtn-danger">Danger</button><buttontype="button"class="btnbtn-dangerdropdown-toggledropdown-toggle-split"data-toggle="dropdown"><spanclass="caret"></span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Link1</a><aclass="dropdown-item"href="#">Link2</a></div></div></div></body></html>测试看看 ‹/›
运行后效果如下:
编辑于2024-05-24 06:15