Bootstrap系列 -- 34. 按钮下拉菜单

简介:   按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。简单点说就是点击一个按钮,会显示隐藏的下拉菜单。按钮下拉菜单其实就是普通的下拉菜单,只不过把“”标签元素换成了“”标签元素。

 

  按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.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>

 

相关文章
N..
|
5月前
|
开发框架 前端开发 UED
Bootstrap下拉菜单与选项卡
Bootstrap下拉菜单与选项卡
N..
44 1
|
11月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
86 1
|
12月前
|
前端开发 JavaScript 容器
|
5月前
|
前端开发
Bootstrap 5 保姆级教程(四):信息提示框 & 按钮
Bootstrap 5 保姆级教程(四):信息提示框 & 按钮
|
11月前
|
前端开发
如何去掉bootstrap按钮边框
如何去掉bootstrap按钮边框
|
12月前
|
前端开发 JavaScript
|
12月前
|
前端开发 容器
|
12月前
|
前端开发 容器
|
11月前
|
前端开发
bootstrap table点击修改按钮给弹框赋值
bootstrap table点击修改按钮给弹框赋值
46 0
|
11月前
|
前端开发
Bootstrap纯CSS3箭头按钮样式
Bootstrap纯CSS3箭头按钮样式
171 0