zoukankan      html  css  js  c++  java
  • Bootstrap系列 -- 34. 按钮下拉菜单

      按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.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>
      
      <div class="btn-group">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                请选择
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a>答复打底衫费</a></li>
                <li><a>答复打底衫费</a></li>
                <li><a>答复打底衫费</a></li>
                <li><a>答复打底衫费</a></li>
            </ul>
        </div>
  • 相关阅读:
    css 样式库
    css命名规则
    css选择器
    清除浏览器自带样式
    导航菜单制作
    清除浮动和样式重置快捷代码
    程序练习网站
    各种布局样式模板
    使用gulp解决外部编辑器修改Eclipse文件延迟刷新
    jQuery Validate 表单验证 — 用户注册简单应用
  • 原文地址:https://www.cnblogs.com/qingyuan/p/4603394.html
Copyright © 2011-2022 走看看