zoukankan      html  css  js  c++  java
  • 按钮下拉菜单

    按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。简单点说就是点击一个按钮,会显示隐藏的下拉菜单。

    按钮下拉菜单其实就是普通的下拉菜单,只不过把“<a>”标签元素换成了“<button>”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”

    <div class="btn-group">
          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
          <ul class="dropdown-menu">
              <li><a href="##">按钮下拉菜单项</a></li>
              <li><a href="##">按钮下拉菜单项</a></li>
              <li><a href="##">按钮下拉菜单项</a></li>
              <li><a href="##">按钮下拉菜单项</a></li>
          </ul>
    </div>

    实现样式代码如下:

    /*查看bootstrap.css文件第3204行~第3223行*/

    .btn-group .dropdown-toggle:active,
    .btn-group.open .dropdown-toggle {
      outline: 0;
    }
    .btn-group > .btn + .dropdown-toggle {
      padding-right: 8px;
      padding-left: 8px;
    }
    .btn-group > .btn-lg + .dropdown-toggle {
      padding-right: 12px;
      padding-left: 12px;
    }
    .btn-group.open .dropdown-toggle {
      -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
              box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    }
    .btn-group.open .dropdown-toggle.btn-link {
      -webkit-box-shadow: none;
              box-shadow: none;
    }

    
    
  • 相关阅读:
    【logback】认识logback
    【mybatis】认识selectKey
    【Mybatis】Insert批量操作
    JS事件委托
    android studio cmd获取SHA1 + java环境配置
    View的setOnClickListener的添加方法
    android apk 反编译 包括解密xml文件 资源文件 源代码
    localdb 2014 添加实例 v12.0 及IIS设置
    win10 离线安装 net 2.0 3.5
    c# json使用集
  • 原文地址:https://www.cnblogs.com/zhuyuanyuan/p/4227496.html
Copyright © 2011-2022 走看看