Bootstrap中下拉菜单组件的使用示例-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

Bootstrap中下拉菜单组件的使用示例

这篇文章主要介绍了Bootstrap中下拉菜单组件的使用示例，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联是一家专注于成都网站设计、成都做网站与策划设计,广水网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:广水等地区。广水做网站价格咨询:028-86922220

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

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中下拉菜单组件的使用示例”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

当前文章：Bootstrap中下拉菜单组件的使用示例
路径分享：http://lswzjz.com/article/ghpcjh.html

新闻中心

其他资讯