bootstrap--组件之按钮式下拉菜单
2024-10-16 22:18:57
把任意一个按钮放入 .btn-group
中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了。
简单的实现如下
Code<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
效果
就是之前说的button然后右边加了个小三角,至于button的颜色,和button的样式属性是一样的,大家可以在光放文档中找到,但让这样的按钮是点击了之后才会显示下拉菜单的,但是当制作网页的时候往往希望鼠标滑过就能显示下拉菜单,具体怎么修改样式,前面也说过,大家可以查找前面的文章或者百度。
分裂式按钮下拉菜单
相似地,分裂式按钮下拉菜单也需要同样的改变一些标记,但只是多一个分开的按钮。
Code<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
效果
很明显也就是靠三角左边多了条竖线。
尺寸
尺寸的样式和button样式一样,btn-lg,btn-small等,看前面button介绍。
向上弹出式菜单
实现很简单,只需要给父元素添加 .dropup
类就能使触发的下拉菜单朝上方打开。
下拉式按钮组就到这了。更多内容请大家前往www.bootcss.com 学习
最新文章
- android 7.0 学习笔记(一)
- javascript数据结构与算法--高级排序算法
- Codeforces Round #329 (Div. 2) D. Happy Tree Party LCA/树链剖分
- 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
- js解析php数组
- There has been an error processing your request magento
- Asp.Net 之 调用远程Web_Service
- Linux的inode的理解 [转]
- 一款很便捷很实用的框架——vue.js
- 堆应用---构造Huffman树(C++实现)
- Docker容器的管理
- DedeCMS上传视频
- Word 如何设置空白页不编码,其他页码连续
- Ubuntu16.04+cuda8.0rc+opencv3.1.0+caffe+Theano+torch7搭建教程
- Weblogic下启用Gzip压缩
- angular 使用rxjs 监听同级兄弟组件数据变化
- jQuery的页面初始化操作写法
- 深入理解java虚拟机(三)对象回收判断算法以及死亡过程
- 挑战python 之一马当先(python的广搜)
- HDOJ5876(补图的最短路)