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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
jquery中常用的SET和GET
Jan 13 Javascript
常用一些Javascript判断函数
Aug 14 Javascript
node.js中的require使用详解
Dec 15 Javascript
JS二分查找算法详解
Nov 01 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 Javascript
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
php 字符串压缩方法比较示例
2014/01/23 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
asp批量修改记录的代码
2008/06/25 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
vant实现购物车功能
2020/06/29 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python 的类、继承和多态详解
2017/07/16 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
经济贸易系毕业生求职信
2014/05/31 职场文书
安全保证书
2015/01/16 职场文书
社会实践活动总结
2015/02/05 职场文书
婚宴新郎致辞
2015/07/28 职场文书
python tqdm用法及实例详解
2021/06/16 Python
Python绘画好看的星空图
2022/03/17 Python
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏