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;
    }

    
    
  • 相关阅读:
    MVC Form
    The way to learn english
    Test FastThree
    C#中Trim()、TrimStart()、TrimEnd()的用法
    c# Dictionary 简介
    visual studio快捷键大全
    ASP.NET MVC 中 ActionResult
    MVC4中使用 Ninject
    MVC Chapter 12 Overview of MVC Projects
    ASP.NET Razor
  • 原文地址:https://www.cnblogs.com/zhuyuanyuan/p/4227496.html
Copyright © 2011-2022 走看看