Bootstrap按钮下拉菜单组件详解


Posted in Javascript onMay 10, 2016

按钮组也是一个独立的组件,按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作。

把一组<div class="btn-group">组合进一个<div class="btn-toolbar">做成更复杂的组件。

<div class="btn-toolbar" role="toolbar">
 <div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <button type="button" class="btn btn-default">3</button>
  <button type="button" class="btn btn-default">4</button>
  <button type="button" class="btn btn-default">5</button>
  <button type="button" class="btn btn-default">6</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">7</button>
  <button type="button" class="btn btn-default">8</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">9</button>
 </div>
 </div>

Bootstrap按钮下拉菜单组件详解

按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的。它们唯一的不同是外部容器div.dropdown换成了div.btn-group

<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 href="#">菜单列表1</a></li>
  <li><a href="#">菜单列表2</a></li>
  <li><a href="#">菜单列表3</a></li>
  <li><a href="#">菜单列表4</a></li>
  <li><a href="#">菜单列表5</a></li>
 </ul>
 </div>

bootstrap.css文件

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

按钮的向下向上三角形

按钮的向下三角形,是通过在button标签中添加span标签元素,且类名为.caret

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 按钮下拉菜单
 <span class="caret"></span>
</button>

这个三角形式通过css来实现的,下面是bootstrap.css源码:

.caret {
 display: inline-block;
 width: 0;
 height: 0;
 margin-left: 2px;
 vertical-align: middle;
 border-top: 4px solid;
 border-right: 4px solid transparent;
 border-left: 4px solid transparent;
}
 

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
vue实现微信分享功能
Nov 28 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
Javascript异步编程async实现过程详解
Apr 02 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 #Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 #Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 #Javascript
Bootstrap模仿起筷首页效果
May 09 #Javascript
基于jquery实现智能表单验证操作
May 09 #Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 #Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 #Javascript
You might like
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
golang与PHP输出excel示例
2016/07/22 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
jquery获取transform里的值实现方法
2017/12/12 jQuery
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
Python实现的端口扫描功能示例
2018/04/08 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
python实现三种随机请求头方式
2021/01/05 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
区优秀教师事迹材料
2014/02/10 职场文书
公休请假条
2014/04/11 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
狮子林导游词
2015/02/03 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技