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面向对象之二 命名空间
Feb 08 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
js验证框架实现代码分享
May 18 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
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之第五天
2006/10/09 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
详解Python locals()的陷阱
2019/03/26 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
高中生学习总结的自我评价范文
2013/10/13 职场文书
业务部主管岗位职责
2014/01/29 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
学校体育节班级口号
2015/12/25 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android