zoukankan      html  css  js  c++  java
  • Bootstrap源码解读下拉菜单

     
    Bootstrap源码解读下拉菜单

    基本用法

    在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。 
    使用方法如下: 
    1. 使用一个名为“dropdown”的容器包裹了整个下拉菜单元素:

    2. 使用一个
    实现原理

    Bootstrap框架中的下拉菜单组件,其下拉菜单项默认是隐藏的,因为“dropdown-menu”默认样式设置了“display:none”。实现源码如下:

    .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
     z-index: 1000;
     display: none;
     float: left;
     min- 160px;
     padding: 5px 0;
     margin: 2px 0 0;
     font-size: 14px;
     text-align: left;
     list-style: none;
     background-color: #fff;
     -webkit-background-clip: padding-box;
       background-clip: padding-box;
     border: 1px solid #ccc;
     border: 1px solid rgba(0, 0, 0, .15);
     border-radius: 4px;
     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
       box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    }

    当点击父菜单项时,下拉菜单将会被显示出来,再次点击时,下拉菜单将继续隐藏。实现原理非常简单,通过js,给父容器“div.dropdown”添加或移除类名“open”来控制下拉菜单显示或隐藏。也就是说,默认情况,“div.dropdown”没有类名“open”,当用户第一次点击时,“div.dropdown”会添加类名“open”;当用户再次点击时,“div.dropdown”容器中的类名“open”又会被移除。实现源码如下:

    .open > .dropdown-menu {
     display: block;
    }

  • 相关阅读:
    PyCharm下载和安装教程(包含配置Python解释器)
    C#解压、压缩RAR文件
    使用ADSI获取IIS版本
    SqlCommand.Parameters其实是用的存储过程sp_executesql
    C#将文件从指定的目录复制到另一个目录
    C#如何获取快捷方式指向的目标文件
    winform程序未捕获异常解决方法 EventType clr20r3 P1
    WebClient 下载文件
    获取所有的用户表
    C#操作IIS回收应用程序池,兼容iis6和iis7
  • 原文地址:https://www.cnblogs.com/harryTree/p/11594646.html
Copyright © 2011-2022 走看看