BootStrap笔记-下拉菜单的使用

运行截图如下：

代码如下；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CN_TEST1</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--    bootstrap css核心文件--><link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
<!--    bootstrap使用到了jquery，需要提前引用--><script src="js/jquery-3.5.1.min.js"></script>
<!--    弹窗、提示、下拉菜单--><script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
<!--    bootstrap核心文件--><script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script></head>
<body><div class="container-fluid"><div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">DropDown</button><div class="dropdown-menu"><a class="dropdown-item" href="#">Link 1</a><a class="dropdown-item" href="#">Link 2</a><a class="dropdown-item" href="#">Link 3</a></div></div><br/><div class="dropdown"><a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a><div class="dropdown-menu" aria-labelledby="dropdownMenuLink"><div class="dropdown-header">Dropdown header 1</div><a class="dropdown-item" href="#">Link 1</a><a class="dropdown-item" href="#">Link 2</a><div class="dropdown-divider"></div><a class="dropdown-item disabled" href="#">Link 3</a></div></div><br/></div></body>
</html>

解释：

①实现下拉菜单的逻辑先在div中设置dropdown-menu，再到里面一层放dropdown-item；

BootStrap笔记-下拉菜单的使用相关推荐

02 - Unit07：显示笔记下拉菜单、笔记的分享功能、笔记的删除功能
显示笔记下拉菜单笔记的分享功能发送Ajax请求绑定事件:绑定分享按钮单击事件参数获取:笔记ID 发送请求:/share/add.do 服务器处理 ShareController ShareSe ...
Bootstrap mouseover 下拉菜单 Enable Hover for Bootstrap Nav Dropdowns
Bootstrap v3′s navigation has menus toggle enabled by default - you have to click to have them open/ ...
Bootstrap 按钮下拉菜单
按钮下拉菜单,就为按钮添加一个下拉菜单,当用户点击按钮时,再显示或隐藏下拉菜单.只需把按钮和下拉菜单包装在一个 .btn-group 中,并为按钮添加 .dropdown-toggle 类和 data ...
Bootstrap 多级下拉菜单
在很多时候,我们可能需要多级下拉菜单.在一个下拉菜单的某个菜单项中,再创建另一个下拉菜单,即可实现多级下拉菜单. 只需为下拉菜单的任意 <li> 元素添加 .dropdown-submen ...
解决bootstrap dropdown 下拉菜单有时候不能显示的问题
解决bootstrap dropdown 下拉菜单有时候不能显示的问题参考文章: (1)解决bootstrap dropdown 下拉菜单有时候不能显示的问题 (2)https://www.cnbl ...
Bootstrap级联下拉菜单，你肯定用得到
今天我将介绍自定义的bootstrap级联下拉菜单(你肯定用得到),主要应用场合有省市级关联菜单等等,那么就先拿这个例子来讲,当然其他场景的关联菜单也同样适用.说实话,封装好一个通用的组件还是需要花费 ...
WEB前端网页设计-Bootstrap 按钮下拉菜单
目录 Bootstrap 按钮下拉菜单分割的按钮下拉菜单按钮下拉菜单的大小按钮上拉菜单 Bootstrap 按钮下拉菜单本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单. ...
html5三级下拉菜单,Bootstrap多级下拉菜单插件
bootstrap-submenu是一款在原生bootstrap Dropdowns组件的基础上进行扩展,可以生成多级子菜单的多级下拉菜单插件. 原生的bootstrap下拉菜单只有一层,通过boot ...
Bootstrap的下拉菜单
下拉菜单引入Boostrap的CSS和JS <div class="dropdown"><a data-toggle="dropdown" ...

BootStrap笔记-下拉菜单的使用

BootStrap笔记-下拉菜单的使用相关推荐

最新文章

热门文章