JS组件Bootstrap按钮组与下拉按钮详解


Posted in Javascript onMay 10, 2016

本文先为大家分享按钮组的使用方法,具体内容如下

一、按钮组(Button Groups)

1、单个按钮组
用.btn-group封装多个带.btn的<button>

<div class="btn-group"> 
 <button class="btn">1</button> 
 <button class="btn">2</button> 
 <button class="btn">3</button> 
</div>

2、多个按钮组
将多个<div class="btn-group">放进<div class="btn-toolbar">中。

<div class="btn-toolbar"> 
 <div class="btn-group"> 
  ... 
 </div> 
 <div class="btn-group"> 
  ... 
 </div> 
</div>

3、垂直按钮组
向.btn-group添加.btn-group-vertical。

<div class="btn-group btn-group-vertical"> 
 ... 
</div>

二、下拉按钮(Button Dropdowns)

例子

<div class="btn-group"> 
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
  Action 
  <span class="caret"></span> 
 </a> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div>

1、控制大小
同样使用.btn-large、.btn-small、.btn-mini控制大小。

2、分割的下拉按钮

<div class="btn-group"> 
 <button class="btn">Action</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div>

3、向上出现的菜单

<div class="btn-group dropup"> 
 <button class="btn">Dropup</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div>

三、JavaScript

例子
加载状态。添加data-loading-text="Loading..."。

<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button> 

开关状态。添加data-toggle="button"。

<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
 

复选框。在btn-group后添加data-toggle="buttons-checkbox"。

<div class="btn-group" data-toggle="buttons-checkbox"> 
 <button type="button" class="btn btn-primary">Left</button> 
 <button type="button" class="btn btn-primary">Middle</button> 
 <button type="button" class="btn btn-primary">Right</button> 
</div>

单选。在btn-group后添加data-toggle="buttons-radio"。

<div class="btn-group" data-toggle="buttons-radio"> 
 <button type="button" class="btn btn-primary">Left</button> 
 <button type="button" class="btn btn-primary">Middle</button> 
 <button type="button" class="btn btn-primary">Right</button> 
</div>

用法
JavaScript代码触发开关状态。
$().button("toggle") 
也可添加data-toggle属性自动触发。
<button type="button" class="btn" data-toggle="button" >…</button> 

使用JavaScript代码触发加载状态,同时按钮显示data-loading-text属性指定的值。

$().button("loading") 

<button type="button" class="btn" data-loading-text="loading stuff..." >...</button> 
注意:Firefox在页面载入时会保持按钮无效状态。变通方案是在按钮上应用autocomplete="off"。

使用JavaScript代码重置按钮状态。
$().button("reset") 

重置按钮状态,并将按钮文字变成指定的文字。下例的complete仅为例子,可以替换。

<button class="btn" data-complete-text="finished!" >...</button> 
<script> 
 $('.btn').button('complete') 
</script>

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

Javascript 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
jcrop基本参数一览
Jul 16 Javascript
href下载文件根据id取url并下载
May 28 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
node.js require() 源码解读
Dec 13 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
Bootstrap按钮下拉菜单组件详解
May 10 #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
You might like
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
javascript 有用的脚本函数
2009/05/07 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
koa-router源码学习小结
2018/09/07 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
python 调用win32pai 操作cmd的方法
2017/05/28 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
解析Python的缩进规则的使用
2019/01/16 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
python如何实现图片压缩
2020/09/11 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
以下的初始化有什么区别
2013/12/16 面试题
先进事迹报告会感言
2014/01/24 职场文书
客服部班长工作责任制
2014/02/25 职场文书
会计自荐信范文
2014/03/09 职场文书
中学生评语大全
2014/04/18 职场文书
教师考核表个人总结
2015/02/12 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技