首页 >

深入浅析Bootstrap中的下拉菜单组件

Posted on 05/07/2021 | by liu

web前端|Bootstrap教程深入浅析Bootstrap中的下拉菜单组件

Bootstrap,下拉菜单组件

web前端-Bootstrap教程

e4a源码播放器,vscode怎么调浏览器,ubuntu 在线账户,tomcat加引用路径,新房很多爬虫,php mpdf 下载,云南推广抖音seo优化方案lzw

《bootstrap教学》

dnf刷图脚本源码,ubuntu 字体乱码,tomcat设置堆的大小,NIO异步爬虫,php服务器最新版,白云区市场seo优化哪家便宜lzw

bootstrap框架中的下拉菜单组件是一个独立的组件，根据不同的版本，他对应的文件：

分享源码,ubuntu的挂载使用,tomcat8端口配置,漫画爬虫ios,星座配对php源码,沈阳电商抖音seo优化信息中心lzw

less 对应的源码文件为：dropdowns.less

sass对应的源码文件为：_dropdowns.scss

在使用bootstrap矿建的下拉菜单时，必须调用bootstrap框架提供的bootstrap.js文件。对于未编译版本，可以在js下找到一个名为dropdown.js的文件，也可以调用这个文件。也可以调用压缩好的文件bootstrap.min.js

由于bootstrap组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jQuery.min.js

官网上的示例：

   下拉菜单项
   …   
 下拉菜单项

详解：

1、使用一个名为dropdown的容器包裹了整个下拉菜单元素

2、使用了

css样式：

.dropdown-header {  display: block;  padding: 3px 20px;  font-size: 12px;  line-height: 1.42857143;  color: #999; }

bootstrap框架中下拉菜单默认是左对齐，如果要下拉菜单相对于父级容器右对齐，可以在dropdown-menu上添加一个类.dropdown-menu-right，注意，从v3.1.0版本开始，不再建议对下拉菜单使用.pull-right类

…

.dropdown-menu-right {  right: 0;  left: auto;   }.dropdown{float: left; }

菜单项状态

下拉菜单的默认状态有悬浮状态：hover和焦点状态：focus

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {  color: #262626;  text-decoration: none;  background-color: #f5f5f5; }

下拉菜单还有当前状态和禁用状态，这两种状态使用方法只需要在对应的菜单项上添加对应的类名

   下拉菜单项
    ….    下拉菜单项

CSS:

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {  color: #fff;  text-decoration: none;  background-color: #428bca;  outline: 0; }.dropdown-menu > .disabled > a,.dropdown-menu > .disabled > a:hover,.dropdown-menu > .disabled > a:focus {  color: #999;  }.dropdown-menu > .disabled > a:hover,.dropdown-menu > .disabled > a:focus {  text-decoration: none;  cursor: not-allowed;  background-color: transparent;  background-image: none;  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); }

编程视频！！

bootstrap 下拉菜单组件