学习笔记9--按钮组(学习整理)
来源:互联网 发布:webshell提权 编辑:程序博客网 时间:2024/04/27 19:33
1. 通过按钮组容器 把一组按钮放在同一行里,通过与按钮插件联合使用,可以设置成单选框或者多选框的样式和行为。
注意:按钮组中的工具提示和弹出框需要特别的设置,当为 .btn-group
中的元素应用工具提示或弹出框时,必须指定 container: 'body'
选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角)。
2.在使用的过程中如果需要用到一系列按钮,就可以通过按钮组来解决这个问题。
3.按钮的大小:
只要给.btn-group加上.btn-group-*类,就不用给按钮组中的每个按钮去赋予尺寸类了。
例如:
<div class="btn-group btn-group-lg">...</div>
<divclass="btn-group">...</div>
<divclass="btn-group btn-group-sm">...</div>
<divclass="btn-group btn-group-xs">...</div>
4.按钮的嵌套:
如果想要把下拉菜单混合到一系列按钮中,只需要把.btn-group放入到另一个.btn-group中就可以了。
5.垂直排列: 按钮竖着排列。分列式按钮下拉菜单不支持这种方式。
<divclass="btn-group-vertical">
...
</div>
6.两端对齐的按钮组(我没看懂。。。。。。)
7.按钮式下拉菜单:任意一个按钮放入.btn-group中,加入适当的菜单标签,就可以让按钮作为菜单的触发器了。
插件依赖
按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootstrap 版本中。
8.分裂式按钮下拉菜单
效果图:
9.向上弹出式菜单。
给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。
<div class="btn-group dropup">
<button type="button"class="btn btn-default">Dropup</button>
<button type="button"class="btn btn-default dropdown-toggle"data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu"role="menu">
<!-- Dropdown menu links -->
</ul>
</div>
参考:http://v3.bootcss.com/components/#btn-dropdowns-split
- 学习笔记9--按钮组(学习整理)
- 学习笔记9--按钮组(学习整理)
- php-学习笔记(整理)
- minigui学习笔记-按钮
- bootstrap学习笔记-按钮
- Android(OPhone) 学习笔记 - 按钮响应
- Cocos2dx学习笔记(四)关闭按钮
- 增强学习:学习笔记整理
- J2ME学习笔记整理
- java学习整理笔记
- 整理学习笔记
- linux 学习笔记整理
- VC学习笔记整理
- 学习笔记 整理
- Intent学习笔记整理
- WinDbg学习笔记整理
- mongoDB学习笔记整理
- redis学习笔记整理
- spring与mybatis三种整合方法
- Java UIManager
- 用lua配置你的应用程序
- Java的checked和unchecked异常
- android状态栏一体化(改变状态栏的背景颜色)开源工程推荐
- 学习笔记9--按钮组(学习整理)
- nagios监控windows 报NSClient - ERROR: Invalid password
- Qt5.2 for Android 配置及部署到手机运行
- 7数组
- solr4.8单机部署(solr4.8+tomcat7)
- C#之语言详述
- Maven命令
- iOS屏幕旋转学习笔记
- 关于 .Net中文件拖放的问题